Project 02 · After Snake

Build a small Breakout

Breakout is the next complete loop after Snake: the paddle is continuous input, the ball is velocity, and a hit is not enough — you also have to decide the response.

Runnable mini Breakout

Move with Left and Right or A and D. The ball’s bounce angle depends on where it hits the paddle. Click Restart after a miss or a cleared board.

What you need

Collision detection plus the idea of velocity. Read collision response if a bounce still feels like a guess.

What you will learn

How an arcade rule — reverse vy, aim with hit position — is clearer than a full physics engine for this game.

Build in five checkpoints

Draw a paddle and a ball. The paddle is a rectangle with only an x. The ball stores x, y, vx, vy, r.
Move the paddle from held keys. This is continuous input, not a Snake queue.
Bounce on walls. Reverse vx on the sides and vy on the ceiling. A miss at the bottom is a life, not a bounce.
Aim with the paddle hit. Detection says the boxes overlap. Response sets a new heading from the contact point.
Remove bricks and end the board. Mark a brick destroyed, add score, and restart when none remain or the last life is gone.

The bounce is a game rule

const hit = (ball.x - (paddle.x + paddle.w / 2)) / (paddle.w / 2);
const angle = Math.max(-1, Math.min(1, hit)) * Math.PI / 3;
const speed = Math.hypot(ball.vx, ball.vy);
ball.vx = Math.sin(angle) * speed;
ball.vy = -Math.abs(Math.cos(angle) * speed);

That is the same idea used in the playable Breakout: hit the left side to send the ball left, and keep a minimum upward speed so the ball cannot flatten into a horizontal slide. You do not need a rigid-body solver for this.

Mini version vs the playable game

Idea	This page	Playable Breakout
World	One small 2D canvas board	2D rules, with optional WebGL presentation
Paddle bounce	Hit position sets angle	Same rule, plus a minimum upward speed
Bricks	One static row set	Multiple layouts and levels
Failure	One miss ends the run	Lives, reset ball, keep the remaining bricks
Feedback	Score text	Particles and hit sounds

Common mistakes

Reversing vy every frame while the ball is still overlapping the paddle, which causes jitter.
Separating the ball after the bounce instead of before it, so the next frame detects the same hit again.
Using only “flip velocity” on the paddle, which makes every bounce feel the same.

Use it when you want a second complete project after Snake. Skip a physics library until the arcade rule is no longer enough.

Lessons used

Input · Collision · Collision response · State and score

Play the full Breakout reference, then either stay with physics or return to Snake if the first project still has gaps.

Collision ideas follow MDN’s 2D collision notes. Updated 2026-08-13; the mini game was checked locally with keyboard aiming and restart.