Tutorial: Pong / Paddle 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 Pong / Paddle Game's architecture:

The four systems, in order of execution every frame:

1. Input system — reads the arrow keys (or mouse) and moves the player's paddle up/down.
2. AI system — moves the CPU's paddle toward the ball's y position, but capped at a limited speed so it's beatable.
3. Physics system — the ball moves every frame and reflects its direction off the top/bottom walls and either paddle.
4. Scoring system — when the ball passes a side completely, the other player scores and the ball resets to center.

🎮 Play & Customize

Move your paddle (left side) with Arrow Up / Arrow Down, W / S, or the touch buttons below the game. First to the score goal wins the match.

💡 Click inside the game first — that gives it keyboard focus so ↑/↓ move your paddle 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 = {
  ball:     '🏐',
  bg:       'space',
  ballSpeed: 3,
  aiSpeed:   3,
  winScore:  5
};

👆 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. player paddle follows held keys
  if (keys.up)   playerPaddle.y -= 5;
  if (keys.down) playerPaddle.y += 5;

  // 2. CPU paddle chases the ball, capped at aiSpeed
  const dy = ball.y - cpuPaddle.centerY();
  cpuPaddle.y += clamp(dy, -config.aiSpeed, config.aiSpeed);

  // 3. ball moves, bounces off walls and paddles
  ball.x += ball.vx; ball.y += ball.vy;
  if (ball.y < 0 || ball.y > H) ball.vy *= -1;
  if (collides(ball, playerPaddle) || collides(ball, cpuPaddle)) ball.vx *= -1;

  // 4. score when the ball fully passes a side, then reset
  if (ball.x < 0) { cpuScore++; resetBall(); }
  if (ball.x > W)     { playerScore++; resetBall(); }
}

🛠️ Now Build It For Real

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