I Built Breakout by Adding 10 Lines to My Pong Code

#javascript #gamedev #canvas #beginners

🌐 Live demo: https://dev48v.infy.uk/game/day4-breakout.html

Day 4 of GameFromZero. 50 playable browser games · 50 days · open + play instantly.

Today: Breakout. 50 years old. Built by Steve Wozniak in 4 days. Still on the App Store as Brick Out / Block Breaker / Atari Breakout. Today's version: ~100 lines of JS.

Pong + brick grid = Breakout

Day 2 of this series was Pong. Same code, with two changes:

Remove the right paddle
Add a brick grid in the top half

That's it. The ball physics are identical. The paddle physics are identical. The render loop is identical. The only new code is the brick-collision loop.

Add the brick grid

const ROWS = 5, COLS = 10;
const bricks = Array.from({ length: ROWS },
  () => Array(COLS).fill(true)
);

50 booleans. Each cell: true = brick alive, false = broken.

Add brick collision (8 lines)

for (let r = 0; r < ROWS; r++)
  for (let c = 0; c < COLS; c++) {
    if (!bricks[r][c]) continue;
    const bx = c*BW, by = r*BH + BTOP;
    if (ballX > bx && ballX < bx+BW &&
        ballY > by && ballY < by+BH) {
      bricks[r][c] = false;
      score += 10;
      vy = -vy;
    }
  }

For each brick still alive, check if the ball is inside its rectangle. If yes: kill the brick, score +10, flip vy. Don't worry about top-vs-side collision detail — flipping vy looks fine 99% of the time.

Lives + ball reset (same as Pong's score event)

if (ballY > c.height) {
  lives--;
  if (lives <= 0) { newGame(); return; }
  reset();  // ball back above paddle
}

Same shape as Pong's "ball passed the goal" logic. Drop a life. If 0, game over. Otherwise reset the ball.

Steer the ball with paddle hit position

if (ballY > c.height-PH-BR && ballX > paddleX && ballX < paddleX+PW && vy > 0) {
  vy = -Math.abs(vy);
  vx += ((ballX - (paddleX + PW/2)) / PW) * 3;
}

Same trick as Pong. Hit position on paddle changes the deflection angle. Hit at the left edge → ball goes up-left. Hit at the right edge → up-right. Center → straight up.

Colored brick rows

Tradition: top row red (most points), bottom row blue (least). 5 rows = 5 colors:

const COLORS = ["#ef4444", "#f97316", "#facc15", "#22c55e", "#3b82f6"];
ctx.fillStyle = COLORS[r];

Pure cosmetic but the game feels wrong without it.

What this unlocks

Same skeleton → many games:

Variant	Change
Brick Out	Different brick layout (smiley face, pyramid)
Arkanoid	Add power-ups (multi-ball, paddle extends)
DX-Ball	More power-ups, stronger physics
Battle Breakout	Two paddles facing each other, shared bricks

The state-step-draw skeleton (Day 1 Snake, Day 2 Pong, Day 3 Tetris, Day 4 Breakout) is the same in all four. Master the loop once = ship every arcade game in an evening.