A local arcade archive, rendered one square at a time.

The cabinet is a real low-resolution game, not a picture of one.

The screen is a 160 × 120 canvas—the resolution is intentionally small enough that every route, wall, ticket, and character is an authored pixel decision. CSS enlarges that canvas with image-rendering: pixelated, preserving the hard edges instead of smoothing them into a retro-looking blur.

A tiny offscreen sprite sheet holds four walking frames. Each 12fps tick draws one 8 × 8 cell from it, moves the player, advances the night manager, tests the eight tickets, and paints the scene. The curved CRT housing sits above that truthful canvas: its glass overlay adds scanlines, RGB aperture-grille stripes, a dark edge falloff, and a subtle perspective tilt without changing the underlying pixel data.

const sheet = document.createElement('canvas');
sheet.width = 64; sheet.height = 16;
const sctx = sheet.getContext('2d');

function buildSheet() {
  sprites.forEach((sprite, frame) =>
    sprite.forEach((row, y) => [...row].forEach((bit, x) => {
      if (bit === '1') {
        sctx.fillStyle = C.gold;
        sctx.fillRect(frame * 16 + x, y, 1, 1);
      }
    }))
  );
}

ctx.imageSmoothingEnabled = false;
ctx.drawImage(sheet, (ticks % 4) * 16, 0, 8, 8,
  player.x, player.y, 8, 8);

function stopTimer() {
  if (timer) { clearInterval(timer); timer = null; }
}

function sync() {
  const shouldRun = visible && !document.hidden &&
    !motionQuery.matches && state === 'play';
  if (shouldRun && !timer) timer = window.setInterval(tick, 1000 / 12);
  if (!shouldRun) stopTimer();
}

function updateVisibility() {
  const bounds = canvas.getBoundingClientRect();
  visible = bounds.bottom > 0 && bounds.top < window.innerHeight &&
    bounds.right > 0 && bounds.left < window.innerWidth;
  sync();
}

EXACT IMPLEMENTATION EXCERPT / THE TIMER ONLY RUNS WHILE THE SCREEN IS VISIBLE