Flappy mini game

This example shows a complete Flappy-style loop:

• input (Space / click)
• gravity and flap impulse
• pipe spawning and scoring
• game over and reset flow

The movement constants in this demo use the current physics units:

• GRAVITY is acceleration in world units per second squared.
• FLAP_VELOCITY and PIPE_SPEED are velocities in world units per second.
• The playable tuning uses the same scale as the debug scene: gravity around 1200 and lateral speeds around 120.

Tip: this uses decorators, so experimentalDecorators: true should be enabled in your tsconfig.json.

Interactive example

This sandbox keeps the same Flappy loop split into focused files.

• Press Space or click to flap.
• On game over, press Space or click to reset.
• All game files are visible, so you can inspect the full setup end-to-end.

import {
  CanvasController,
  Game,
  Scene,
  SceneManager,
  SoundManager,
  Vector,
} from "sliver-engine";
import { Bird } from "./Bird";
import { PipeSpawner } from "./PipeSpawner";
import { ScoreHud } from "./ScoreHud";
import { BIRD_START, CANVAS_HEIGHT, CANVAS_WIDTH, GRAVITY } from "./constants";
import { Ceiling, Ground } from "./WorldBoundaries";

const canvas = new CanvasController(CANVAS_WIDTH, CANVAS_HEIGHT);

// Those shennenigans should be done with CSS
const canvasElement = canvas.getCanvas();
document.body.style.margin = "0";
document.body.style.overflow = "hidden";
canvasElement.style.width = "100%";
canvasElement.style.maxWidth = CANVAS_WIDTH + "px";
canvasElement.style.height = "auto";
canvasElement.style.aspectRatio = CANVAS_WIDTH + " / " + CANVAS_HEIGHT;
canvasElement.style.display = "block";
canvasElement.style.margin = "0 auto";

// Create a scene with gravity
const mainScene = new Scene("flappy-demo", "#0b1a2e");
mainScene.setGravity(new Vector(0, GRAVITY));

// Intantiate the game objects
const bird = new Bird(BIRD_START.clone());
const spawner = new PipeSpawner(bird);
const hud = new ScoreHud();
const ground = new Ground();
const ceiling = new Ceiling();

// Add the gameObjects to the Main Scene
mainScene.addGameObject([bird, spawner, ground, ceiling, hud]);

// Instantiate the game
const scenes = new SceneManager({ main: mainScene }, mainScene);
const game = new Game({
  canvas,
  scenes,
  soundManager: new SoundManager(),
  ticksPerSecond: 60,
});

game.start();