@nayan-ui/games 1.18.0 → 1.20.0

package/src/games/flappy-bird/FlappyBirdGame.ts

@@ -0,0 +1,375 @@
+// Flappy Bird's rules and physics, with no React: build a run with `createGame`, give it a layout,
+// `start` it and `tick` it every frame. Tap to flap; the bird falls between flaps. Pipes come every
+// 2.5 s with a gap to fly through: each one passed scores 500. Survive two minutes to win; touch a
+// pipe or a brick wall and it's over. The physics is the original version's, in fixed 60 Hz steps (its
+// constants are per step), so it plays the same at any display rate.
+import { type Camera, type Entity, World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { cameraFor, makeView, spawnWorld, type View3D } from '../shared/EngineMeadow';
+import {
+  BIRD_SIZE,
+  DAMPING,
+  FIRST_PIPE,
+  GRAVITY,
+  JUMP_VELOCITY,
+  type Layout,
+  MAX_FALL_SPEED,
+  MAX_PENDING,
+  meadowFor,
+  PASS_SCORE,
+  PIPE_GAP,
+  PIPE_INTERVAL,
+  PIPE_SPEED,
+  PIPE_WIDTH,
+  randomGapTop,
+  RIG,
+  STEP,
+  STEP_TOLERANCE,
+  tiltFor,
+  TIME_LIMIT,
+  wingFor
+} from './FlappyBirdConstants';
+import {
+  type BirdView,
+  blink,
+  crashBurst,
+  dazeBird,
+  flapPop,
+  hoverBird,
+  placeBird,
+  placePipe,
+  placeWalls,
+  spawnBird,
+  spawnPipe,
+  spawnWalls,
+  wakeBird,
+  type Walls
+} from './FlappyBirdScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+
+/** A pipe pair: its left edge (screen points) and its gap. */
+type Pipe = { x: number; gapTop: number; gapBottom: number; passed: boolean; root: Entity };
+
+const WORLD_CAPACITY = 900; // the meadow (~340), the walls, a few pipes, the bird and bursts
+
+export function createGame(theme: GameTheme) {
+  const world = new World(WORLD_CAPACITY);
+  // Placed for the view on the first layout; GameView reads this object every frame
+  const camera: Camera = { eye: [0, 1.6, 0], target: [0, 1.6, -1], fov: 0.9 };
+  const g = {
+    world,
+    camera,
+    theme,
+    layout: null as Layout | null,
+    view: null as View3D | null,
+    /** The meadow around the play area. */
+    scenery: [] as Entity[],
+    walls: null as Walls | null,
+    /** How far the pipes (and the walls with them) have scrolled, in points. */
+    scroll: 0,
+    bird: null as BirdView | null,
+    phase: 'ready' as Phase,
+    /** Score and the countdown live in the engine (Rust), advanced by world.update. */
+    get score() {
+      return world.scoreboard.score;
+    },
+    get timeLeft() {
+      return world.scoreboard.shownSeconds;
+    },
+    won: false,
+    /** Game clock, seconds: drives the pipe spawns (it pauses with the frame loop). */
+    time: 0,
+    /** Unspent frame time, stepped in fixed 60 Hz steps. */
+    pending: 0,
+    birdY: 0,
+    velocity: 0,
+    /** How the bird looks this frame: its lean (eased toward its speed's), its wings, time since the last flap, the next blink. */
+    tiltShown: 0,
+    wingPhase: 0,
+    wingLift: 0,
+    farLift: 0,
+    flapT: 1,
+    blinkIn: 2,
+    pipes: [] as Pipe[],
+    // UI hooks, set by the screen.
+    onPhase: (_p: Phase) => {},
+    onScore: (_s: number) => {},
+    onTime: (_t: number) => {},
+    onFlap: () => {},
+    onPass: () => {},
+    onCrash: () => {},
+    onWin: () => {}
+  };
+  world.scoreboard.reset(0, TIME_LIMIT);
+  world.scoreboard.handlers = {
+    onSecond: (t) => g.onTime(t),
+    onTimeUp: () => g.phase === 'playing' && end(g, true)
+  };
+  return g;
+}
+export type Game = ReturnType<typeof createGame>;
+
+const after = (g: Game, seconds: number, run: () => void) => g.world.after(seconds, run);
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/** Lays the world out for the view and header: the meadow, the walls and the bird, from the run's state. */
+export function setLayout(g: Game, l: Layout) {
+  const w = g.world;
+  for (const e of g.scenery) w.despawn(e);
+  if (g.walls) {
+    w.despawn(g.walls.top);
+    w.despawn(g.walls.bottom);
+  }
+  clearPipes(g);
+  if (g.bird) w.despawn(g.bird.root);
+  const first = !g.layout;
+  g.layout = l;
+  const v = makeView(l.width, l.height, RIG);
+  g.view = v;
+  const cam = cameraFor(v);
+  g.camera.eye = cam.eye;
+  g.camera.target = cam.target;
+  g.camera.fov = cam.fov;
+  g.scenery = spawnWorld(w, v, g.theme, meadowFor(sunY(l)));
+  g.walls = spawnWalls(w, v, l);
+  placeWalls(w, v, l, g.walls, g.scroll);
+  if (first || g.phase !== 'playing') g.birdY = l.birdStartY;
+  g.bird = spawnBird(w, v, l.birdX + BIRD_SIZE / 2, g.birdY + BIRD_SIZE / 2);
+  hoverBird(w, g.bird, g.phase === 'ready', v);
+  drawBird(g);
+}
+
+/** The sun sits a quarter down, lower under a header, as the original scene placed it. */
+const sunY = (l: Layout) => 0.25 + (l.offset * 0.9) / l.height;
+
+/** A new theme: day or night (the screen swaps the light); the run carries on. */
+export function setTheme(g: Game, theme: GameTheme) {
+  if (theme === g.theme && g.scenery.length) return;
+  g.theme = theme;
+  const v = g.view;
+  const l = g.layout;
+  if (!v || !l || g.world.isDisposed) return;
+  for (const e of g.scenery) g.world.despawn(e);
+  g.scenery = spawnWorld(g.world, v, theme, meadowFor(sunY(l)));
+}
+
+function clearPipes(g: Game) {
+  for (const p of g.pipes) g.world.despawn(p.root);
+  g.pipes = [];
+}
+
+function drawBird(g: Game) {
+  const l = g.layout;
+  const v = g.view;
+  if (!l || !v || !g.bird) return;
+  placeBird(g.world, v, g.bird, l.birdX + BIRD_SIZE / 2, g.birdY + BIRD_SIZE / 2, g.tiltShown, g.wingLift, g.farLift);
+}
+
+/** How long a flap's quick wing beats last (seconds). */
+const FLAP_BEAT_TIME = 0.32;
+/** How quickly the lean follows the bird's speed (per second). */
+const TILT_FOLLOW = 12;
+
+/**
+ * Every frame: the wings beat fast just after a flap, flap steadily while hovering or climbing, and
+ * are held up in a glide as the bird falls (the far one a beat behind); the lean eases toward the
+ * bird's speed; now and then it blinks. After a crash the wings droop.
+ */
+function animateBird(g: Game, dt: number) {
+  const b = g.bird;
+  if (!b) return;
+  const ease = (rate: number) => 1 - Math.exp(-dt * rate);
+  if (g.phase === 'over') {
+    g.wingLift += (-0.55 - g.wingLift) * ease(8);
+    g.farLift += (-0.55 - g.farLift) * ease(8);
+  } else {
+    const ready = g.phase === 'ready';
+    g.flapT += dt;
+    const beating = !ready && g.flapT < FLAP_BEAT_TIME;
+    const climbing = g.velocity < 0;
+    const [freq, amplitude, base] = beating
+      ? [13, 0.95 - (g.flapT / FLAP_BEAT_TIME) * 0.35, -0.1]
+      : ready
+        ? [6.5, 0.75, 0.1]
+        : climbing
+          ? [7, 0.45, -0.15]
+          : [2.5, 0.12, 0.15 + wingFor(g.velocity) * 1.6]; // falling: held up in a glide
+    g.wingPhase += dt * freq * Math.PI * 2;
+    g.wingLift = base + Math.sin(g.wingPhase) * amplitude;
+    g.farLift = base + Math.sin(g.wingPhase - 0.6) * amplitude;
+    g.tiltShown += ((ready ? 0 : tiltFor(g.velocity)) - g.tiltShown) * ease(TILT_FOLLOW);
+    g.blinkIn -= dt;
+    if (g.blinkIn <= 0) {
+      blink(g.world, b);
+      g.blinkIn = 2 + Math.random() * 3;
+    }
+  }
+  drawBird(g);
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+export function start(g: Game) {
+  const l = g.layout;
+  if (g.phase !== 'ready' || !l) return;
+  g.birdY = l.birdStartY;
+  g.velocity = 0;
+  g.pending = 0;
+  g.phase = 'playing';
+  g.world.scoreboard.startCountdown(TIME_LIMIT);
+  if (g.bird && g.view) hoverBird(g.world, g.bird, false, g.view);
+  drawBird(g);
+  g.onPhase('playing');
+  after(g, FIRST_PIPE, () => spawn(g));
+  after(g, PIPE_INTERVAL, () => spawnLoop(g));
+}
+
+function spawnLoop(g: Game) {
+  if (g.phase !== 'playing') return;
+  spawn(g);
+  after(g, PIPE_INTERVAL, () => spawnLoop(g));
+}
+
+/** A pipe pair just past the right edge, its gap somewhere between the walls. */
+function spawn(g: Game) {
+  const l = g.layout;
+  const v = g.view;
+  if (!l || !v || g.phase !== 'playing') return;
+  const gapTop = randomGapTop(l);
+  const x = l.width;
+  g.pipes.push({ x, gapTop, gapBottom: gapTop + PIPE_GAP, passed: false, root: spawnPipe(g.world, v, l, x, gapTop, gapTop + PIPE_GAP) });
+}
+
+/** A fresh run (Stop, Play Again): the bird back at the start, hovering. The world is kept. */
+export function reset(g: Game) {
+  g.world.cancelTimers();
+  clearPipes(g);
+  const l = g.layout;
+  if (l) g.birdY = l.birdStartY;
+  g.velocity = 0;
+  g.pending = 0;
+  g.world.scoreboard.reset(0, TIME_LIMIT);
+  g.won = false;
+  g.phase = 'ready';
+  g.tiltShown = 0;
+  if (g.bird) wakeBird(g.world, g.bird);
+  if (g.bird && g.view) hoverBird(g.world, g.bird, true, g.view);
+  drawBird(g);
+  g.onScore(0);
+  g.onTime(TIME_LIMIT);
+  g.onPhase('ready');
+}
+
+export function dispose(g: Game) {
+  g.world.cancelTimers();
+  g.world.dispose();
+}
+
+/** The run ends: everything freezes where it is, under the game-over card. */
+function end(g: Game, won: boolean) {
+  g.world.scoreboard.stop();
+  g.world.cancelTimers();
+  g.won = won;
+  g.phase = 'over';
+  if (!won && g.bird) dazeBird(g.world, g.bird);
+  if (won) g.onWin();
+  else g.onCrash();
+  g.onPhase('over');
+}
+
+export function tick(g: Game, dt: number) {
+  if (g.world.isDisposed) return;
+  g.time += dt;
+  if (g.phase === 'playing') {
+    g.pending = Math.min(g.pending + dt, MAX_PENDING);
+    let stepped = false;
+    while (g.pending >= STEP - STEP_TOLERANCE && g.phase === 'playing') {
+      g.pending -= STEP;
+      step(g);
+      stepped = true;
+    }
+    if (stepped) drawWorld(g);
+  }
+  animateBird(g, dt);
+  g.world.update(dt);
+}
+
+/** Finger down: flap. */
+export function flap(g: Game) {
+  if (g.phase !== 'playing') return;
+  g.velocity = JUMP_VELOCITY;
+  g.flapT = 0;
+  if (g.bird) flapPop(g.world, g.bird);
+  g.onFlap();
+}
+
+// ── Physics ───────────────────────────────────────────────────────────
+
+/** One 60 Hz step: the bird falls (or rises after a flap), pipes scroll and score, then collisions. */
+function step(g: Game) {
+  const l = g.layout!;
+  let v = (g.velocity + GRAVITY) * DAMPING;
+  if (v > MAX_FALL_SPEED) v = MAX_FALL_SPEED;
+  let y = g.birdY + v;
+  let hitTop = false;
+  let hitBottom = false;
+  if (y < l.topWall) {
+    y = l.topWall;
+    v = 0;
+    hitTop = true;
+  }
+  if (y + BIRD_SIZE > l.bottomWallTop) {
+    y = l.bottomWallTop - BIRD_SIZE;
+    hitBottom = true;
+  }
+  g.birdY = y;
+  g.velocity = v;
+
+  // Pipes scroll, and the walls' bricks with them; passed and off-screen pipes are scored and dropped
+  // even on the crash step, as before
+  g.scroll += PIPE_SPEED;
+  let passed = 0;
+  g.pipes = g.pipes.filter((p) => {
+    p.x -= PIPE_SPEED;
+    if (!p.passed && p.x + PIPE_WIDTH < l.birdX) {
+      p.passed = true;
+      passed++;
+    }
+    if (p.x + PIPE_WIDTH < 0) {
+      g.world.despawn(p.root);
+      return false;
+    }
+    return true;
+  });
+  if (passed) {
+    g.onScore(g.world.scoreboard.add(passed * PASS_SCORE));
+    g.onPass();
+  }
+
+  // Walls win over pipes; pipes are checked against the bird's (clamped) position
+  const cx = l.birdX + BIRD_SIZE / 2;
+  let crashY: number | null = null;
+  if (hitTop) crashY = l.topWall + BIRD_SIZE / 2;
+  else if (hitBottom) crashY = l.bottomWallTop - BIRD_SIZE / 2;
+  else if (g.pipes.some((p) => l.birdX + BIRD_SIZE > p.x && l.birdX < p.x + PIPE_WIDTH && (y < p.gapTop || y + BIRD_SIZE > p.gapBottom))) {
+    crashY = y + BIRD_SIZE / 2;
+  }
+  if (crashY !== null) {
+    drawWorld(g);
+    if (g.view) crashBurst(g.world, g.view, cx, crashY);
+    end(g, false);
+  }
+}
+
+function drawWorld(g: Game) {
+  const v = g.view;
+  const l = g.layout;
+  if (!v || !l) return;
+  const updates = g.world.transforms;
+  for (const p of g.pipes) placePipe(g.world, v, p.root, p.x, updates);
+  updates.flush();
+  if (g.walls) placeWalls(g.world, v, l, g.walls, g.scroll);
+  drawBird(g);
+}