Hamed/vending-machine-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add interactive picnic journey and synchronize gameplay stages

Browse Source
This commit is contained in:
Hamed
2026-10-20 12:26:14 +03:30
parent 430d7e1c11
commit 5857b11bd8
10 changed files with 258 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.js
+110 -27
View File
@@ -1,3 +1,5 @@
import {createJourney, advanceJourney, tickJourney, journeyLabels} from './journey.js';
import {createJourneyScenery} from './scenery.js';
import * as THREE from 'three';
import './style.css';
import {createPayment, beginPayment, swipePayment, cancelPayment} from './payment.js';
@@ -23,7 +25,7 @@ renderer.setClearColor('#a4b492');
renderer.toneMapping = THREE.ACESFilmicToneMapping;
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2('#a4b492', .018);
const camera = new THREE.PerspectiveCamera(42, 1, .1, 140);
const camera = new THREE.PerspectiveCamera(65, 1, .1, 140);
scene.add(new THREE.HemisphereLight('#fff3cc', '#375946', 2.8));
const sun = new THREE.DirectionalLight('#ffe5a3', 3.3);
sun.position.set(-5, 12, -8);
@@ -103,6 +105,21 @@ for (let i = 0; i < 100; i++) {
ball(.065, material(i % 3 ? '#eadba0' : '#e4ae89'), scene, [x, .22, z]);
}
const scenery = createJourneyScenery(scene, pathZ);
let journey = createJourney(), firstPerson = false, viewYaw = 0, viewPitch = 0;
const journeyPanel = document.createElement('section');
journeyPanel.id = 'journey-panel';
journeyPanel.innerHTML = '<small>FOREST ROAD · یک سفر کنار هم</small><h2></h2><p></p><button></button>';
document.body.append(journeyPanel);
journeyPanel.querySelector('button').onclick = () => { if (advanceJourney(journey)) {firstPerson=false;clearInput();syncHUD();} };
const viewButton = document.createElement('button');
viewButton.id = 'camera-view';viewButton.textContent = 'تغییر دوربین · V';document.body.append(viewButton);
viewButton.onclick = () => {firstPerson = !firstPerson;};
let dragging = false, dragX = 0, dragY = 0;
canvas.addEventListener('pointerdown', e => {dragging=true;dragX=e.clientX;dragY=e.clientY;canvas.setPointerCapture(e.pointerId);});
canvas.addEventListener('pointermove', e => {if(!dragging)return;viewYaw=THREE.MathUtils.clamp(viewYaw+(e.clientX-dragX)*.005,-1.3,1.3);viewPitch=THREE.MathUtils.clamp(viewPitch-(e.clientY-dragY)*.004,-.6,.6);dragX=e.clientX;dragY=e.clientY;});
canvas.addEventListener('pointerup',()=>dragging=false);
canvas.addEventListener('pointercancel',()=>dragging=false);
const characters = createFamily();
const family = characters.group;
scene.add(family);
@@ -113,7 +130,24 @@ const machine = new THREE.Group();
machine.position.set(stationX, 0, stationZ);
machine.rotation.y = .13;
scene.add(machine);
box(1.75, 2.9, 1.1, dark, machine, [0, 1.48, 0]);
const shell = material('#243c3c', {metalness:.55, roughness:.32});
box(1.82, 2.96, 1.15, shell, machine, [0, 1.48, 0]);
const bezel = material('#bbc6bd', {metalness:.75,roughness:.25});
const led = new THREE.MeshBasicMaterial({color:'#c7f6dc'});
for(const side of [-1,1]) {
box(.045,2.78,.04,bezel,machine,[side*.86,1.5,.6]);
box(.018,1.86,.025,led,machine,[-.13+side*.60,1.55,.86]);
}
box(1.72,.07,.04,bezel,machine,[0,2.91,.6]);
box(1.72,.07,.04,bezel,machine,[0,.12,.6]);
box(.3,1.45,.08,material('#142625'),machine,[.67,1.53,.6]);
box(1.2,.04,.08,bezel,machine,[-.13,2.5,.7]);
const displayCanvas=document.createElement('canvas');displayCanvas.width=256;displayCanvas.height=256;
const displayCtx=displayCanvas.getContext('2d');displayCtx.fillStyle='#122d2c';displayCtx.fillRect(0,0,256,256);
displayCtx.textAlign='center';displayCtx.fillStyle='#bcf2d5';displayCtx.font='bold 31px Tahoma';displayCtx.fillText('پرداخت',128,70);
displayCtx.font='24px Tahoma';displayCtx.fillText('کارت بکشید',128,125);displayCtx.fillStyle='#85bbab';displayCtx.fillRect(44,170,168,4);
mesh(new THREE.PlaneGeometry(.23,.3),new THREE.MeshBasicMaterial({map:new THREE.CanvasTexture(displayCanvas)}),machine,[.67,1.7,.669]);
box(1.25, 1.85, .08, material('#a6d5c3', {metalness: .4, roughness: .22}), machine, [-.13, 1.55, .59]);
box(1.13, 1.72, .1, material('#223f3b'), machine, [-.13, 1.55, .65]);
const bottleMats = ['#e5ae47', '#badd81', '#c8704e'].map(c => material(c));
@@ -167,13 +201,13 @@ const label = document.createElement('canvas');
label.width = 512;
label.height = 128;
const ctx = label.getContext('2d');
ctx.fillStyle = '#193c30';
ctx.fillStyle = '#193332';
ctx.fillRect(0, 0, 512, 128);
ctx.fillStyle = '#d9efa7';
ctx.font = 'bold 57px Tahoma';
ctx.font = 'bold 52px Tahoma';
ctx.textAlign = 'center';
ctx.fillText('روبات مارکت', 256, 83);
const sign = material('#ffffff', {map: new THREE.CanvasTexture(label), emissive: '#9cce91', emissiveIntensity: .18});
const sign = new THREE.MeshBasicMaterial({color:'#ffffff', map: new THREE.CanvasTexture(label)});
box(1.5, .38, .05, sign, machine, [0, 2.68, .58]);
// A separate card, animated through the reader only after an explicit swipe.
const bankCard = box(.24, .15, .014, material('#ddd4b4', {metalness: .2}), machine, [.9, 1.8, .8]);
@@ -310,6 +344,8 @@ function renderChapter() {
}
function performStoryAction() {
if(shop.open || notebook.open || ending.open || state.busy) return;
if (journey.phase !== 'walking') { if (advanceJourney(journey)) {firstPerson=false;clearInput();syncHUD();} return; }
if (!chapterId || shop.open || notebook.open || ending.open || state.busy) return;
const chapter = chapters[chapterId];
if (chapter.action && chapterLine === chapter.lines.length - 1) finishChapter(chapter.action.value);
@@ -451,7 +487,12 @@ $('#sound').onclick = async () => {
function syncHUD() {
$('#balance').textContent = fa(state.balance);
$('#basket').textContent = state.basket.length ? '🧺 ' + state.basket.map(p => p.icon).join(' ') : '🧺 سبد پیک‌نیک خالی است';
$('#mission').textContent = !story.done.includes('courage') ? 'مسیر تپه را پیدا کنید' : !story.done.includes('paper') && story.done.includes('wind') ? 'نقاشی را کنار بوته پیدا کنید' : story.done.includes('paper') && !story.route ? 'برای نقاشی یک جای قشنگ پیدا کنید' : readyForPicnic(state) ? 'سبد آماده است؛ به زیرانداز برسید' : state.basket.some(p => p.type === 'drink') ? 'یک خوراکی هم برای پیک‌نیک بردارید' : 'یک نوشیدنی و یک خوراکی تهیه کنید';
$('#mission').textContent = journey.phase !== 'walking' ? journeyLabels[journey.phase][1]
: state.finished ? 'به قله رسیدید؛ روی فرش استراحت کنید'
: chapterId ? chapters[chapterId].title
: !story.done.includes('camp') ? 'مسیر جنگل را تا جمع کنار آتش ادامه بدهید'
: !readyForPicnic(state) ? 'از دستگاه یک نوشیدنی و یک خوراکی بخرید'
: 'خرید آماده است؛ مسیر را تا فرش بالای قله ادامه بدهید';
}
function selectChannel(code) {
@@ -502,7 +543,7 @@ function deliver(p) {
}
function openShop() {
if (Math.abs(x - stationX) < 2.5 && !shop.open && !notebook.open && !state.busy && !state.finished) {
if (!chapterId && journey.phase === 'walking' && Math.abs(x - stationX) < 2.5 && !shop.open && !notebook.open && !state.busy && !state.finished) {
pressed.clear();
held.clear();
$('#shop-status').textContent = 'بچه: خودم می‌تونم انتخاب کنم؟ پدر: حتماً! برای نوشیدنی و خوراکی پول کنار بگذار.';
@@ -574,6 +615,8 @@ $('#product-code').addEventListener('input', () => {
$('#interact').onclick = openShop;
$('#close').onclick = () => shop.close();
window.addEventListener('keydown', e => {
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
if(e.key.toLowerCase()==='v' && !e.repeat){firstPerson=!firstPerson;return;}
if (e.key.toLowerCase() === 'f') {
if (!e.repeat) performStoryAction();
return;
@@ -586,7 +629,7 @@ window.addEventListener('keydown', e => {
if (notebook.open || ending.open) return;
if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', ' '].includes(e.key) && !shop.open && !ending.open) e.preventDefault();
pressed.add(e.key.toLowerCase());
if (e.key.toLowerCase() === 'e') openShop();
if (e.key.toLowerCase() === 'e') { e.preventDefault(); openShop(); }
});
window.addEventListener('keyup', e => pressed.delete(e.key.toLowerCase()));
@@ -609,6 +652,8 @@ for (const [id, dir] of [['back', -1], ['forward', 1], ['zoom-in', 'in'], ['zoom
}
function reset() {
journey = createJourney(); firstPerson=false;viewYaw=0;viewPitch=0;
camera.position.set(-39,3.5,-6);look.set(-32,1,0);
payment = createPayment();
paymentTime = 0;
$('#payment-panel').hidden = true;
@@ -630,6 +675,7 @@ function reset() {
encounterActive = false;
facing = Math.PI / 2;
zoomDistance = 1;
picnicFood.traverse(node => { if (node.isMesh) node.geometry.dispose(); });
picnicFood.clear();
clearInput();
if (shop.open) shop.close();
@@ -686,7 +732,8 @@ function resize() {
window.addEventListener('resize', resize);
resize();
const camTarget = new THREE.Vector3(), look = new THREE.Vector3(x + 1, .8, pathZ(x)), lookTarget = new THREE.Vector3();
camera.position.set(x + 7, 10, 14);
camera.position.set(-39,3.5,-6);
look.set(-32,1,0);
let last = performance.now();
function frame(now) {
@@ -694,10 +741,23 @@ function frame(now) {
const dt = Math.min((now - last) / 1000, .1);
last = now;
elapsed += dt;
const direction = movementDirection(pressed, held);
const paused = shop.open || notebook.open || ending.open || document.hidden;
tickJourney(journey, dt, paused, {throttle:Number(pressed.has('w') || pressed.has('arrowup') || held.has(1))-Number(pressed.has('s') || pressed.has('arrowdown') || held.has(-1)),steer:Number(pressed.has('d') || pressed.has('arrowright') || held.has('out'))-Number(pressed.has('a') || pressed.has('arrowleft') || held.has('in'))});
scenery.update(elapsed, journey.phase, journey.distance/21, journey.lane);
const walking = journey.phase === 'walking';
document.body.classList.toggle('on-journey', !walking);
document.body.classList.toggle('driving', journey.phase === 'driving');
$('#forward').textContent = journey.phase === 'driving' ? 'گاز' : '→';
$('#back').textContent = journey.phase === 'driving' ? 'ترمز' : '←';
$('#zoom-in').textContent = journey.phase === 'driving' ? '↶' : '↑';
$('#zoom-out').textContent = journey.phase === 'driving' ? '↷' : '↓';
for (const [id, driveLabel, walkLabel] of [['forward','گاز','حرکت به جلو'],['back','ترمز','حرکت به عقب'],['zoom-in','فرمان چپ','زوم نزدیک'],['zoom-out','فرمان راست','زوم دور']]) $('#'+id).setAttribute('aria-label', journey.phase === 'driving' ? driveLabel : walkLabel);
journeyPanel.hidden = walking;
if(!walking){const [title,line,action]=journeyLabels[journey.phase];journeyPanel.querySelector('h2').textContent=title;journeyPanel.querySelector('p').textContent=line;const button=journeyPanel.querySelector('button');button.textContent=action;button.hidden=!action;if(journey.phase==='driving')journeyPanel.querySelector('h2').textContent=`جادهٔ جنگلی · ${Math.round(journey.distance/21*100).toLocaleString('fa-IR')}٪ · ${Math.round(journey.speed*12).toLocaleString('fa-IR')} کیلومتر/ساعت`;}
const direction = movementDirection(pressed, held) || (Number(pressed.has('w'))-Number(pressed.has('s')));
const next = nextChapter(story, x);
if (next && !chapterId && !shop.open && !ending.open && !notebook.open && !state.busy && !state.finished) showChapter(next);
if (chapterId && !shop.open && !notebook.open && !ending.open && !document.hidden) {
if (walking && next && !chapterId && !shop.open && !ending.open && !notebook.open && !state.busy && !state.finished) showChapter(next);
if (chapterId && !state.busy && !shop.open && !notebook.open && !ending.open && !document.hidden) {
const chapter = chapters[chapterId], lastLine = chapterLine === chapter.lines.length - 1;
if (!(lastLine && chapter.action)) {
chapterTimer -= dt;
@@ -710,14 +770,14 @@ function frame(now) {
}
}
encounterActive = chapterId === 'rabbit';
moving = canWalk({
moving = walking && canWalk({
shopOpen: shop.open,
notebookOpen: notebook.open,
endingOpen: ending.open,
busy: state.busy,
busy: state.busy || Boolean(chapterId),
finished: state.finished
}) ? direction : 0;
x = THREE.MathUtils.clamp(x + moving * 2.2 * dt, -9, 22);
x = THREE.MathUtils.clamp(x + moving * (pressed.has('shift') ? 3.7 : 2.2) * dt, -9, 22);
family.position.set(x, pathHeight(x), pathZ(x));
family.rotation.y = -Math.atan(.255 * Math.cos(x * .17));
const shopping = shop.open || state.busy;
@@ -725,7 +785,7 @@ function frame(now) {
family.position.x = THREE.MathUtils.lerp(x, stationX, 1 - Math.exp(-dt * 8));
x = family.position.x;
}
const desiredFacing = shopping ? Math.PI : moving < 0 ? -Math.PI / 2 : moving > 0 ? Math.PI / 2 : facing;
const desiredFacing = state.finished ? 0 : shopping ? Math.PI : moving < 0 ? -Math.PI / 2 : moving > 0 ? Math.PI / 2 : facing;
facing += Math.atan2(Math.sin(desiredFacing - facing), Math.cos(desiredFacing - facing)) * (1 - Math.exp(-dt * 7));
if (moving) gait += dt * 6.2;
characters.update({
@@ -739,14 +799,14 @@ function frame(now) {
finished: state.finished,
watchRabbit: encounterActive
});
if (state.finished) family.position.x = 22.7;
if (state.finished) {family.position.copy(picnic.position);family.rotation.y=0;}
rabbit.position.set(-2.5 + (rabbitSeen ? Math.min(4, encounterTime) * .8 : 0), rabbitSeen ? Math.abs(Math.sin(elapsed * 8)) * .3 : 0, pathZ(-2.5) + 2.5 + (rabbitSeen ? Math.min(4, encounterTime) : 0));
if (rabbitSeen) encounterTime = Math.min(4, encounterTime + dt);
camTarget.set(x + 7, state.finished ? 8 : innerWidth < 650 ? 12 : 9, innerWidth < 650 ? 19 : 13);
camTarget.set(x - 4.5, pathHeight(x) + (innerWidth < 650 ? 4 : 3), pathZ(x - 4.5) + 2);
lookTarget.set(x + 1, .8 + pathHeight(x), pathZ(x));
if (shopping) {
camTarget.set(stationX + 4.2, 3.5, stationZ + (innerWidth < 650 ? 8 : 6));
lookTarget.set(stationX, .95, stationZ + .9);
if (walking && (shopping || Math.abs(x-stationX)<3.2)) {
camTarget.set(stationX + 2.6, 2.5, stationZ + (innerWidth < 650 ? 6.5 : 5));
lookTarget.set(stationX, 1.5, stationZ + .6);
}
if (encounterActive) {
camTarget.set(x + 5, 5.5, pathZ(x) + 9);
@@ -757,6 +817,21 @@ function frame(now) {
zoomDistance = THREE.MathUtils.clamp(zoomDistance + zoomInput * dt * .45, .6, 1.6);
}
camTarget.sub(lookTarget).multiplyScalar(zoomDistance).add(lookTarget);
if(walking && Math.abs(x-stationX)>=3.2 && firstPerson && !shopping && !state.finished && !encounterActive){
const bob=moving?Math.sin(gait*2)*.035:0;
camTarget.set(x-.35,1.7+pathHeight(x)+bob,pathZ(x)-.7);
lookTarget.set(x+5*Math.cos(viewYaw),1.65+pathHeight(x)+viewPitch*4,pathZ(x)+5*Math.sin(viewYaw));
}
if(!walking){
const cx=scenery.car.position.x;
family.position.set(journey.phase==='home'?-35:journey.phase==='boarding'?-35+Math.min(1,journey.time/2)*3:-10,0,journey.phase==='home'?4.2-Math.min(1,journey.time/2)*1.2:0);
if(journey.phase==='boarding')characters.update({dt,time:elapsed,gait:elapsed*6,moving:true,facing:Math.PI/2});
camTarget.set(cx-6,3.2,-7);lookTarget.set(cx,1,0);
if(journey.phase==='driving' || journey.phase==='entrance'){camTarget.set(cx-5,3.2,scenery.car.position.z-5);lookTarget.set(cx+3,1,scenery.car.position.z);}
}
family.visible = journey.phase !== 'driving' && !(journey.phase === 'boarding' && journey.time > 1.8) && !(walking && firstPerson && !shopping && !state.finished && !encounterActive);
if(chapterId==='camp' && walking){camTarget.set(1,2.4,-1);lookTarget.set(4,1,4.4);family.visible=true;}
if(state.finished){camTarget.set(25.5,5.1,picnic.position.z+6);lookTarget.copy(picnic.position).add(new THREE.Vector3(0,.6,0));}
if (['approaching', 'ready', 'approved'].includes(payment.phase)) {
const reader = new THREE.Vector3(.67, 1.7, .68);
machine.localToWorld(reader);
@@ -772,7 +847,7 @@ function frame(now) {
camera.updateMatrixWorld();
machine.updateMatrixWorld(true);
const promptPoint = machine.localToWorld(new THREE.Vector3(.55, 2.15, .9)).project(camera);
const promptVisible = near && !shop.open && !notebook.open && !ending.open && !state.busy && !state.finished && promptPoint.z > -1 && promptPoint.z < 1;
const promptVisible = walking && near && !shop.open && !notebook.open && !ending.open && !state.busy && !state.finished && promptPoint.z > -1 && promptPoint.z < 1;
$('#interact').hidden = !promptVisible;
if (promptVisible) {
$('#interact').style.left = `${THREE.MathUtils.clamp((promptPoint.x * .5 + .5) * innerWidth, 85, innerWidth - 85)}px`;
@@ -782,11 +857,19 @@ function frame(now) {
document.body.classList.toggle('near-machine', promptVisible);
celebrate.hidden = !state.finished;
$('#progress').style.width = `${Math.min(100, (state.basket.some(p => p.type === 'drink') ? 30 : 0) + (state.basket.some(p => p.type === 'snack') ? 30 : 0) + (state.finished ? 40 : Math.max(0, (x - 11) / 11) * 35))}%`;
if (!state.busy && !state.finished && !encounterActive) {
$('#speech').textContent = near ? (readyForPicnic(state) ? 'بچه: همه‌چی داریم! بریم سر زیرانداز؟' : 'بچه: بابا، این فروشنده نداره؟ پدر: خودت انتخاب کن، دستگاه بهت می‌ده!') : x > 20 && !readyForPicnic(state) ? 'پدر: برای پیک‌نیک یک نوشیدنی و یک خوراکی لازم داریم؛ برگردیم دستگاه.' : x > 12 ? 'بچه: اون زیرانداز رو ببین! رسیدیم؟' : x > 0 ? 'پدر: صدای پرنده‌ها رو می‌شنوی؟ آروم راه بریم.' : 'بچه: بابا، برای پیک‌نیک چی بخریم؟';
}
if (encounterActive) $('#speech').textContent = 'بچه: بابا نگاه کن! یه خرگوش کوچولو!';
if (x > 21 && storyReady(story) && readyForPicnic(state) && !state.busy && !state.finished) finish();
syncHUD();
$('#speech').hidden = !walking || Boolean(chapterId) || shop.open || notebook.open || ending.open;
$('#speech').textContent = state.finished ? (state.recycled ? 'بچه: جنگل رو تمیز گذاشتیم؛ چه روز خوبی!' : 'بچه: رسیدیم نوک قله؛ روی فرش کنار هم نشستیم.')
: payment.phase !== 'idle' ? $('#payment-result').textContent
: deliveryTime > 0 ? 'پدر: محصول در حال تحویل است؛ کمی صبر کن.'
: near ? (readyForPicnic(state) ? 'پدر: خرید کامل شد؛ حالا به سمت قله برویم.' : 'پدر: این هم دستگاه؛ با E نوشیدنی و خوراکی انتخاب کن.')
: x > 20 && !readyForPicnic(state) ? 'پدر: هنوز نوشیدنی و خوراکی نداریم؛ به دستگاه برگردیم.'
: x > 16 ? 'پدر: مسیر قله را ادامه بده؛ فرش بالای کوه آماده است.'
: x > 11 ? 'بچه: از مسیر جنگل به سمت بالای کوه می‌ریم.'
: x > 2.7 && story.done.includes('camp') ? 'بچه: دوستان گفتند دستگاه کمی جلوتره؛ بریم خرید کنیم.'
: x > -2.2 ? 'پدر: از روی پل عبور کنیم و مسیر جنگل را ادامه بدهیم.'
: 'بچه: از ورودی جنگل به سمت مسیر پیاده‌روی بریم.';
if (!shop.open && !notebook.open && !ending.open && x > 21 && storyReady(story) && readyForPicnic(state) && !state.busy && !state.finished) finish();
if (payment.phase !== 'idle') {
paymentTime += dt;
if (payment.phase === 'approaching' && paymentTime > 1.2) {