Breakout Game

Understanding the ball first

This Breakout has a single ball, and its direction is always the same combination: 3 px across and 3 px vertically per frame. When the ball touches a wall, a brick or the paddle, only one component of its velocity flips sign, and its speed never changes. The path is therefore always a 45-degree diagonal. Hitting the middle of the paddle or its very edge gives the same rebound angle, and the ball never speeds up. In this version, the skill is not "aiming" with the paddle. It is reading where the ball will come down and standing there in advance. The board is a 480 × 400 canvas, and the game updates exactly 60 times per second whatever your monitor's refresh rate, so the speed is the same on every screen.

Physics numbers taken from the code

The keyboard paddle (300 px per second) is faster than the ball's horizontal speed (180 px per second), so keys alone can always keep up with where the ball is heading. With mouse or touch, the paddle's center jumps to the pointer, so there is no speed limit. The paddle stops at both edges of the board.

Brick layout and arrival times

There are 8 columns and 5 rows, 40 bricks in all, worth 1 point each, so a perfect score is 40. A brick disappears on the first hit; there are no multi-hit bricks and no power-ups. Each brick is 52 × 18 px with a 4 px gap. The whole grid is 444 px wide, running from x = 18 to x = 462, leaving equal margins on both sides. The table shows how long the ball takes, after leaving the paddle, to reach the bottom of each row (measured at the ball's center, assuming a straight run with no wall bounce).

Collisions use the ball's center point, not its 6 px radius. A brick counts as hit only when the center is inside its rectangle, so the ball can seem to clip a corner before bouncing away. The paddle works the same way: the ball's center must be within the 80 px width to be caught. If the ball only overlaps the paddle's edge with its center outside, it is a miss.

Hit rules in short

• When the ball hits a brick, the brick vanishes and your score rises by 1. If the ball was outside the brick's left-right span on the previous step, it struck a side and the horizontal direction flips; otherwise the vertical direction flips. Touching several bricks in one frame flips direction only once.
• The side walls and the ceiling reverse the matching direction. The floor is a hole, not a wall.
• When the ball reaches paddle height with its center within the paddle width, it bounces up with a sound. Otherwise it keeps falling and you lose a life as it reaches the floor.
• You have 3 lives. After losing one, the ball restarts at the bottom center heading up and to the right, and the paddle returns to the middle. The bricks you broke stay broken.
• Clearing all bricks wins; running out of lives loses. No high score is saved and nothing is stored in your browser.
• The Pause button or the P key stops the game, and it does not advance while the tab is hidden. Arrow keys do not scroll the page while a game is running.

Worked examples

1. Reaction time. A ball that hits the bottom row (row 5) returns to the paddle line after about the same time it took to rise,1.30 s. The fastest round trip is therefore about 2.6 s, during which the ball covers about 468 px sideways.
2. Can the keyboard keep up? In that same round trip, the keyboard paddle can move up to 780 px, which is more than the ball's sideways travel (and wall bounces only shorten the distance), so keys alone are enough.
3. Score structure. A perfect score is 5 rows × 8 columns = 40 points, and every row is worth the same. Top rows are not worth more, so clearing the lower rows first carries less risk.

Practical strategy

• Since the ball only travels at 45 degrees, you can predict its landing spot by chaining wall bounces. "Unfold" the walls: pretend the ball flies straight, then fold the sideways distance back into the 468 px that the ball's center can occupy.
• Once you tunnel a column through to the top, the ball can escape into the empty space above the bricks and stay away for a while. Use that time to position the paddle ahead of the ball's wall and ceiling bounces.
• Place the paddle's center under the landing spot before the ball reaches paddle height. Because only the ball's center must be inside the paddle, centering gives you 40 px of margin on each side.
• After a lost life the ball always starts from the middle toward the upper right, so its first bounce is on the same side every time.
• When the last one or two bricks sit in a corner, clearing them can take long. Work out which side the ball will come from and park the paddle off-center in advance.

Common mistakes and limits

• If the mouse leaves the board, the paddle stays where it was last. Keep the pointer on the canvas.
• Mixing keyboard and mouse means the latest input overrides the paddle position. Stick to one method.
• Hitting with the paddle's edge does not change the angle, so the classic trick of "steering" the ball with the paddle's edge does not apply here.
• There are no levels, no speed increases, no power-ups and no extra balls. Winning ends the game.
• There is no randomness. The same inputs always produce the same path.

Where Breakout comes from

The brick-breaking genre became widely known through Atari's 1976 arcade game "Breakout". Its simple set of paddle, ball and bricks inspired countless variations and clones afterward. The game on this page is a simplified take on that original.

Frequently Asked Questions

Try other classic games too

If steering a snake to eat food sounds fun, try our Snake game. To train your recall, there is theMemory Match game, and to see how quickly you react, theReaction Time Test.