Tutorial: Catch Game

🗺️ The Architecture

Every tiny-loop game starts as a concept, then gets broken into a core loop, a systems list, and a structure — before anyone touches sprites or colors. Here's the Catch Game's architecture:

The four systems, in order of execution every frame:

1. Input system — reads which arrow key is held and moves the player rectangle left/right.
2. Spawner system — every ~1 second, drops a new item (good or bad) at a random x position at the top.
3. Physics system — every falling item's y position increases each frame (gravity).
4. Collision system — checks every item against the player's box (AABB); good touch → +1 score, bad touch or missed floor → −1 life.

🎮 Play & Customize

Move with Arrow keys, A / D, or the touch buttons below the game. Catch the good item, dodge the bad one. Score enough points before you run out of lives.

💡 Click inside the game first — that gives it keyboard focus so the arrow keys move the player instead of scrolling the page.

👀 Peek at the Code

The game running above is this code — nothing hidden. It's split into two parts on purpose: a small config object you just edited with the panel, and a locked engine that reads it.

const config = {
  player: '🤖',
  good:   '⭐',
  bad:    '💣',
  bg:     'space',
  speed:  3,
  winScore: 10,
  startLives: 3
};

👆 This block updates live — hit "Apply & Restart" above and watch the exact values change here. There's no separate "demo" version of the code; this is it.

function update() {
  // 1. move the player from held keys
  if (keys.left)  player.x -= 5;
  if (keys.right) player.x += 5;

  // 2. spawn a new item on a timer
  if (timeSinceSpawn() > spawnRate) spawnItem();

  // 3. move every falling item down
  items.forEach(i => i.y += config.speed);

  // 4. check collisions, update score/lives
  items.forEach(i => {
    if (collides(player, i)) {
      i.type === 'good' ? score++ : lives--;
      i.remove = true;
    }
  });
}

🛠️ Now Build It For Real

You've played a working Catch Game and seen exactly how it's built. Next, build this same architecture yourself — twice, in two different tools.