🧱 BREAKOUT

Bounce the ball, clear the wall — and never let it past you

← Back to Fun Time
Score
0
Lives
3
Bricks
35
Best
0

⌨️ Controls

  • ← → or A D slide the paddle
  • The paddle also follows your mouse or finger across the field
  • SPACE launch the ball  •  P pause
  • R start a new game
  • 🎮 Xbox controller? Just plug it in or pair it — the stick and D-pad are the arrow keys, A is SPACE, Menu pauses and View starts again

🎯 How to play

  • Keep the ball off the floor. You get three lives.
  • Every brick the ball touches disappears.
  • Clear all 35 bricks to win.
  • Where the ball lands on the paddle decides where it goes next — that is your steering.

🏆 Scoring

  • The top row is worth 50 points, the bottom row 10.
  • A perfect wall is 1050 points.
  • Hit the ball with the edge of the paddle to send it sideways at the corners.
  • The middle of the paddle sends it straight up — safe, but slow going.

🧑‍💻 For young coders: build this game yourself

This game is split into small library files inside funtime/lib/, and every function has a comment saying exactly what goes in, what comes out, and the algorithm in plain English. Empty any function out, read its comment, and write it yourself.

File What it does Good functions to try re-writing
lib/breakout-rules.js The rules: the ball, the bounces, the bricks hitsRect, bounceOffWalls, bounceOffPaddle, breakBricks
lib/breakout-draw.js Painting the wall, the bat and the ball drawBrick, drawPaddle, renderGame
lib/breakout-main.js The glue: the keyboard, the mouse, the loop doAction, connectMouse, gameLoop

💡 The big idea: a bounce is just a flipped direction. dy = -dy and the ball goes back the way it came. Almost all game physics is made of tiny rules like that, run sixty times a second.

🛠️ Want to be walked through it? Build Breakout Yourself takes you through the key functions one step at a time and tests each one you write. There is a Python version too.