@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/space-fighter/SpaceFighterGame.ts

@@ -0,0 +1,292 @@
+// Space Fighter's rules, with no React: build a game with `createGame`, give it a layout, `start` it and
+// `tick` it every frame. Pairs of asteroid belts fall from above, one at once and then every
+// `spawnInterval`, each with a gap near the middle; drag the ship left and right through the gaps.
+// Each pair that falls past the ship scores 500. Hitting a belt costs a life and puts the ship back in
+// the middle, with two seconds of blinking safety. Survive the two minutes to win; lose all three lives
+// and it's over.
+//
+// Everything is in screen points, as the original version's physics: the field falls `fallSpeed` points a
+// second, at most a 64 ms frame's worth at once, and the ship and belts collide as boxes.
+import { type Camera, type DragEvent, World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { DODGE_POINTS, FOV, gapLeft, HIT_COOLDOWN, type Layout, LIVES, MAX_FRAME, TIME_LIMIT } from './SpaceFighterConstants';
+import {
+  type Belt,
+  blinkShip,
+  explode,
+  flicker,
+  launchShip,
+  placeBelts,
+  placeShip,
+  removeAll,
+  setSpaceTheme,
+  type Ship,
+  type Space,
+  spawnBelts,
+  spawnShip,
+  spawnSpace,
+  steadyShip,
+  wrapStars
+} from './SpaceFighterScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+export type GameEvent = 'grab' | 'release' | 'dodge' | 'hit';
+
+/** A falling pair: the top of its belts (screen y), where its gap starts, and whether it's been passed. */
+type Pair = { top: number; gapLeft: number; passed: boolean; seed: number; belts: Belt | null };
+
+const WORLD_CAPACITY = 1000; // space (~320), the ship, ~18 rocks a pair, explosions
+const BANK_PER_SPEED = 0.0016; // radians of bank per point a second of sideways speed
+const MAX_BANK = 0.65;
+const MAX_TICK = 0.25;
+
+export function createGame(theme: GameTheme) {
+  const world = new World(WORLD_CAPACITY);
+  const camera: Camera = { eye: [0, 0, 0], target: [0, 0, -1], fov: FOV };
+  const g = {
+    world,
+    camera,
+    layout: null as Layout | null,
+    space: null as Space | null,
+    /** Day (the sun) or night (the moon), from the theme. */
+    day: theme.mode !== 'dark',
+    ship: null as Ship | null,
+    phase: 'ready' as Phase,
+    /** Score, lives and the countdown live in the engine (Rust), advanced by world.update. */
+    get score() {
+      return world.scoreboard.score;
+    },
+    get lives() {
+      return world.scoreboard.lives;
+    },
+    get timeLeft() {
+      return world.scoreboard.shownSeconds;
+    },
+    won: false,
+    shipX: 0,
+    bank: 0,
+    lastShipX: 0,
+    dragging: false,
+    dragFrom: 0,
+    dragStart: 0,
+    pairs: [] as Pair[],
+    nextSpawn: 0,
+    lastHit: -Infinity,
+    clock: 0,
+    seed: 1,
+    // UI hooks, set by the screen.
+    onPhase: (_p: Phase) => {},
+    onScore: (_s: number) => {},
+    onLives: (_n: number) => {},
+    onTime: (_t: number) => {},
+    onEvent: (_e: GameEvent) => {}
+  };
+  world.scoreboard.reset(LIVES, TIME_LIMIT);
+  world.scoreboard.handlers = {
+    onScore: (s) => g.onScore(s),
+    onSecond: (t) => g.onTime(t),
+    // Survive the two minutes to win
+    onTimeUp: () => g.phase === 'playing' && end(g, true)
+  };
+  return g;
+}
+export type Game = ReturnType<typeof createGame>;
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/** A new theme: the sun comes out by day, the moon by night; the run carries on. */
+export function setTheme(g: Game, theme: GameTheme) {
+  const day = theme.mode !== 'dark';
+  if (day === g.day) return;
+  g.day = day;
+  if (g.layout && g.space) setSpaceTheme(g.world, g.layout, g.space, day);
+}
+
+/** Lays the world out for the view (first layout, header height, rotation): rebuilt from the game's state. */
+export function setLayout(g: Game, l: Layout) {
+  const w = g.world;
+  if (g.space) removeAll(w, g.space.all);
+  if (g.ship) w.despawn(g.ship.root);
+  for (const p of g.pairs) if (p.belts) w.despawn(p.belts.root);
+  const old = g.layout;
+  g.layout = l;
+  g.shipX = old ? (g.shipX / old.width) * l.width : l.width / 2;
+  g.lastShipX = g.shipX;
+  g.space = spawnSpace(w, l, g.clock, g.day);
+  g.ship = spawnShip(w, l, g.shipX);
+  if (g.dragging) flicker(w, l, g.ship, true);
+  for (const p of g.pairs) p.belts = spawnBelts(w, l, p.top, p.gapLeft, p.seed);
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+export function start(g: Game) {
+  const l = g.layout;
+  if (g.phase !== 'ready' || !l) return;
+  g.phase = 'playing';
+  g.world.scoreboard.startCountdown(TIME_LIMIT);
+  g.nextSpawn = g.clock; // the first pair at once
+  if (g.ship) launchShip(g.world, l, g.ship);
+  g.onPhase('playing');
+}
+
+/** Back to a fresh, unstarted game (Stop, Play Again). The world, and the GPU view drawing it, are kept. */
+export function reset(g: Game) {
+  clearPairs(g);
+  g.world.scoreboard.reset(LIVES, TIME_LIMIT);
+  g.won = false;
+  g.lastHit = -Infinity;
+  g.phase = 'ready';
+  recentre(g);
+  if (g.ship) steadyShip(g.world, g.ship);
+  g.onScore(0);
+  g.onLives(LIVES);
+  g.onTime(TIME_LIMIT);
+  g.onPhase('ready');
+}
+
+export function dispose(g: Game) {
+  g.world.dispose();
+}
+
+function clearPairs(g: Game) {
+  for (const p of g.pairs) if (p.belts) g.world.despawn(p.belts.root);
+  g.pairs = [];
+}
+
+function recentre(g: Game) {
+  if (!g.layout) return;
+  g.shipX = g.layout.width / 2;
+  g.lastShipX = g.shipX;
+}
+
+function end(g: Game, won: boolean) {
+  g.world.scoreboard.stop();
+  g.won = won;
+  g.phase = 'over';
+  // The finger may still be down: the drag just stops (its release sound would talk over the result)
+  if (g.dragging && g.layout && g.ship) flicker(g.world, g.layout, g.ship, false);
+  g.dragging = false;
+  recentre(g);
+  g.onPhase('over');
+}
+
+export function tick(g: Game, frame: number) {
+  if (g.world.isDisposed) return;
+  // A long frame (a hitch, coming back from the background) never skips clock seconds or spawns
+  const dt = Math.min(frame, MAX_TICK);
+  g.clock += dt;
+  const l = g.layout;
+  if (l && g.phase === 'playing') step(g, l, Math.min(dt, MAX_FRAME));
+  if (l && g.space) wrapStars(g.world, g.space, g.clock);
+  if (l && g.ship) {
+    // Bank into the turn, easing back level
+    const speed = dt > 0 ? (g.shipX - g.lastShipX) / dt : 0;
+    g.lastShipX = g.shipX;
+    const target = Math.max(-MAX_BANK, Math.min(MAX_BANK, speed * BANK_PER_SPEED));
+    g.bank += (target - g.bank) * Math.min(1, dt * 10);
+    placeShip(g.world, l, g.ship, g.shipX, g.bank);
+  }
+  g.world.update(dt);
+}
+
+function step(g: Game, l: Layout, dt: number) {
+  if (g.clock >= g.nextSpawn) {
+    spawnPair(g, l);
+    g.nextSpawn += l.spawnInterval;
+  }
+
+  // The field falls; pairs below the screen go
+  const fall = l.fallSpeed * dt;
+  let kept = 0;
+  for (const p of g.pairs) {
+    p.top += fall;
+    if (p.top <= l.height) {
+      if (p.belts) placeBelts(g.world, l, p.belts, p.top);
+      g.pairs[kept++] = p;
+    } else if (p.belts) g.world.despawn(p.belts.root);
+  }
+  g.pairs.length = kept;
+
+  // The ship's box against each belt's
+  const half = l.shipSize / 2;
+  const left = g.shipX - half;
+  const right = g.shipX + half;
+  const top = l.shipY - half;
+  const bottom = l.shipY + half;
+  const struck = g.pairs.some((p) => {
+    if (bottom <= p.top || top >= p.top + l.beltHeight) return false;
+    return left < p.gapLeft || right > p.gapLeft + l.gap;
+  });
+  if (struck && g.clock - g.lastHit > HIT_COOLDOWN) {
+    hit(g, l);
+    return;
+  }
+
+  // Dodges: a pair scores once its belts are wholly below the ship
+  for (const p of g.pairs) {
+    if (!p.passed && p.top > bottom) {
+      p.passed = true;
+      g.world.scoreboard.add(DODGE_POINTS);
+      g.onEvent('dodge');
+    }
+  }
+}
+
+function spawnPair(g: Game, l: Layout) {
+  const seed = g.seed++;
+  const pair: Pair = { top: l.spawnY, gapLeft: gapLeft(l), passed: false, seed, belts: null };
+  pair.belts = spawnBelts(g.world, l, pair.top, pair.gapLeft, seed);
+  g.pairs.push(pair);
+}
+
+function hit(g: Game, l: Layout) {
+  g.lastHit = g.clock;
+  explode(g.world, l, g.shipX, l.shipY);
+  g.camera.shake = l.shipSize * l.k * 0.5;
+  g.onLives(g.world.scoreboard.addLives(-1));
+  g.onEvent('hit');
+  // Back to the middle (the finger's drag carries on from there)
+  recentre(g);
+  if (g.dragging) {
+    g.dragFrom = g.shipX;
+    g.dragStart = NaN;
+  }
+  if (g.lives <= 0) {
+    if (g.ship) steadyShip(g.world, g.ship);
+    end(g, false);
+  } else if (g.ship) blinkShip(g.world, g.ship);
+}
+
+// ── The finger ────────────────────────────────────────────────────────
+
+/** Dragging anywhere moves the ship sideways by as much as the finger moves. */
+export function drag(g: Game, { phase, x }: DragEvent) {
+  const l = g.layout;
+  if (!l) return;
+  if (phase === 'start') {
+    if (g.phase !== 'playing') return;
+    g.dragging = true;
+    g.dragFrom = g.shipX;
+    g.dragStart = x;
+    if (g.ship) flicker(g.world, l, g.ship, true);
+    g.onEvent('grab');
+    return;
+  }
+  if (phase === 'move') {
+    if (!g.dragging || g.phase !== 'playing') return;
+    // After a hit recentres the ship, the drag picks up from where the finger is now
+    if (Number.isNaN(g.dragStart)) g.dragStart = x;
+    const half = l.shipSize / 2;
+    g.shipX = Math.max(half, Math.min(l.width - half, g.dragFrom + x - g.dragStart));
+    return;
+  }
+  release(g);
+}
+
+function release(g: Game) {
+  if (!g.dragging) return;
+  g.dragging = false;
+  if (g.layout && g.ship) flicker(g.world, g.layout, g.ship, false);
+  g.onEvent('release');
+}