🌐 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:

1. Remove the right paddle
2. 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:

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.

Try it now

3-tier page with playable canvas + 8 step understanding + 5-card build:
https://dev48v.infy.uk/game/day4-breakout.html

Tomorrow: 2048 (slide-merge puzzle).

🌐 All games: https://dev48v.infy.uk/gamefromzero.php