import * as THREE from 'three'; export const xr = 'ar'; export default function sketch(ctx) { const { scene, camera, renderer, gui, size, canvas } = ctx; const XR = ctx.xr || null; const sfx = ctx.sfx || null; const S = { hop: 'sfx_j2D0QKBdTBHg', squish: 'sfx_JByfQhkqoMB5', coin: 'sfx_uV8mITMEYJtg', splash: 'sfx_O9Zn6lX9fg4G', music: 'sfx_06jqgtIo2WoX' }; const play = (id, o) => { if (sfx) sfx.play(id, o); }; const params = { traffic: 1, density: 0.5, fog: 0.035, volume: 0.7, moon: '#c9b8ff', restart: () => reset() }; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.15; renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFShadowMap; const BG = '#231a3a'; scene.background = new THREE.Color(BG); scene.fog = new THREE.FogExp2(BG, params.fog); // diorama (AR anchor) > world (game, scaled in AR) const diorama = new THREE.Group(); scene.add(diorama); const world = new THREE.Group(); diorama.add(world); const AR_S = 0.04, HWU = 7.5, HDU = 9; // board half-extents in game units let inAR = false, placedOnSurface = false; // clipping box for AR board const clipPlanes = [new THREE.Plane(), new THREE.Plane(), new THREE.Plane(), new THREE.Plane()]; const localPlanes = [ new THREE.Plane(new THREE.Vector3(1, 0, 0), HWU * AR_S), new THREE.Plane(new THREE.Vector3(-1, 0, 0), HWU * AR_S), new THREE.Plane(new THREE.Vector3(0, 0, 1), HDU * AR_S), new THREE.Plane(new THREE.Vector3(0, 0, -1), HDU * AR_S), ]; // lights const hemi = new THREE.HemisphereLight('#9aa4ff', '#3a2450', 1.6); scene.add(hemi); const moon = new THREE.DirectionalLight(params.moon, 2.4); moon.castShadow = true; moon.shadow.mapSize.set(2048, 2048); moon.shadow.bias = -0.0008; world.add(moon, moon.target); const lantern = new THREE.PointLight('#ffb050', 5, 8, 2); world.add(lantern); // helpers const unit = new THREE.BoxGeometry(1, 1, 1); const mats = new Map(); function M(color, em = 0, op = 1) { const k = color + '|' + em + '|' + op; if (!mats.has(k)) { const m = new THREE.MeshLambertMaterial({ color }); if (em) { m.emissive.set(color); m.emissiveIntensity = em; } if (op < 1) { m.transparent = true; m.opacity = op; } m.clippingPlanes = clipPlanes; mats.set(k, m); } return mats.get(k); } function box(p, w, h, d, color, x = 0, y = 0, z = 0, em = 0, op = 1) { const m = new THREE.Mesh(unit, M(color, em, op)); m.scale.set(w, h, d); m.position.set(x, y, z); m.castShadow = op >= 1; m.receiveShadow = true; p.add(m); return m; } const rnd = (a, b) => a + Math.random() * (b - a); const clamp = (v, a, b) => Math.max(a, Math.min(b, v)); // AR board frame (stone walls + lantern posts), unclipped const frame = new THREE.Group(); diorama.add(frame); frame.visible = false; { const hw = HWU * AR_S, hd = HDU * AR_S, bot = -0.62 * AR_S, th = 0.012, top = 0.004; const h = top - bot, cy = (top + bot) / 2; const stone = new THREE.MeshLambertMaterial({ color: '#3b2e57' }); const dark = new THREE.MeshLambertMaterial({ color: '#241a38' }); const glow = new THREE.MeshLambertMaterial({ color: '#ffb050', emissive: '#ffb050', emissiveIntensity: 1.6 }); const add = (mat, w, hh, d, x, y, z) => { const m = new THREE.Mesh(unit, mat); m.scale.set(w, hh, d); m.position.set(x, y, z); m.receiveShadow = true; frame.add(m); }; add(stone, hw * 2 + th * 2, h, th, 0, cy, hd + th / 2); add(stone, hw * 2 + th * 2, h, th, 0, cy, -hd - th / 2); add(stone, th, h, hd * 2, hw + th / 2, cy, 0); add(stone, th, h, hd * 2, -hw - th / 2, cy, 0); add(dark, hw * 2 + th * 2, 0.012, hd * 2 + th * 2, 0, bot - 0.006, 0); for (const sx of [-1, 1]) for (const sz of [-1, 1]) { add(stone, 0.026, 0.05, 0.026, sx * (hw + th / 2), top + 0.02, sz * (hd + th / 2)); add(glow, 0.016, 0.014, 0.016, sx * (hw + th / 2), top + 0.052, sz * (hd + th / 2)); } } // AR score panel const pc = document.createElement('canvas'); pc.width = 1024; pc.height = 400; const pg = pc.getContext('2d'); const ptex = new THREE.CanvasTexture(pc); ptex.colorSpace = THREE.SRGBColorSpace; const panel = new THREE.Mesh(new THREE.PlaneGeometry(0.44, 0.44 * 400 / 1024), new THREE.MeshBasicMaterial({ map: ptex, transparent: true, depthWrite: false })); panel.position.set(0, 0.13, -HDU * AR_S - 0.04); panel.rotation.x = -0.15; panel.visible = false; diorama.add(panel); // props function makeProp() { const o = new THREE.Group(); const r = Math.random(); if (r < 0.32) { box(o, 0.7, 0.1, 0.45, '#5d5a70', 0, 0.05, 0); const s = new THREE.Group(); o.add(s); s.rotation.z = rnd(-0.12, 0.12); s.rotation.y = rnd(-0.2, 0.2); box(s, 0.6, 0.7, 0.22, '#a7a3bf', 0, 0.45, 0); box(s, 0.44, 0.14, 0.22, '#a7a3bf', 0, 0.87, 0); box(s, 0.06, 0.26, 0.03, '#5d5a70', 0, 0.58, 0.12); box(s, 0.2, 0.06, 0.03, '#5d5a70', 0, 0.64, 0.12); if (Math.random() < 0.5) box(s, 0.22, 0.12, 0.24, '#5f8f45', -0.18, 0.84, 0); box(o, 0.5, 0.1, 0.3, '#3e2c22', 0, 0.05, 0.32); } else if (r < 0.5) { box(o, 0.4, 0.12, 0.4, '#5d5a70', 0, 0.06, 0); box(o, 0.14, 0.95, 0.14, '#c4c0d8', 0, 0.5, 0); box(o, 0.56, 0.14, 0.14, '#c4c0d8', 0, 0.72, 0); o.rotation.z = rnd(-0.1, 0.1); } else if (r < 0.68) { box(o, 0.28, 0.7, 0.28, '#4a3226', 0, 0.35, 0); box(o, 0.82, 0.5, 0.82, '#2f6e57', 0, 0.95, 0); box(o, 0.6, 0.4, 0.6, '#3a8466', 0, 1.38, 0); box(o, 0.36, 0.3, 0.36, '#46997a', 0, 1.7, 0); } else if (r < 0.84) { box(o, 0.26, 1.15, 0.26, '#4a3226', 0, 0.57, 0); const b1 = box(o, 0.5, 0.1, 0.1, '#4a3226', 0.25, 0.9, 0); b1.rotation.z = 0.6; const b2 = box(o, 0.4, 0.1, 0.1, '#4a3226', -0.2, 0.7, 0); b2.rotation.z = -0.5; box(o, 0.12, 0.12, 0.12, '#7b4bd6', 0.42, 1.08, 0, 0.4); } else { box(o, 0.62, 0.48, 0.6, '#ff8a1f', 0, 0.24, 0); box(o, 0.08, 0.5, 0.62, '#e8701a', 0.16, 0.24, 0); box(o, 0.08, 0.5, 0.62, '#e8701a', -0.16, 0.24, 0); box(o, 0.12, 0.1, 0.02, '#ffd84a', 0.14, 0.32, 0.31, 1.2); box(o, 0.12, 0.1, 0.02, '#ffd84a', -0.14, 0.32, 0.31, 1.2); box(o, 0.3, 0.06, 0.02, '#ffd84a', 0, 0.16, 0.31, 1.2); box(o, 0.08, 0.14, 0.08, '#3f7a2f', 0, 0.55, 0); } return o; } function makeZombie() { const o = new THREE.Group(); const parts = {}; const hips = []; for (const z of [-0.12, 0.12]) { const h = new THREE.Group(); h.position.set(0, 0.36, z); o.add(h); box(h, 0.18, 0.36, 0.18, '#4a3a2a', 0, -0.18, 0); hips.push(h); } const torso = new THREE.Group(); o.add(torso); box(torso, 0.36, 0.42, 0.5, '#5a6fb0', 0, 0.57, 0); box(torso, 0.37, 0.1, 0.2, '#7f3a5a', 0, 0.68, 0.1); box(torso, 0.42, 0.4, 0.42, '#8fc46a', 0, 0.98, 0); box(torso, 0.44, 0.1, 0.44, '#4c7a3a', 0, 1.15, 0); box(torso, 0.04, 0.08, 0.08, '#ff3b3b', 0.215, 1.02, 0.1, 1.5); box(torso, 0.04, 0.06, 0.06, '#ff3b3b', 0.215, 1.02, -0.1, 1.5); box(torso, 0.04, 0.05, 0.18, '#3a5a2a', 0.215, 0.88, 0); const arms = []; for (const z of [-0.29, 0.29]) { const a = new THREE.Group(); a.position.set(0.05, 0.72, z); torso.add(a); box(a, 0.45, 0.13, 0.13, '#8fc46a', 0.22, 0, 0); arms.push(a); } parts.hips = hips; parts.arms = arms; parts.torso = torso; return { o, parts }; } function makeGhost() { const o = new THREE.Group(); const inner = new THREE.Group(); o.add(inner); const c = '#f2f0ff'; box(inner, 0.7, 0.62, 0.6, c, 0, 0.85, 0, 0.35, 0.92); box(inner, 0.5, 0.15, 0.5, c, 0, 1.22, 0, 0.35, 0.92); for (let i = 0; i < 3; i++) box(inner, 0.2, 0.18, 0.6, c, -0.22 + i * 0.22, 0.47 - (i % 2) * 0.06, 0, 0.35, 0.92); box(inner, 0.03, 0.14, 0.1, '#15102a', 0.36, 0.95, 0.13); box(inner, 0.03, 0.14, 0.1, '#15102a', 0.36, 0.95, -0.13); box(inner, 0.03, 0.1, 0.1, '#15102a', 0.36, 0.77, 0); box(inner, 0.03, 0.06, 0.1, '#ff9ccf', 0.36, 0.84, 0.24); box(inner, 0.03, 0.06, 0.1, '#ff9ccf', 0.36, 0.84, -0.24); return { o, parts: { inner } }; } function makeSkull() { const o = new THREE.Group(); const roll = new THREE.Group(); roll.position.y = 0.42; o.add(roll); box(roll, 0.8, 0.72, 0.8, '#f4ecd8', 0, 0.04, 0); box(roll, 0.6, 0.18, 0.6, '#e6dcc2', 0, -0.36, 0); for (const s of [1, -1]) { box(roll, 0.2, 0.2, 0.03, '#1a1020', 0.17, 0.08, s * 0.405); box(roll, 0.2, 0.2, 0.03, '#1a1020', -0.17, 0.08, s * 0.405); box(roll, 0.08, 0.1, 0.03, '#1a1020', 0, -0.1, s * 0.405); box(roll, 0.06, 0.1, 0.03, '#1a1020', -0.12, -0.33, s * 0.31); box(roll, 0.06, 0.1, 0.03, '#1a1020', 0.12, -0.33, s * 0.31); } return { o, parts: { roll } }; } function makeCoffin(w) { const o = new THREE.Group(); box(o, w, 0.28, 0.78, '#5e3626', 0, -0.12, 0); box(o, w - 0.12, 0.08, 0.66, '#7c4a32', 0, 0.04, 0); box(o, w * 0.55, 0.03, 0.12, '#e6c76a', 0, 0.095, 0); box(o, 0.12, 0.03, 0.42, '#e6c76a', -w * 0.12, 0.095, 0); return { o, parts: {} }; } function makeCandy() { const o = new THREE.Group(); const s = new THREE.Group(); s.position.y = 0.4; o.add(s); box(s, 0.3, 0.22, 0.22, '#ff5fa2', 0, 0, 0, 0.4); box(s, 0.1, 0.26, 0.26, '#ffe3f0', 0.2, 0, 0, 0.3); box(s, 0.1, 0.26, 0.26, '#ffe3f0', -0.2, 0, 0, 0.3); o.userData.spin = s; return o; } // player const root = new THREE.Group(); world.add(root); const body = new THREE.Group(); root.add(body); box(body, 0.12, 0.08, 0.2, '#ffb030', -0.12, 0.04, -0.02); box(body, 0.12, 0.08, 0.2, '#ffb030', 0.12, 0.04, -0.02); box(body, 0.46, 0.34, 0.4, '#7b4bd6', 0, 0.25, 0); box(body, 0.5, 0.3, 0.1, '#5a2fb0', 0, 0.26, 0.22); box(body, 0.62, 0.5, 0.56, '#ff8a1f', 0, 0.68, 0); box(body, 0.08, 0.52, 0.58, '#e8701a', 0.17, 0.68, 0); box(body, 0.08, 0.52, 0.58, '#e8701a', -0.17, 0.68, 0); box(body, 0.13, 0.11, 0.03, '#ffe25a', 0.14, 0.76, -0.29, 1.4); box(body, 0.13, 0.11, 0.03, '#ffe25a', -0.14, 0.76, -0.29, 1.4); box(body, 0.28, 0.06, 0.03, '#ffe25a', 0, 0.58, -0.29, 1.4); box(body, 0.03, 0.1, 0.12, '#ffe25a', 0.315, 0.76, -0.12, 1.4); box(body, 0.03, 0.1, 0.12, '#ffe25a', -0.315, 0.76, -0.12, 1.4); box(body, 0.1, 0.16, 0.1, '#3f7a2f', 0, 1.0, 0); box(body, 0.18, 0.05, 0.1, '#5aa03f', 0.1, 1.05, 0); // reaper const reaper = new THREE.Group(); world.add(reaper); reaper.visible = false; box(reaper, 1.4, 1.5, 1.2, '#2b2240', 0, 0, 0); box(reaper, 1.0, 0.5, 1.0, '#2b2240', 0, 0.95, 0); for (let i = 0; i < 4; i++) box(reaper, 0.32, 0.3, 1.2, '#2b2240', -0.52 + i * 0.35, -0.85 - (i % 2) * 0.1, 0); box(reaper, 0.8, 0.6, 0.06, '#0b0814', 0, 0.5, 0.6); box(reaper, 0.16, 0.12, 0.04, '#7dffb0', 0.18, 0.55, 0.64, 2); box(reaper, 0.16, 0.12, 0.04, '#7dffb0', -0.18, 0.55, 0.64, 2); box(reaper, 0.1, 2.4, 0.1, '#6b4a2a', 0.9, 0.3, 0.3); box(reaper, 1.1, 0.14, 0.1, '#e0e0f0', 0.45, 1.45, 0.3, 0.3); // particles const PN = 120; const pMat = new THREE.MeshLambertMaterial({ color: '#ffffff' }); pMat.clippingPlanes = clipPlanes; const pmesh = new THREE.InstancedMesh(unit, pMat, PN); pmesh.frustumCulled = false; world.add(pmesh); const pp = new Float32Array(PN * 3), pv = new Float32Array(PN * 3), pl = new Float32Array(PN), ps = new Float32Array(PN); const dummy = new THREE.Object3D(); const tmpC = new THREE.Color(); let pIdx = 0; for (let i = 0; i < PN; i++) { dummy.scale.setScalar(0); dummy.updateMatrix(); pmesh.setMatrixAt(i, dummy.matrix); pmesh.setColorAt(i, tmpC.set('#ffffff')); } function burst(x, y, z, color, n, spd = 3, sz = 0.12) { for (let k = 0; k < n; k++) { const i = pIdx = (pIdx + 1) % PN; pp[i * 3] = x; pp[i * 3 + 1] = y; pp[i * 3 + 2] = z; const a = Math.random() * Math.PI * 2; pv[i * 3] = Math.cos(a) * spd * rnd(0.3, 1); pv[i * 3 + 1] = rnd(2, 5) * spd / 3; pv[i * 3 + 2] = Math.sin(a) * spd * rnd(0.3, 1); pl[i] = rnd(0.5, 0.9); ps[i] = sz * rnd(0.7, 1.3); pmesh.setColorAt(i, tmpC.set(color)); } pmesh.instanceColor.needsUpdate = true; } // wisps const WN = 140; const wGeo = new THREE.BufferGeometry(); const wPos = new Float32Array(WN * 3), wBase = new Float32Array(WN * 3); for (let i = 0; i < WN; i++) { wBase[i * 3] = rnd(-12, 12); wBase[i * 3 + 1] = rnd(0.3, 2.5); wBase[i * 3 + 2] = rnd(-16, 16); } wGeo.setAttribute('position', new THREE.BufferAttribute(wPos, 3)); const wMat = new THREE.PointsMaterial({ color: '#9dffcf', size: 0.09, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, depthWrite: false }); wMat.clippingPlanes = clipPlanes; const wisps = new THREE.Points(wGeo, wMat); wisps.frustumCulled = false; world.add(wisps); // lanes const lanes = new Map(); let genRow = 0, runType = 'grass', runLeft = 0, prevType = 'grass', lastRiverDir = 1; const W = 22; function pickType(row) { if (row <= 2) return 'grass'; if (runLeft > 0) { runLeft--; return runType; } if (prevType !== 'grass') { runType = 'grass'; runLeft = Math.random() < 0.6 ? 0 : 1; return 'grass'; } const r = Math.random(); if (r < 0.45) { runType = 'road'; runLeft = (Math.random() * 3) | 0; } else if (r < 0.75) { runType = 'river'; runLeft = (Math.random() * 2.5) | 0; } else { runType = 'bones'; runLeft = (Math.random() * 2) | 0; } return runType; } function spawnMovers(lane, n, maker, w, spd) { lane.speed = spd; const sp = W / n, off = Math.random() * sp; for (let i = 0; i < n; i++) { const { o, parts } = maker(); const x = -11 + off + i * sp + rnd(-0.3, 0.3) * (sp - w - 1.2); if (lane.type !== 'river' && lane.kind !== 'skull') o.rotation.y = lane.dir > 0 ? 0 : Math.PI; lane.g.add(o); lane.movers.push({ x, w, o, parts, ph: Math.random() * 10 }); } } function addLane(row) { const type = pickType(row); const g = new THREE.Group(); g.position.z = -row; world.add(g); const lane = { row, type, g, movers: [], blocked: new Set(), candy: null, candyX: 0, dir: Math.random() < 0.5 ? 1 : -1, speed: 0, kind: '' }; const diff = 1 + Math.min(Math.max(row, 0), 160) / 160 * 0.9; if (type === 'grass') { box(g, 30, 0.5, 1, row % 2 ? '#4a7a3d' : '#538640', 0, -0.25, 0); for (let i = 0; i < 6; i++) box(g, 0.2, 0.05, 0.2, Math.random() < 0.3 ? '#d9c8ff' : '#68a04a', rnd(-10, 10), 0.02, rnd(-0.4, 0.4)); let inner = 0; for (let x = -10; x <= 10; x++) { const out = Math.abs(x) > 4; let place; if (out) place = Math.random() < 0.72; else if (row <= -3) place = true; else if (row < 0) place = Math.random() < 0.25; else if (row <= 2) place = Math.abs(x) >= 3 && Math.random() < 0.2; else place = inner < 3 && Math.random() < params.density * 0.42; if (row === 0 && x === 0) place = false; if (place) { if (!out) inner++; lane.blocked.add(x); const o = makeProp(); o.position.x = x; g.add(o); } } if (row > 2 && Math.random() < 0.28) { const free = []; for (let x = -4; x <= 4; x++) if (!lane.blocked.has(x)) free.push(x); if (free.length) { lane.candyX = free[(Math.random() * free.length) | 0]; lane.candy = makeCandy(); lane.candy.position.x = lane.candyX; g.add(lane.candy); } } } else if (type === 'road' || type === 'bones') { const bones = type === 'bones'; box(g, 30, 0.5, 1, bones ? '#5b4636' : '#463a58', 0, -0.27, 0); if (!bones) { for (let x = -10; x <= 10; x += 2) box(g, 0.6, 0.02, 0.08, '#6a5c86', x, 0.0, 0.46); } else { for (let i = 0; i < 8; i++) box(g, 0.3, 0.06, 0.08, '#e6dcc2', rnd(-10, 10), 0.02, rnd(-0.4, 0.4)).rotation.y = rnd(0, 3); } if (bones) { lane.kind = 'skull'; spawnMovers(lane, 2 + ((Math.random() * 2) | 0), makeSkull, 0.85, rnd(2.4, 3.8) * diff); } else if (Math.random() < 0.35) { lane.kind = 'ghost'; spawnMovers(lane, 2 + ((Math.random() * 2) | 0), makeGhost, 0.75, rnd(1.8, 2.8) * diff); } else { lane.kind = 'zombie'; spawnMovers(lane, 3 + ((Math.random() * 2) | 0), makeZombie, 0.6, rnd(1.0, 2.0) * diff); } } else { lastRiverDir = -lastRiverDir; lane.dir = lastRiverDir; box(g, 30, 0.3, 1, '#2fbf8a', 0, -0.4, 0, 0.35); box(g, 30, 0.02, 0.1, '#7dffc4', 0, -0.24, -0.46, 0.6); lane.kind = 'coffin'; const w = Math.round(rnd(2, 3)); spawnMovers(lane, 3, () => makeCoffin(w), w, rnd(0.8, 1.5) * diff); } for (const m of lane.movers) m.o.position.x = m.x; lanes.set(row, lane); prevType = type; } // HUD const touchScreen = matchMedia('(pointer: coarse)').matches; const hud = document.createElement('div'); Object.assign(hud.style, { position: 'absolute', inset: '0', pointerEvents: 'none', fontFamily: 'monospace', color: '#fff', textShadow: '3px 3px 0 #15102a' }); hud.innerHTML = '

🍬 0

'; (canvas.parentElement || document.body).appendChild(hud); const elS = hud.querySelector('#cgS'), elC = hud.querySelector('#cgC'), elM = hud.querySelector('#cgM'); const hintText = () => inAR ? 'tap where you want to hop' : touchScreen ? 'tap to hop · swipe to turn' : 'arrows / WASD or click to hop'; let msgLines = [], msgSub = '', panelKey = ''; function setMsg(lines, sub) { msgLines = lines; msgSub = sub; elM.innerHTML = lines.join('
') + (sub ? '
' + sub + '' : ''); } function drawPanel() { const w = pc.width, h = pc.height; pg.clearRect(0, 0, w, h); pg.fillStyle = 'rgba(21,16,42,0.82)'; pg.beginPath(); pg.roundRect(8, 8, w - 16, h - 16, 48); pg.fill(); pg.strokeStyle = '#7dffb0'; pg.lineWidth = 6; pg.stroke(); pg.textBaseline = 'middle'; pg.font = 'bold 110px monospace'; pg.fillStyle = '#ffffff'; pg.textAlign = 'left'; pg.fillText(String(score), 50, 90); pg.font = 'bold 64px monospace'; pg.fillStyle = '#ff9ccf'; pg.textAlign = 'right'; pg.fillText('🍬 ' + candies, w - 50, 90); pg.textAlign = 'center'; pg.fillStyle = '#ffe25a'; const lines = msgLines.length ? msgLines : ['CROSSY GRAVE']; pg.font = 'bold 60px monospace'; lines.forEach((l, i) => pg.fillText(l, w / 2, 190 + i * 68)); if (msgSub) { pg.font = '40px monospace'; pg.fillStyle = '#c9b8ff'; pg.fillText(msgSub, w / 2, 190 + lines.length * 68); } ptex.needsUpdate = true; } // state let pcol = 0, prow = 0, best = 0, score = 0, candies = 0, dead = false, deadT = 0, cause = '', started = false; let hop = null, camRow = 0, creep = 0, music = null, reapT = 0; const camT = new THREE.Vector3(); function reset() { for (const l of lanes.values()) world.remove(l.g); lanes.clear(); genRow = -8; runType = 'grass'; runLeft = 0; prevType = 'grass'; while (genRow < 24) addLane(genRow++); pcol = 0; prow = 0; score = 0; candies = 0; dead = false; hop = null; started = false; reapT = 0; camRow = 0; creep = 0; root.position.set(0, 0, 0); root.rotation.y = 0; body.scale.set(1, 1, 1); body.position.y = 0; reaper.visible = false; root.visible = true; setMsg(['CROSSY GRAVE'], hintText()); camT.set(0, 0, 0); } function die(why) { if (dead) return; dead = true; deadT = 0; cause = why; if (why === 'squish') { play(S.squish, { volume: 0.9, rate: rnd(0.9, 1.1) }); burst(root.position.x, 0.5, root.position.z, '#ff8a1f', 18); burst(root.position.x, 0.5, root.position.z, '#7dffb0', 10); } else if (why === 'splash') { play(S.splash, { volume: 0.9 }); burst(root.position.x, 0.1, root.position.z, '#7dffc4', 24, 2.5); } else play(S.squish, { volume: 0.7, rate: 0.7 }); if (inAR && XR) for (const c of XR.controllers) if (c.connected && c.pulse) c.pulse(0.7, 90); best = Math.max(best, score); setTimeout(() => { if (dead) setMsg([why === 'reaper' ? 'THE REAPER GOT YOU' : 'RIP', 'score ' + score + ' · best ' + best], (inAR || touchScreen ? 'tap' : 'click or press space') + ' to rise again'); }, 500); } function tryMove(dx, dz) { if (!started) { started = true; setMsg([], ''); if (sfx && !music) music = sfx.loop(S.music, { volume: 0.3 }); } if (dead) { if (deadT > 0.7) reset(); return; } if (hop) return; const fromX = root.position.x; const tc = clamp(Math.round(fromX) + dx, -6, 6), tr = prow + dz; root.rotation.y = dz === 1 ? 0 : dz === -1 ? Math.PI : dx < 0 ? Math.PI / 2 : -Math.PI / 2; const tl = lanes.get(tr); if (!tl || (tl.type === 'grass' && tl.blocked.has(tc)) || tr < prow - 4) { body.scale.set(1.15, 0.8, 1.15); return; } hop = { t: 0, fx: fromX, fz: -prow, tx: tc, tz: -tr, tr, tc }; play(S.hop, { volume: rnd(0.45, 0.6), rate: rnd(0.9, 1.2) }); } function land() { pcol = hop.tc; prow = hop.tr; hop = null; score = Math.max(score, prow); const l = lanes.get(prow); if (l && l.candy && l.candyX === pcol) { l.g.remove(l.candy); l.candy = null; candies++; play(S.coin, { volume: 0.7, rate: rnd(0.95, 1.15) }); burst(pcol, 0.5, -prow, '#ff5fa2', 12, 2, 0.08); } body.scale.set(1.25, 0.7, 1.25); if (l && l.type === 'river' && !coffinUnder(l, root.position.x)) die('splash'); } function coffinUnder(l, x) { for (const m of l.movers) if (Math.abs(m.x - x) < m.w / 2 + 0.1) return m; return null; } // screen input let down = null; const onDown = (e) => { down = { x: e.clientX, y: e.clientY, id: e.pointerId }; }; const onUp = (e) => { if (inAR) return; if (!down || down.id !== e.pointerId) return; const dx = e.clientX - down.x, dy = e.clientY - down.y; down = null; if (Math.hypot(dx, dy) < 24) return tryMove(0, 1); if (Math.abs(dx) > Math.abs(dy)) tryMove(dx > 0 ? 1 : -1, 0); else tryMove(0, dy < 0 ? 1 : -1); }; const onKey = (e) => { const k = e.key.toLowerCase(); if (k === 'arrowup' || k === 'w' || k === ' ') tryMove(0, 1); else if (k === 'arrowdown' || k === 's') tryMove(0, -1); else if (k === 'arrowleft' || k === 'a') tryMove(-1, 0); else if (k === 'arrowright' || k === 'd') tryMove(1, 0); else return; e.preventDefault(); }; canvas.addEventListener('pointerdown', onDown); canvas.addEventListener('pointerup', onUp); canvas.addEventListener('pointercancel', () => { down = null; }); window.addEventListener('keydown', onKey); canvas.style.touchAction = 'none'; // AR const vA = new THREE.Vector3(), vB = new THREE.Vector3(), qA = new THREE.Quaternion(); const ray = new THREE.Ray(), boardPlane = new THREE.Plane(), up = new THREE.Vector3(0, 1, 0); function applyScale(s) { world.scale.setScalar(s); const sc = moon.shadow.camera; Object.assign(sc, { left: -14 * s, right: 14 * s, top: 14 * s, bottom: -14 * s, near: 1 * s, far: 45 * s }); sc.updateProjectionMatrix(); lantern.distance = 8 * s; lantern.intensity = 5 * s * s; wMat.size = 0.09 * s; renderer.localClippingEnabled = s < 1; frame.visible = panel.visible = s < 1; hemi.intensity = s < 1 ? 2.3 : 1.6; moon.shadow.mapSize.set(s < 1 ? 1024 : 2048, s < 1 ? 1024 : 2048); if (moon.shadow.map) { moon.shadow.map.dispose(); moon.shadow.map = null; } } applyScale(1); function faceViewer() { camera.getWorldPosition(vA); const dx = diorama.position.x - vA.x, dz = diorama.position.z - vA.z; if (dx * dx + dz * dz > 1e-6) diorama.rotation.set(0, Math.atan2(-dx, -dz), 0); } function placeInFront() { camera.getWorldPosition(vA); camera.getWorldDirection(vB); vB.y = 0; if (vB.lengthSq() < 1e-6) vB.set(0, 0, -1); vB.normalize(); diorama.position.set(vA.x + vB.x * 0.75, vA.y - 0.45, vA.z + vB.z * 0.75); faceViewer(); if (XR.pin) XR.pin(diorama); } function placeAt(p) { if (XR.unpin) XR.unpin(diorama); diorama.position.copy(p); diorama.position.y += 0.002; faceViewer(); if (XR.pin) XR.pin(diorama); } function trySurface() { if (!inAR || placedOnSurface || !XR.surface) return; camera.getWorldPosition(vA); const s = XR.surface('table') || XR.surface((x) => x.orientation === 'horizontal' && x.center && x.center.y < vA.y - 0.35 && x.center.y > vA.y - 1.3 && x.label !== 'floor'); if (s && s.center) { placedOnSurface = true; placeAt(s.center); } } const offs = []; const stickLatch = new Map(); if (XR && XR.on) { offs.push(XR.on('enter', ({ mode }) => { if (mode && mode !== 'ar') return; inAR = true; placedOnSurface = false; applyScale(AR_S); placeInFront(); trySurface(); if (!started && !dead) setMsg(['CROSSY GRAVE'], hintText()); })); offs.push(XR.on('exit', () => { if (!inAR) return; inAR = false; if (XR.unpin) XR.unpin(diorama); diorama.position.set(0, 0, 0); diorama.rotation.set(0, 0, 0); world.position.set(0, 0, 0); applyScale(1); if (!started && !dead) setMsg(['CROSSY GRAVE'], hintText()); })); offs.push(XR.on('surfaces', trySurface)); offs.push(XR.on('squeeze', ({ controller }) => { if (inAR && controller && controller.surface) { placedOnSurface = true; placeAt(controller.surface.point.clone()); } })); offs.push(XR.on('select', ({ controller }) => { if (!inAR) return; if (!started || dead || !controller || !controller.ray) return tryMove(0, 1); controller.ray.getWorldPosition(vA); controller.ray.getWorldQuaternion(qA); vB.set(0, 0, -1).applyQuaternion(qA); ray.set(vA, vB); boardPlane.setFromNormalAndCoplanarPoint(up, diorama.position); const hit = ray.intersectPlane(boardPlane, vA); if (!hit) return tryMove(0, 1); world.worldToLocal(vA); const dx = vA.x - root.position.x, dz = vA.z - root.position.z; if (Math.hypot(dx, dz) < 0.6) return tryMove(0, 1); if (Math.abs(dz) >= Math.abs(dx)) tryMove(0, dz < 0 ? 1 : -1); else tryMove(dx > 0 ? 1 : -1, 0); })); } gui.add(params, 'traffic', 0.4, 2).name('Undead Speed'); gui.add(params, 'density', 0, 1).name('Grave Density'); gui.add(params, 'fog', 0, 0.08).name('Fog'); gui.addColor(params, 'moon').name('Moonlight').onChange((v) => moon.color.set(v)); gui.add(params, 'volume', 0, 1).name('Sound'); gui.add(params, 'restart').name('Restart'); reset(); const one = new THREE.Vector3(1, 1, 1); return { update({ time, delta }) { const dt = Math.min(delta, 0.05); if (sfx) sfx.volume = params.volume; scene.fog.density = params.fog; // thumbsticks in AR if (inAR && XR) { for (const c of XR.controllers) { if (!c.connected || !c.stick) continue; const sx = c.stick.x || 0, sy = c.stick.y || 0, mag = Math.hypot(sx, sy); const latched = stickLatch.get(c); if (mag > 0.65 && !latched) { stickLatch.set(c, true); if (Math.abs(sy) >= Math.abs(sx)) tryMove(0, sy > 0 ? 1 : -1); else tryMove(sx > 0 ? 1 : -1, 0); } else if (mag < 0.3) stickLatch.set(c, false); } } // lanes while (genRow < prow + 24) addLane(genRow++); for (const [r, l] of lanes) if (r < prow - 10) { world.remove(l.g); lanes.delete(r); } for (const l of lanes.values()) { const v = l.dir * l.speed * params.traffic; for (const m of l.movers) { m.x += v * dt; if (m.x > 13) m.x -= 26; else if (m.x < -13) m.x += 26; m.o.position.x = m.x; const ph = time * 8 + m.ph; if (l.kind === 'zombie') { m.parts.hips[0].rotation.z = Math.sin(ph) * 0.5; m.parts.hips[1].rotation.z = -Math.sin(ph) * 0.5; m.parts.arms[0].rotation.y = Math.sin(ph * 0.5) * 0.15; m.parts.torso.rotation.x = Math.sin(ph * 0.5) * 0.08; m.o.position.y = Math.abs(Math.sin(ph)) * 0.05; } else if (l.kind === 'ghost') { m.parts.inner.position.y = Math.sin(time * 3 + m.ph) * 0.15; m.parts.inner.rotation.x = Math.sin(time * 2 + m.ph) * 0.1; } else if (l.kind === 'skull') { m.parts.roll.rotation.z -= v * dt / 0.42; m.o.position.y = Math.abs(Math.sin(ph * 0.7)) * 0.12; } else if (l.kind === 'coffin') m.o.position.y = Math.sin(time * 2 + m.ph) * 0.04; } if (l.candy) { l.candy.userData.spin.rotation.y = time * 2; l.candy.userData.spin.position.y = 0.4 + Math.sin(time * 3 + l.row) * 0.08; } } // player if (!dead) { if (hop) { hop.t += dt / 0.14; const t = Math.min(hop.t, 1); root.position.x = hop.fx + (hop.tx - hop.fx) * t; root.position.z = hop.fz + (hop.tz - hop.fz) * t; body.position.y = Math.sin(t * Math.PI) * 0.45; if (hop.t >= 1) land(); } else { const l = lanes.get(prow); if (l && l.type === 'river') { const c = coffinUnder(l, root.position.x); if (c) { root.position.x += l.dir * l.speed * params.traffic * dt; body.position.y = c.o.position.y + 0.05; } if (Math.abs(root.position.x) > 7) die('splash'); } } body.scale.lerp(one, 1 - Math.exp(-14 * dt)); const rl = lanes.get(hop ? (hop.t > 0.5 ? hop.tr : Math.round(-root.position.z)) : prow); if (rl && (rl.type === 'road' || rl.type === 'bones') && body.position.y < 0.3) { for (const m of rl.movers) if (Math.abs(m.x - root.position.x) < m.w / 2 + 0.25) { die('squish'); break; } } if (started) creep += dt * (0.3 + Math.min(score, 100) * 0.004); creep = Math.max(creep, prow - 3); if (prow < creep - 4 && !dead) { die('reaper'); reapT = 0; reaper.visible = true; } } else { deadT += dt; if (cause === 'squish') { body.scale.set(1.5, 0.12, 1.5); body.position.y = 0.02; } else if (cause === 'splash') { body.position.y -= dt * 1.5; root.visible = deadT < 0.6; } else if (cause === 'reaper') { reapT += dt; const t = Math.min(reapT / 0.6, 1); reaper.position.set(root.position.x, 6 - 4.8 * t + Math.max(0, reapT - 0.8) * 9, root.position.z + 3 - 3 * t); if (reapT > 0.6) { root.position.y = reaper.position.y - 1.5; } } } // camera / board follow camRow += (Math.max(prow, creep) - camRow) * (1 - Math.exp(-3 * dt)); const asp = size.width / Math.max(1, size.height); const portrait = asp < 1; const followX = portrait ? clamp(root.position.x, -6, 6) * 0.9 : clamp(root.position.x, -3, 3) * 0.6; camT.x += (followX - camT.x) * (1 - Math.exp(-(portrait ? 5 : 3) * dt)); camT.z = -camRow - (portrait ? 1.0 : 1.5); if (inAR) { world.position.set(0, 0, (camRow + 4) * AR_S); diorama.updateMatrixWorld(true); for (let i = 0; i < 4; i++) clipPlanes[i].copy(localPlanes[i]).applyMatrix4(diorama.matrixWorld); } else { const dist = portrait ? 0.82 + 0.18 * Math.max(asp, 0.45) : 1; camera.position.set(camT.x + 3.2 * dist, 10 * dist, camT.z + 7.5 * dist); camera.lookAt(camT.x, 0, camT.z - 0.5); } moon.position.set(camT.x - 6, 14, camT.z + 6); moon.target.position.set(camT.x, 0, camT.z - 2); lantern.position.set(root.position.x, 1.5, root.position.z + 0.3); // particles for (let i = 0; i < PN; i++) { if (pl[i] > 0) { pl[i] -= dt; pv[i * 3 + 1] -= 9 * dt; pp[i * 3] += pv[i * 3] * dt; pp[i * 3 + 1] = Math.max(0.02, pp[i * 3 + 1] + pv[i * 3 + 1] * dt); pp[i * 3 + 2] += pv[i * 3 + 2] * dt; dummy.position.set(pp[i * 3], pp[i * 3 + 1], pp[i * 3 + 2]); dummy.scale.setScalar(ps[i] * Math.min(1, pl[i] * 3)); } else dummy.scale.setScalar(0); dummy.updateMatrix(); pmesh.setMatrixAt(i, dummy.matrix); } pmesh.instanceMatrix.needsUpdate = true; // wisps for (let i = 0; i < WN; i++) { const bx = wBase[i * 3], by = wBase[i * 3 + 1], bz = wBase[i * 3 + 2]; let z = bz + camT.z; z = camT.z - 16 + ((((z - camT.z + 16) % 32) + 32) % 32); wPos[i * 3] = bx + camT.x + Math.sin(time * 0.4 + i) * 0.5; wPos[i * 3 + 1] = by + Math.sin(time * 0.8 + i * 1.7) * 0.3; wPos[i * 3 + 2] = z + Math.cos(time * 0.3 + i) * 0.4; } wGeo.attributes.position.needsUpdate = true; elS.textContent = score; elC.textContent = '🍬 ' + candies; if (inAR) { const key = score + '|' + candies + '|' + msgLines.join('/') + '|' + msgSub; if (key !== panelKey) { panelKey = key; drawPanel(); } } }, dispose() { canvas.removeEventListener('pointerdown', onDown); canvas.removeEventListener('pointerup', onUp); window.removeEventListener('keydown', onKey); for (const f of offs) if (typeof f === 'function') f(); hud.remove(); if (music) music.stop(); renderer.localClippingEnabled = false; }, }; }