Make the game
you keep thinking about.

import { createBrowserGame, type BrowserGameApplication } from 'flixel-pixi';
import { HeroRunnerState } from './game';

export function startHeroRunner(
  host: HTMLElement,
  signal: AbortSignal,
): Promise<BrowserGameApplication> {
  return createBrowserGame({
    backgroundColor: 0x090d16,
    height: 180,
    host,
    initialState: HeroRunnerState,
    preloader: false,
    signal,
    width: 320,
  });
}

export function jumpHeroRunner(game?: BrowserGameApplication): void {
  const state = game?.game.state;
  if (state instanceof HeroRunnerState) state.requestJump();
}

import { FlxBackdrop, FlxG, FlxSprite, FlxState, FlxText } from 'flixel-pixi';
import {
  FLOOR_Y,
  makeCollectibleGraphic,
  makeGroundTile,
  makeRunnerSheet,
  makeSkyTile,
  PLAYER_FLOOR_Y,
  PLAYER_HEIGHT,
  PLAYER_WIDTH,
  VIEW_HEIGHT,
  VIEW_WIDTH,
} from './art';

export class HeroRunnerState extends FlxState {
  player!: FlxSprite;
  scoreText!: FlxText;

  #collectibles: FlxSprite[] = [];
  #jumpRequested = false;
  #score = 0;
  #nextCollectibleGap = 0;

  requestJump(): void {
    this.#jumpRequested = true;
  }

  override create(): void {
    super.create();
    FlxG.camera.bgColor = 0xff090d16;

    const sky = new FlxBackdrop(makeSkyTile(), 0, 0, VIEW_WIDTH, VIEW_HEIGHT);
    sky.repeatY = false;
    sky.scrollVelocity.x = -13;
    this.add(sky);

    const ground = new FlxBackdrop(
      makeGroundTile(),
      0,
      FLOOR_Y,
      VIEW_WIDTH,
      VIEW_HEIGHT - FLOOR_Y,
    );
    ground.repeatY = false;
    ground.scrollVelocity.x = -92;
    this.add(ground);

    this.player = new FlxSprite(52, PLAYER_FLOOR_Y);
    this.player.loadGraphic(
      makeRunnerSheet(),
      true,
      false,
      PLAYER_WIDTH,
      PLAYER_HEIGHT,
    );
    this.player.addAnimation('run', [0, 1, 2, 3], 11, true);
    this.player.play('run', { loop: true, speed: 11 / 60 });
    this.player.acceleration.y = 680;
    this.player.maxVelocity.y = 420;
    this.add(this.player);

    this.#makeCollectible(224, 102);
    this.#makeCollectible(292, 78);
    this.#makeCollectible(366, 102);

    this.scoreText = new FlxText(9, 8, 150, 'GEMS 000');
    this.scoreText.setFormat(undefined, 9, 0xfff8fafc, 'left');
    this.scoreText.scrollFactor.make(0, 0);
    this.add(this.scoreText);
  }

  override update(): void {
    const grounded = this.player.y >= PLAYER_FLOOR_Y - 0.5;
    if (this.#jumpRequested && grounded) {
      this.player.velocity.y = -285;
      this.player.play('run', { loop: true, speed: 7 / 60 });
    }
    this.#jumpRequested = false;

    super.update();

    if (this.player.y >= PLAYER_FLOOR_Y) {
      this.player.y = PLAYER_FLOOR_Y;
      this.player.velocity.y = 0;
      this.player.play('run', { loop: true, speed: 11 / 60 });
    }

    for (const collectible of this.#collectibles) {
      if (collectible.x + collectible.width < 0) {
        this.#recycleCollectible(collectible);
      }
      if (this.player.overlaps(collectible)) {
        this.#score += 1;
        this.scoreText.text = `GEMS ${this.#score.toString().padStart(3, '0')}`;
        FlxG.camera.flash(0x4412d9e6, 0.12);
        this.#recycleCollectible(collectible);
      }
    }
  }

  #makeCollectible(x: number, y: number): void {
    const collectible = new FlxSprite(x, y);
    collectible.loadGraphic(makeCollectibleGraphic());
    collectible.velocity.x = -92;
    collectible.angularVelocity = 90;
    this.#collectibles.push(collectible);
    this.add(collectible);
  }

  #recycleCollectible(collectible: FlxSprite): void {
    this.#nextCollectibleGap += 37;
    collectible.x = VIEW_WIDTH + 54 + (this.#nextCollectibleGap % 76);
    collectible.y = this.#nextCollectibleGap % 2 === 0 ? 102 : 78;
  }
}

import { FlxGraphic, makeGraphicPixels } from 'flixel-pixi';

export const VIEW_WIDTH = 320;
export const VIEW_HEIGHT = 180;
export const FLOOR_Y = 148;
export const PLAYER_WIDTH = 24;
export const PLAYER_HEIGHT = 32;
export const PLAYER_FLOOR_Y = FLOOR_Y - PLAYER_HEIGHT;

export function makeSkyTile(): FlxGraphic {
  const width = 128;
  const pixels = makeGraphicPixels(width, VIEW_HEIGHT, 0x0b1426ff);
  for (let y = 0; y < VIEW_HEIGHT; y += 1) {
    for (let x = 0; x < width; x += 1) {
      const index = y * width + x;
      if (y > 100) pixels.data[index] = 0x102b42ff;
      if (y > 122) pixels.data[index] = 0x12374bff;
    }
  }
  const stars = [
    [14, 20],
    [48, 36],
    [82, 17],
    [112, 47],
    [28, 69],
    [98, 77],
  ];
  for (const [sx, sy] of stars) {
    if (sx === undefined || sy === undefined) continue;
    pixels.data[sy * width + sx] = 0x12d9e6ff;
  }
  for (let x = 0; x < width; x += 1) {
    const hill = 112 - Math.round(Math.sin((x / width) * Math.PI * 2) * 14);
    for (let y = hill; y < FLOOR_Y; y += 1)
      pixels.data[y * width + x] = 0x16253aff;
  }
  return FlxGraphic.fromPixels(pixels, 'hero-runner-sky');
}

export function makeGroundTile(): FlxGraphic {
  const width = 64;
  const height = VIEW_HEIGHT - FLOOR_Y;
  const pixels = makeGraphicPixels(width, height, 0x941545ff);
  for (let y = 0; y < height; y += 1) {
    for (let x = 0; x < width; x += 1) {
      const stripe = (Math.floor(x / 8) + Math.floor(y / 8)) % 2 === 0;
      pixels.data[y * width + x] =
        y < 6 ? 0x12d9e6ff : stripe ? 0xff1f6dff : 0xc71959ff;
    }
  }
  return FlxGraphic.fromPixels(pixels, 'hero-runner-ground');
}

export function makeRunnerSheet(): FlxGraphic {
  const frames = 4;
  const pixels = makeGraphicPixels(
    PLAYER_WIDTH * frames,
    PLAYER_HEIGHT,
    0x00000000,
  );
  for (let frame = 0; frame < frames; frame += 1) {
    const frameX = frame * PLAYER_WIDTH;
    const step = frame % 2 === 0 ? 0 : 2;
    for (let y = 4; y < 24; y += 1) {
      for (let x = 5; x < 19; x += 1) {
        const edge = x === 5 || x === 18 || y === 4 || y === 23;
        pixels.data[y * pixels.width + frameX + x] = edge
          ? 0xf8fafcff
          : 0xff1f6dff;
      }
    }
    for (let y = 9; y < 13; y += 1) {
      for (let x = 8; x < 16; x += 1)
        pixels.data[y * pixels.width + frameX + x] = 0x090d16ff;
    }
    pixels.data[10 * pixels.width + frameX + 10] = 0x12d9e6ff;
    pixels.data[10 * pixels.width + frameX + 14] = 0x12d9e6ff;
    for (let y = 24; y < 31; y += 1) {
      for (let x = 6 + step; x < 11 + step; x += 1)
        pixels.data[y * pixels.width + frameX + x] = 0xf8fafcff;
      for (let x = 14 - step; x < 19 - step; x += 1)
        pixels.data[y * pixels.width + frameX + x] = 0xf8fafcff;
    }
  }
  return FlxGraphic.fromPixels(pixels, 'hero-runner-sheet');
}

export function makeCollectibleGraphic(): FlxGraphic {
  const size = 12;
  const center = 5;
  const pixels = makeGraphicPixels(size, size, 0x00000000);
  for (let y = 1; y < size - 1; y += 1) {
    const halfWidth = Math.min(y, size - 1 - y, center);
    for (let x = center - halfWidth; x <= center + halfWidth; x += 1) {
      const edge = x === center - halfWidth || x === center + halfWidth;
      pixels.data[y * size + x] = edge ? 0xf8fafcff : 0x12d9e6ff;
    }
  }
  return FlxGraphic.fromPixels(pixels, 'hero-runner-collectible');
}