Breakout Brick Breaker: 8 Levels, Power-Ups and Combos

Breakout is the classic paddle-and-ball brick breaker: keep the ball in play with your paddle and knock out every brick to clear the level. This snippet builds a complete version on one HTML5 <canvas> with no libraries and no image files: eight hand-designed levels, four kinds of bricks, seven power-ups, combos, and a save that lets you continue from the furthest level you reached. It plays with the mouse, a finger dragged on the board, or the arrow keys or A and D, and you launch the ball with a click, a tap or Space.

Levels drawn as text

Each level is an array of strings in the LEVELS list, one character per brick: 1, 2 or 3 for how many hits a brick needs, S for unbreakable steel, X for an explosive brick, P for a power brick that always drops a capsule, and a dot for a gap. The eight levels (Warm-up, Pyramid, Fortress, Checkers, Invader, Steel Maze, Diamond and Final Wall) introduce the special bricks one at a time. A level is cleared when every breakable brick is gone, which pays 500 points times the level. After level 8 the layouts repeat as a new round with a faster ball, and the highest level you reached is saved so the menu can offer "Continue".

Ball physics that never skip a brick

The ball moves in small sub-steps of at most three pixels per frame, so even at top speed it cannot pass through a brick between frames. Each sub-step tests the ball as a circle against each brick's rectangle and, on contact, pushes it out along the axis with the smaller overlap and reverses that component of the velocity, which gives clean bounces off sides and corners. Where the ball meets the paddle decides the bounce angle (the edges send it out wide), the paddle's own movement adds a little spin, every paddle hit speeds the ball up slightly up to a cap, and a minimum vertical speed stops it from sliding sideways forever.

Special bricks and power-ups

Tough bricks show pips for their remaining hits and crack as they are damaged. Steel bricks ring when hit and only bounce the ball. An explosive brick destroys the eight bricks around it, so a well-placed hit can set off a chain reaction. Broken bricks drop a capsule 11% of the time (power bricks always do): W widens the paddle, M splits into three balls, L mounts auto-firing lasers, S slows the ball, F turns it into a fireball that smashes through bricks without bouncing, ♥ is an extra life, and the grey − capsule shrinks your paddle, so not every capsule is worth catching.

Combos and juice

Bricks broken without the ball touching the paddle build a combo, and every four raise the multiplier up to x4. Bricks burst into particles, explosions shake the screen, the ball leaves a glowing trail (orange as a fireball), and each level opens with a banner. Sounds rise in pitch with the combo and are made with the Web Audio API, with a mute button. The game pauses on P, the pause button or a tab switch, and the best score is kept in localStorage.