@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/crossy-road/CrossyRoadRules.ts

@@ -0,0 +1,99 @@
+// Crossy Road's rules, with no React or engine: the fixed board (its lanes and the traffic on each road),
+// the traffic's motion (wrapping round the full width), forgiving swept hop hitboxes, and progress.
+import { CAR_SPEED_MAX, CAR_SPEED_MIN, COLORS, COLS, colX, GOAL_ROW, LANE_TYPES, type Layout, speedScale } from './CrossyRoadConstants';
+import type { VehicleStyle } from './CrossyRoadMeshes';
+
+export type Vehicle = { id: number; row: number; x: number; width: number; speed: number; colorIndex: number; style: VehicleStyle };
+
+const rnd = (min: number, max: number) => min + Math.random() * (max - min);
+
+/** Every road's traffic: one bus (sometimes two) or two cars (sometimes three), evenly spaced, all one way. */
+export function buildTraffic(l: Layout, firstId = 0): Vehicle[] {
+  const out: Vehicle[] = [];
+  let id = firstId;
+  let paints: number[] = [];
+  let lastPaint = -1;
+  const nextPaint = () => {
+    if (!paints.length) {
+      paints = COLORS.CAR_COLORS.map((_, index) => index);
+      for (let i = paints.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [paints[i], paints[j]] = [paints[j]!, paints[i]!];
+      }
+      if (paints[paints.length - 1] === lastPaint) [paints[0], paints[paints.length - 1]] = [paints[paints.length - 1]!, paints[0]!];
+    }
+    lastPaint = paints.pop()!;
+    return lastPaint;
+  };
+  LANE_TYPES.forEach((type, row) => {
+    if (type !== 'road') return;
+    const dir = Math.random() < 0.5 ? 1 : -1;
+    const bus = Math.random() < 0.35;
+    const style: VehicleStyle = bus ? 'bus' : (['compact', 'taxi', 'pickup'] as const)[Math.floor(Math.random() * 3)]!;
+    const speed = rnd(CAR_SPEED_MIN, CAR_SPEED_MAX) * (bus ? 0.8 : 1) * dir;
+    const count = (bus ? 1 : 2) + (Math.random() < 0.3 ? 1 : 0);
+    const width = l.tile * { compact: 1.4, taxi: 1.5, pickup: 1.7, bus: 2.4 }[style];
+    const spacing = l.width / count + width;
+    const startOffset = rnd(0, spacing);
+    for (let i = 0; i < count; i++) out.push({ id: id++, row, x: -width + startOffset + i * spacing, width, speed, colorIndex: nextPaint(), style });
+  });
+  return out;
+}
+
+/** One 60 Hz frame of traffic, wrapping off one side onto the other. */
+export function moveTraffic(l: Layout, vs: Vehicle[], scale: number) {
+  const pad = l.tile * 2;
+  for (const v of vs) {
+    let x = v.x + v.speed * scale;
+    const margin = v.width + pad;
+    if (v.speed > 0 && x - v.width / 2 > l.width + margin) x = -margin - v.width / 2;
+    else if (v.speed < 0 && x + v.width / 2 < -margin) x = l.width + margin + v.width / 2;
+    v.x = x;
+  }
+}
+
+/** Whether traffic overlaps the pedestrian, including fractional rows while a step is in progress. */
+export function hit(l: Layout, vs: Vehicle[], row: number, x: number) {
+  const half = l.tile * 0.4 * 0.65;
+  return vs.some((v) => Math.abs(v.row - row) * l.laneH < l.tile * 0.53 && Math.abs(v.x - x) < v.width / 2 + half);
+}
+
+/** The player: its lane and column, the furthest lane it's reached, and the roads crossed. */
+export type Player = { row: number; col: number; maxRow: number; crossings: number };
+export const startPlayer = (): Player => ({ row: 0, col: Math.floor(COLS / 2), maxRow: 0, crossings: 0 });
+
+/** A hop's outcome: whether it moved, whether it crossed a road, whether it reached the goal. */
+export type Hop = { moved: boolean; crossed: boolean; goal: boolean };
+const NO_HOP: Hop = { moved: false, crossed: false, goal: false };
+
+export function hopForward(p: Player): Hop {
+  const prev = p.row;
+  const row = Math.min(prev + 1, GOAL_ROW);
+  if (row === prev) return NO_HOP;
+  p.row = row;
+  let crossed = false;
+  if (row > p.maxRow) {
+    p.maxRow = row;
+    if (LANE_TYPES[prev] === 'road') {
+      p.crossings++;
+      crossed = true;
+    }
+  }
+  return { moved: true, crossed, goal: row === GOAL_ROW };
+}
+
+export function hopBack(p: Player): Hop {
+  if (p.row <= 0) return NO_HOP;
+  p.row -= 1;
+  return { moved: true, crossed: false, goal: false };
+}
+
+export function hopSide(p: Player, dir: -1 | 1): Hop {
+  const col = p.col + dir;
+  if (col < 0 || col >= COLS) return NO_HOP;
+  p.col = col;
+  return { moved: true, crossed: false, goal: false };
+}
+
+export const playerX = (l: Layout, p: Player) => colX(l, p.col);
+export const scaleFor = (p: Player) => speedScale(p.crossings);

package/src/games/crossy-road/CrossyRoadScene.ts

@@ -0,0 +1,355 @@
+import { type Color, effects, type Entity, type Quat, quat, type Vec3, type World } from '@nayan-ui/engine';
+// Crossy Road's own low-poly world: blocky vehicles, faceted trees, bright grass and clean asphalt.
+// Everything is code-built and cached; the scene has no racing-game models or texture downloads.
+// The rules use points; a shared root scales them into compact world units for the camera.
+import { toColor } from '../shared/EngineUtils';
+import { COLORS, COLS, colX, LANE_TYPES, type Layout, MOVE_TIME, PERSON, TOTAL_LANES, WORLD_SCALE } from './CrossyRoadConstants';
+import type { CrossyMeshes } from './CrossyRoadMeshes';
+import { pedestrianMeshes } from './CrossyRoadPerson';
+import type { Vehicle } from './CrossyRoadRules';
+
+const GROUND_DEPTH = 8;
+const ROAD_DROP = 1.6; // roads sit this far below the grass
+const FACE_RIGHT: Quat = [0, 0, 0, 1];
+const FACE_LEFT = quat.z(Math.PI);
+const STAND_UP = quat.x(Math.PI / 2); // a y-up model stood up off the board (z up)
+const k = WORLD_SCALE;
+/** A point in the scene (view points) as a world point, for bursts (which are in world space). */
+const world3 = (p: Vec3): Vec3 => [p[0] * k, p[1] * k, p[2] * k];
+
+/** A deterministic pseudo-random number in [0, 1) (decorations never shift between builds), as the original board's. */
+const seeded = (n: number) => {
+  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+
+/** A color, a little lighter or darker (the night's moonlight dims the whole scene). */
+const shade = (css: string, _night: boolean, f = 1): Color => {
+  const [r, g, b, a] = toColor(css);
+  return [r * f, g * f, b * f, a ?? 1];
+};
+
+/** A lane's centre (world y) and its surface height. */
+export const laneY = (l: Layout, row: number) => (row - (TOTAL_LANES - 1) / 2) * l.laneH;
+export const laneTop = (row: number) => (LANE_TYPES[Math.round(row)] === 'road' ? -ROAD_DROP : 0);
+/** A view x on the board as world x. */
+export const worldX = (l: Layout, x: number) => x - l.width / 2;
+
+export type Scene = {
+  /** Everything hangs off this root, scaled to the world. */
+  root: Entity;
+  ground: Entity[];
+  vehicles: Map<number, Entity>;
+  player: { root: Entity; body: Entity; arms: [Entity, Entity]; legs: [Entity, Entity]; feet: [Entity, Entity] };
+  night: boolean;
+};
+
+// ── The ground ────────────────────────────────────────────────────────
+
+function spawnGround(world: World, l: Layout, a: CrossyMeshes, night: boolean, root: Entity): Entity[] {
+  const out: Entity[] = [];
+  const add = (o: Parameters<World['spawn']>[0]) => out.push(world.spawn({ pickable: false, parent: root, ...o }));
+  // Wider than the view ever shows, past where the traffic wraps round
+  const cols = Math.ceil((l.width + l.tile * 12) / l.tile / 2) * 2;
+  const span = cols * l.tile;
+  const boardH = TOTAL_LANES * l.laneH;
+  // Grass all round the board, its top below the sunken roads (so it never covers them)
+  add({
+    mesh: 'cube',
+    position: [0, 0, -ROAD_DROP - 0.6 - GROUND_DEPTH / 2],
+    scale: [span * 3, boardH * 4, GROUND_DEPTH],
+    color: shade(COLORS.GRASS_DARK, night, 0.9)
+  });
+  const xAt = (c: number) => -span / 2 + c * l.tile + l.tile / 2;
+  for (let row = 0; row < TOTAL_LANES; row++) {
+    const y = laneY(l, row);
+    if (LANE_TYPES[row] === 'road') {
+      // Broad asphalt panels, with subtle color variation instead of image textures
+      for (let c = 0; c < cols; c += 2)
+        add({
+          mesh: 'cube',
+          position: [xAt(c) + l.tile / 2, y, -ROAD_DROP - GROUND_DEPTH / 2],
+          scale: [l.tile * 2 + 0.2, l.laneH, GROUND_DEPTH],
+          color: shade(COLORS.ROAD, night, 0.96 + seeded(row * 3.1 + c) * 0.06)
+        });
+      // Solid white edge lines, and the dashed centre line
+      for (const e of [-1, 1])
+        add({
+          mesh: 'cube',
+          position: [0, y + e * (l.laneH / 2 - 3), -ROAD_DROP + 0.05],
+          scale: [span, 1.6, 0.1],
+          color: shade(COLORS.LINE, night, 0.9)
+        });
+      for (let c = 0; c < cols; c++)
+        add({ mesh: 'cube', position: [xAt(c), y, -ROAD_DROP + 0.06], scale: [l.tile * 0.45, 1.8, 0.12], color: shade(COLORS.LINE, night, 0.85) });
+      // Concrete curbs where it meets grass, standing a little proud of the grass
+      for (const e of [-1, 1]) {
+        if (LANE_TYPES[row + e] !== 'grass') continue;
+        add({
+          mesh: 'cube',
+          position: [0, y + e * (l.laneH / 2 - 0.4), (0.9 - ROAD_DROP) / 2],
+          scale: [span, 3.6, ROAD_DROP + 0.9],
+          color: shade(COLORS.CURB, night)
+        });
+      }
+      continue;
+    }
+    // Grass, two tiles at a time, the lanes in two shades and a little variation along them
+    const base = row % 2 === 0 ? COLORS.GRASS_LIGHT : COLORS.GRASS_DARK;
+    for (let c = 0; c < cols; c += 2)
+      add({
+        mesh: 'cube',
+        position: [xAt(c) + l.tile / 2, y, -GROUND_DEPTH / 2],
+        scale: [l.tile * 2 + 0.2, l.laneH, GROUND_DEPTH],
+        color: shade(base, night, 0.95 + seeded(row * 7.7 + c * 1.3) * 0.12)
+      });
+    // Stepping stones identify safe lanes; the checkered strip marks the finish.
+    for (let col = 0; col < COLS; col++)
+      add({
+        mesh: 'cube',
+        position: [worldX(l, colX(l, col)), y, 0.08],
+        scale: [l.tile * 0.42, l.laneH * 0.34, 0.16],
+        color: shade('#C8DF99', night, 0.94)
+      });
+    if (row === TOTAL_LANES - 1) {
+      for (let col = 0; col < COLS * 2; col++)
+        for (let stripe = 0; stripe < 2; stripe++)
+          add({
+            mesh: 'cube',
+            position: [-l.gridW / 2 + ((col + 0.5) * l.tile) / 2, y - l.laneH * 0.36 + stripe * l.laneH * 0.12, 0.15],
+            scale: [l.tile / 2, l.laneH * 0.12, 0.2],
+            color: shade((col + stripe) % 2 ? '#F8F6E9' : '#34434A', night)
+          });
+    }
+    // Street lamps stay outside the playable columns.
+    for (const side of [-1, 1]) {
+      const x = side * (l.gridW / 2 + l.tile * 0.85);
+      const post = l.tile * 0.075;
+      add({ mesh: 'cube', position: [x, y, l.tile * 0.65], scale: [post, post, l.tile * 1.3], color: shade('#56676A', night) });
+      add({
+        mesh: 'cube',
+        position: [x, y, l.tile * 1.33],
+        scale: [l.tile * 0.26, l.tile * 0.26, l.tile * 0.13],
+        color: night ? [2, 1.65, 0.9, 1] : [0.98, 0.92, 0.71, 1]
+      });
+      add({ mesh: 'cube', position: [x, y, l.tile * 1.44], scale: [l.tile * 0.34, l.tile * 0.34, l.tile * 0.08], color: shade('#45565A', night) });
+    }
+    for (let c = 0; c < cols; c++) {
+      const x = xAt(c);
+      const offGrid = Math.abs(x) > l.gridW / 2 + l.tile * 0.2;
+      // Pine trees (and now and then a bush or a rock) off the player's columns
+      if (offGrid && seeded(row * 5.3 + c * 1.7) > 0.4) {
+        const pick = seeded(row * 2.9 + c * 4.1);
+        const jx = (seeded(c * 3 + row) - 0.5) * l.tile * 0.3;
+        const jy = (seeded(row * 5 + c) - 0.5) * l.laneH * 0.3;
+        if (pick < 0.7) {
+          add({
+            mesh: a.tree,
+            position: [x + jx, y + jy, 0],
+            rotation: quat.z((seeded(c + row * 9) * Math.PI) / 2),
+            scale: l.tile * (0.95 + seeded(row + c * 2.1) * 0.45),
+            color: shade('#FFFFFF', night, 0.9 + seeded(c + row) * 0.15)
+          });
+        } else if (pick < 0.88) {
+          add({ mesh: a.bush, position: [x + jx, y + jy, 0], scale: l.tile * 0.85, color: shade(COLORS.BUSH, night) });
+        } else {
+          add({
+            mesh: a.rock,
+            position: [x + jx, y + jy, 0],
+            rotation: quat.z(seeded(row + c * 7) * 3),
+            scale: [l.tile * 0.7, l.tile * 0.5, l.tile * 0.75],
+            color: shade(COLORS.ROCK, night, 0.85 + seeded(c * 5 + row) * 0.2)
+          });
+        }
+        continue;
+      }
+      if (seeded(row * 13.1 + c * 3.7) > 0.62) {
+        const t = l.tile * 0.14;
+        add({
+          mesh: 'cone',
+          position: [x + (seeded(c * 2 + row) - 0.5) * l.tile * 0.3, y + (seeded(row + c) - 0.5) * l.laneH * 0.5, t / 2],
+          rotation: STAND_UP,
+          scale: [t, t, t],
+          color: shade(COLORS.GRASS_TUFT, night)
+        });
+      }
+      if (seeded(row * 7.3 + c * 9.1 + 5) > 0.9) {
+        const petal = COLORS.FLOWERS[Math.floor(seeded(row + c * 2) * COLORS.FLOWERS.length)]!;
+        const fx = x + (seeded(row + c * 3) - 0.5) * l.tile * 0.2;
+        const fy = y + (seeded(row * 2 + c) - 0.5) * l.laneH * 0.5;
+        add({ mesh: 'sphere', position: [fx, fy, 1.5], scale: 4.6, color: shade(petal, night) });
+        add({ mesh: 'sphere', position: [fx, fy, 2.6], scale: 2.4, color: shade('#FFD93D', night) });
+      }
+    }
+  }
+  return out;
+}
+
+// ── Vehicles ──────────────────────────────────────────────────────────
+
+/** Each vehicle is just a root and three instanced meshes: paint, fixed trim, and lamps. */
+function spawnVehicle(world: World, l: Layout, a: CrossyMeshes, v: Vehicle, night: boolean, parent: Entity): Entity {
+  const root = world.spawn({
+    mesh: 'none',
+    parent,
+    rotation: v.speed >= 0 ? FACE_RIGHT : FACE_LEFT,
+    scale: [v.width, l.tile * 0.66, l.tile],
+    pickable: false
+  });
+  const meshes = a.vehicles[v.style];
+  const color = toColor(COLORS.CAR_COLORS[v.colorIndex] ?? COLORS.CAR_COLORS[0]);
+  world.spawn({ mesh: meshes.body, parent: root, color, pickable: false });
+  world.spawn({ mesh: meshes.details, parent: root, pickable: false });
+  world.spawn({ mesh: meshes.lights, parent: root, color: night ? [1.8, 1.8, 1.8, 1] : [1, 1, 1, 1], pickable: false });
+  return root;
+}
+
+/** Keeps every vehicle where the rules have it. */
+export function placeVehicles(world: World, l: Layout, s: Scene, vs: Vehicle[]) {
+  const updates = world.transforms;
+  for (const v of vs) {
+    const e = s.vehicles.get(v.id);
+    if (e != null) updates.position(e, worldX(l, v.x), laneY(l, v.row), laneTop(v.row));
+  }
+  updates.flush();
+}
+
+// ── The pedestrian ────────────────────────────────────────────────────
+
+function spawnPlayer(world: World, l: Layout, parent: Entity): Scene['player'] {
+  const root = world.spawn({ mesh: 'none', parent, pickable: false });
+  const body = world.spawn({ mesh: 'none', parent: root, pickable: false });
+  const visual = world.spawn({ mesh: 'none', parent: body, scale: l.tile * PERSON.SCALE, pickable: false });
+  const meshes = pedestrianMeshes();
+  world.spawn({ mesh: meshes.torso, parent: visual, pickable: false });
+  const arms = [-1, 1].map((side) => world.spawn({ mesh: meshes.arm, parent: visual, position: [side * 0.235, 0, 1.4], pickable: false })) as [
+    Entity,
+    Entity
+  ];
+  const legs = [-1, 1].map((side) => world.spawn({ mesh: meshes.leg, parent: visual, position: [side * 0.105, 0, 0.87], pickable: false })) as [
+    Entity,
+    Entity
+  ];
+  const feet = legs.map((leg) => world.spawn({ mesh: meshes.shoe, parent: leg, position: [0, -0.01, -0.72], pickable: false })) as [Entity, Entity];
+  return { root, body, arms, legs, feet };
+}
+
+function restLimbs(world: World, player: Scene['player']) {
+  for (const joint of [...player.arms, ...player.legs, ...player.feet]) {
+    world.stopAnimation(joint);
+    world.set(joint, { rotation: FACE_RIGHT });
+  }
+  player.legs.forEach((leg, i) => world.set(leg, { position: [(i === 0 ? -1 : 1) * 0.105, 0, 0.87] }));
+}
+
+/** The pedestrian on a lane and column, at once (a new board). */
+export function placePlayer(world: World, l: Layout, s: Scene, row: number, col: number) {
+  world.stopAnimation(s.player.root);
+  world.stopAnimation(s.player.body);
+  restLimbs(world, s.player);
+  world.set(s.player.root, { position: [worldX(l, colX(l, col)), laneY(l, row), laneTop(row)], rotation: FACE_RIGHT });
+  world.set(s.player.body, { scale: 1, rotation: [0, 0, 0, 1], position: [0, 0, 0] });
+}
+
+/** Grounded translation with alternating strides. Ankles counter-rotate so shoes stay level. */
+export function hop(world: World, l: Layout, s: Scene, from: [number, number], to: [number, number], facing: 'up' | 'down' | 'left' | 'right') {
+  const a: Vec3 = [worldX(l, colX(l, from[1])), laneY(l, from[0]), laneTop(from[0])];
+  const b: Vec3 = [worldX(l, colX(l, to[1])), laneY(l, to[0]), laneTop(to[0])];
+  const turn = { up: 0, down: Math.PI, left: Math.PI / 2, right: -Math.PI / 2 }[facing];
+  world.stopAnimation(s.player.root);
+  world.set(s.player.root, { position: a, rotation: quat.z(turn) });
+  world.animate(s.player.root, { position: b }, { duration: MOVE_TIME, easing: 'linear' });
+  const timing = { duration: MOVE_TIME, easing: 'linear' as const };
+  s.player.legs.forEach((leg, i) => {
+    const angle = PERSON.STRIDE * (i === 0 ? 1 : -1);
+    const x = (i === 0 ? -1 : 1) * 0.105;
+    const base: Vec3 = [x, 0, 0.87];
+    world.animate(
+      leg,
+      [
+        { rotation: quat.x(angle), position: [x, 0, 0.87 + (angle > 0 ? 0.12 : 0)], at: 0.25 },
+        { rotation: FACE_RIGHT, position: base, at: 0.5 },
+        { rotation: quat.x(-angle), position: [x, 0, 0.87 + (angle < 0 ? 0.12 : 0)], at: 0.75 },
+        { rotation: FACE_RIGHT, position: base }
+      ],
+      timing
+    );
+    world.animate(
+      s.player.feet[i]!,
+      [{ rotation: quat.x(-angle), at: 0.25 }, { rotation: FACE_RIGHT, at: 0.5 }, { rotation: quat.x(angle), at: 0.75 }, { rotation: FACE_RIGHT }],
+      timing
+    );
+  });
+  s.player.arms.forEach((arm, i) => {
+    const angle = -PERSON.STRIDE * (i === 0 ? 1 : -1) * 0.8;
+    world.animate(
+      arm,
+      [{ rotation: quat.x(angle), at: 0.25 }, { rotation: FACE_RIGHT, at: 0.5 }, { rotation: quat.x(-angle), at: 0.75 }, { rotation: FACE_RIGHT }],
+      timing
+    );
+  });
+  // Lower the hips as the stance leg extends, keeping its foot on the ground instead of bouncing up.
+  const drop = 0.72 * (1 - Math.cos(PERSON.STRIDE)) * l.tile * PERSON.SCALE;
+  world.animate(
+    s.player.body,
+    [{ position: [0, 0, -drop], at: 0.25 }, { position: [0, 0, 0], at: 0.5 }, { position: [0, 0, -drop], at: 0.75 }, { position: [0, 0, 0] }],
+    timing
+  );
+}
+
+/** Run over: a non-graphic stumble and a small puff of road dust. */
+export function stumble(world: World, l: Layout, s: Scene, row: number, col: number) {
+  restLimbs(world, s.player);
+  world.animate(s.player.body, { rotation: quat.x(1.25), position: [0, 0, l.tile * 0.05] }, { duration: 0.24, easing: 'easeOut' });
+  effects.shatter(world, {
+    position: world3([worldX(l, colX(l, col)), laneY(l, row), laneTop(row) + l.tile * 0.3]),
+    count: 10,
+    size: l.tile * 0.08 * k,
+    speed: l.tile * 3 * k,
+    lifetime: 0.6,
+    gravity: -l.tile * 6 * k,
+    colors: [toColor(COLORS.ROAD_LINE), toColor(COLORS.CURB)]
+  });
+}
+
+/** Made it across: a wave and confetti, standing on the finish lane. */
+export function celebrate(world: World, l: Layout, s: Scene, row: number, col: number) {
+  const p: Vec3 = [worldX(l, colX(l, col)), laneY(l, row), laneTop(row)];
+  restLimbs(world, s.player);
+  world.animate(s.player.arms[0], [{ rotation: quat.x(-2.5), at: 0.3 }, { rotation: quat.x(-2), at: 0.65 }, { rotation: FACE_RIGHT }], {
+    duration: 0.96
+  });
+  world.set(s.player.root, { position: p });
+  world.set(s.player.body, { position: [0, 0, 0] });
+  effects.confetti(world, {
+    position: world3([p[0], p[1], l.tile]),
+    count: 50,
+    size: l.tile * 0.12 * k,
+    speed: l.tile * 6 * k,
+    lifetime: 1.2,
+    gravity: -l.tile * 10 * k,
+    colors: COLORS.CAR_COLORS.slice(0, 4).map((c) => toColor(c))
+  });
+}
+
+// ── The whole scene ───────────────────────────────────────────────────
+
+export function buildScene(world: World, l: Layout, a: CrossyMeshes, night: boolean, vs: Vehicle[]): Scene {
+  const root = world.spawn({ mesh: 'none', scale: k, pickable: false });
+  const s: Scene = { root, ground: spawnGround(world, l, a, night, root), vehicles: new Map(), player: spawnPlayer(world, l, root), night };
+  setTraffic(world, l, a, s, vs);
+  return s;
+}
+
+/** Replaces the traffic with a new board's (its vehicles are new ones, so recolored and resized). */
+export function setTraffic(world: World, l: Layout, a: CrossyMeshes, s: Scene, vs: Vehicle[]) {
+  for (const e of s.vehicles.values()) world.despawn(e);
+  s.vehicles.clear();
+  for (const v of vs) s.vehicles.set(v.id, spawnVehicle(world, l, a, v, s.night, s.root));
+  placeVehicles(world, l, s, vs);
+}
+
+/** Everything goes with the root. */
+export function removeScene(world: World, s: Scene) {
+  world.despawn(s.root);
+}

package/src/games/dino-jump/DinoJump.tsx

@@ -0,0 +1,77 @@
+// Dino Jump's screen, on the Nayan engine: a 3D dino running across a 3D desert seen through a low
+// perspective camera, under Playtura's scoreboard, controls and modals. The rules are in
+// DinoJumpGame.ts, the sky and far mesas in shared/EngineMeadow.ts, the dino, obstacles and the
+// scrolling desert in DinoJumpScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again reset it in place and a theme change
+// swaps day for night, so the GPU view is never rebuilt. JS steps the jump and the obstacles in fixed
+// 60 Hz steps once a frame; the running legs, bob, dust and bursts move in the engine's Rust core.
+import { useMemo } from 'react';
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { livesColumn, scoreColumn, timerColumn } from '../shared/EngineHud';
+import { backgroundFor, lightFor } from '../shared/EngineMeadow';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { getLayout, LIVES, TIME_LIMIT } from './DinoJumpConstants';
+import { createGame, dispose, jump, reset, setLayout, setTheme, start, tick } from './DinoJumpGame';
+
+const SFX = GAME_SOUNDS.DINO_JUMP;
+const formatScore = (value: number) => value.toLocaleString();
+
+export const DinoJump = engineGame(GAME_IDS.DINO_JUMP, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [lives, setLives] = useLiveState(LIVES);
+  const [timeLeft, setTimeLeft] = useLiveState(TIME_LIMIT);
+
+  // Surviving the timer is a win, losing every life a loss
+  const { theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.DINO_JUMP,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => setLayout(g, getLayout(width, height, offset)),
+    // Jumps as the finger lands (the original version waited for it to lift)
+    drag: (g, { phase }) => {
+      if (phase === 'start') jump(g);
+    },
+    sounds: SFX,
+    onStart: (fx) => fx(SFX.START, HapticType.MEDIUM),
+    onPlayAgain: (fx) => fx(null, HapticType.LIGHT),
+    onOver: (fx, status) => fx(status === 'win' ? SFX.WIN : SFX.GAME_OVER, status === 'win' ? HapticType.SUCCESS : HapticType.ERROR),
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onLives = setLives;
+      g.onTime = setTimeLeft;
+      g.onJump = () => fx(SFX.JUMP, HapticType.LIGHT);
+      g.onCollect = () => fx(SFX.COLLECT, HapticType.SUCCESS);
+      g.onHit = () => fx(SFX.HIT, HapticType.HEAVY);
+    }
+  });
+
+  // Sunlight by day, moonlight at night (the world's colors follow the theme too)
+  const light = useMemo(() => lightFor(theme), [theme]);
+  const background = useMemo(() => backgroundFor(theme), [theme]);
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={light}
+      background={background}
+      columns={[scoreColumn(score, 'SCORE', formatScore), livesColumn(lives, LIVES), timerColumn(timeLeft, theme)]}
+      subtext="Jump over the cacti!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'YOU SURVIVED!' : 'GAME OVER',
+        message: status === 'win' ? 'Great running!' : 'You hit an obstacle!',
+        scoreLabel: 'Final Score',
+        score,
+        buttonText: 'Run Again!'
+      })}
+    />
+  );
+});

package/src/games/dino-jump/DinoJumpConstants.ts

@@ -0,0 +1,80 @@
+// Dino Jump's rules, physics, timings and layout. Rules, scoring, physics and layout match the original
+// version (games/dino-jump), so scores and feel carry over.
+import type { MeadowOptions, Rig } from '../shared/EngineMeadow';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+export const TIME_LIMIT = 120; // seconds; surviving them wins
+export const LIVES = 3;
+export const POINTS_PER_SECOND = 200;
+export const MUSHROOM_POINTS = 1000; // and a life back
+
+export type ObstacleKind = 'cactus_small' | 'cactus_large' | 'mushroom';
+/** Each obstacle's size in screen points (its collision box, and what's drawn). */
+export const OBSTACLE_SIZE: Record<ObstacleKind, { width: number; height: number }> = {
+  cactus_small: { width: 35, height: 65 },
+  cactus_large: { width: 45, height: 85 },
+  mushroom: { width: 45, height: 65 }
+};
+export const MUSHROOM_CHANCE = 0.05;
+export const SMALL_CHANCE = 0.5; // of the rest's roll: below this small, above large
+
+// ── Physics (points per 60 Hz step, as the original version) ─────────────
+
+export const STEP = 1 / 60;
+export const STEP_TOLERANCE = 0.002;
+export const MAX_PENDING = 0.05;
+export const GRAVITY = 1.4;
+export const JUMP_FORCE = -28;
+export const RUN_SPEED = 6; // the obstacles' and the ground's scroll
+export const DINO_X = 50;
+export const DINO_WIDTH = 70; // drawn
+export const DINO_HEIGHT = 75;
+export const DINO_HIT_WIDTH = 50; // collides
+export const DINO_HIT_HEIGHT = 60;
+export const MAX_OBSTACLES = 5;
+export const MIN_OBSTACLE_GAP = 300; // the rightmost obstacle must be this far in before the next spawns
+export const REMOVE_X = -100;
+
+// ── Spawning (seconds) ────────────────────────────────────────────────
+
+export const FIRST_OBSTACLE = 1.5;
+export const SPAWN_MIN = 2.5;
+export const SPAWN_SPREAD = 2;
+
+// ── Feel ──────────────────────────────────────────────────────────────
+
+export const STRIDE_TIME = 0.16; // one leg swing
+export const DUST_INTERVAL = 0.24; // a puff of dust off the feet while running
+
+// ── The world ─────────────────────────────────────────────────────────
+
+const FOV = 0.9;
+const HORIZON = 0.6;
+const PLAY_DEPTH = 9;
+
+/** The screen line the dino runs on: higher with no header, as the original ground strip was. */
+export const groundLine = (height: number, offset: number) => height - (offset > 0 ? 150 : 250);
+
+/**
+ * A low camera over the desert floor, at the height that puts the real ground under the play plane
+ * exactly on the original game's ground line: the dino runs on the sand, which runs on to the horizon.
+ */
+export function rigFor(height: number, offset: number): Rig {
+  const tanHalf = Math.tan(FOV / 2);
+  const pitch = Math.atan((HORIZON - 0.5) * 2 * tanHalf);
+  const k = (2 * PLAY_DEPTH * tanHalf) / height;
+  const eyeHeight = -PLAY_DEPTH * Math.sin(pitch) - (height / 2 - groundLine(height, offset)) * k * Math.cos(pitch);
+  return { eyeHeight, horizon: HORIZON, playDepth: PLAY_DEPTH };
+}
+
+export const MEADOW: MeadowOptions = { biome: 'desert', near: false, sun: [0.8, 0.22], clouds: [0.1, 0.42] };
+
+/** The scrolling desert floor comes in tiles this many metres wide (three cover any view). */
+export const TILE = 80;
+
+// ── Layout (screen points) ────────────────────────────────────────────
+
+export type Layout = { width: number; height: number; offset: number; groundY: number };
+
+export const getLayout = (width: number, height: number, offset: number): Layout => ({ width, height, offset, groundY: groundLine(height, offset) });