Online Breakout Game
Play Breakout online with Easy, Normal, and Hard presets, streak scoring, local best-score tracking, and exportable run summaries for arcade practice.| Metric | Value | Copy |
|---|---|---|
| {{ row.label }} | {{ row.value }} |
| Time | Event | Value | Detail | Copy |
|---|---|---|---|---|
| {{ row.time }} | {{ row.event }} | {{ row.value }} | {{ row.detail }} |
Introduction
Breakout-style play is a compact test of aim, timing, and recovery. A paddle protects the lower edge of the playfield, a ball rebounds around the walls, and a brick wall disappears one contact at a time. The game looks simple because every object has an obvious job, but a good run depends on where the ball returns after each hit, not only on whether the paddle reaches it.
The useful skill is control over the next angle. A safe middle hit sends the ball upward with a more vertical path and gives you time to reset. A paddle-edge hit sends the ball sideways and can sweep across several columns, which clears bricks quickly when the line is clean and becomes hard to save when the rebound comes back low. That tradeoff is why two runs with the same score can feel very different.
A fair score comparison starts with the same challenge. More lives, a wider paddle, a slower ball, or fewer starting rows make survival easier. A harder setup can show better control even when the raw score is lower, because the player had less time to correct mistakes. In practice, score needs to be read with level reached, current wall progress, longest streak, and elapsed time.
The format is entertainment and practice. A best score is useful as a personal marker in the same browser, but it is not a public ranking, a prize result, or a cash value. The playfield also depends on browser graphics support, so a blank stage usually means the device or browser could not start the graphics renderer.
Technical Details:
Breakout movement is mostly governed by rectangular bounds and collision response. The ball moves across a fixed playfield, reverses horizontal direction at the side walls, reverses vertical direction at the top wall, and costs a life when it passes the bottom boundary. Brick contact removes one brick and bounces the ball on the axis that best matches the overlap at impact.
Paddle contact is the main source of player control. The ball always turns upward after touching the paddle, but the hit position changes sideways speed. A center hit stays easier to read because it keeps the route more vertical. An off-center hit adds horizontal movement and is capped so edge shots stay playable instead of turning into unrecoverable sideways motion.
Progression comes from pressure rather than hidden scoring bands. A brick is worth 10 points multiplied by the current streak. The streak grows only when the next brick falls within 3.5 seconds of the previous brick. Clearing every brick advances the level, rebuilds the wall with one more row than the previous wall, and increases the base upward speed by 0.004 until it reaches the cap.
Formula Core
The main equations below describe score growth, row growth, and the vertical speed change after a full wall clear.
| Term | Meaning | Value or range | Effect on play |
|---|---|---|---|
s |
Current streak multiplier | 1 and up | Increases the 10-point brick value when brick hits stay inside the 3.5-second streak window. |
baseRows |
Opening brick-row count for the selected setup | 3 to 9 | Sets the height of level 1 before later levels add one extra row per clear. |
vy |
Base vertical ball speed | 0.015 to 0.085 | Rises after every full wall clear, shortening the time available for later returns. |
| Horizontal cap | Maximum side speed after paddle deflection | 0.06 | Keeps edge hits strong while preventing extreme sideways rebounds. |
Setup Values
The visible opening choices are Easy, Normal, and Hard. Custom state values are also recognized when a saved or shared state carries them, but the ordinary start overlay is built around the three preset buttons.
| Setup | Lives | Paddle width | Opening rows | Opening ball velocity |
|---|---|---|---|---|
| Easy | 4 | 2.1 | 6 | x 0.015 and y 0.022 for a slower first wall with more recovery room. |
| Normal | 3 | 1.6 | 6 | x 0.020 and y 0.030 for the default benchmark. |
| Hard | 3 | 1.25 | 7 | x 0.028 and y 0.038 for a narrower paddle and faster first rally. |
| Custom state | 3 | 1.0 to 2.4 | 3 to 9 | Normal speed multiplied by 0.6 to 1.8. |
Rule Core
| Event | Rule | Result to watch |
|---|---|---|
| Side wall | The horizontal velocity reverses while the vertical velocity continues. | The rebound keeps the rally alive without changing score or streak. |
| Top wall | The vertical velocity turns downward after contact with the upper boundary. | The ball returns toward the paddle, usually after crossing through the brick area. |
| Paddle | The vertical velocity turns upward, and off-center contact adds capped horizontal speed. | Center contact favors recovery; edge contact favors column sweeping. |
| Brick | One brick disappears, the ball bounces on the impact axis, and score rises by 10 x streak. |
Fast repeated brick hits raise the streak and make score climb faster than brick count. |
| Bottom miss | One life is removed, streak resets, and the ball returns to the paddle if lives remain. | With Auto on, the next serve begins immediately; with Auto off, the ball waits for launch. |
| Wall clear | Level increases by 1, streak resets, the wall is rebuilt with one more row, and vertical speed rises. | Stage progress restarts on the new wall, so current progress is not lifetime bricks cleared. |
Everyday Use & Decision Guide:
Choose Normal first when you want a reusable baseline. Easy is better for learning how the ball rebounds from the paddle and walls because the wider paddle and extra life give you more recovery chances. Hard is a tighter reflex test from the first serve, with seven opening rows, a narrower paddle, and a faster ball.
Keep one setup when you care about improvement. Changing from Hard to Easy can raise Score without showing better control. Changing from Easy to Hard can lower Score while still showing progress if Level, Bricks cleared, or Longest streak improves under the harder conditions.
- Use Mouse when smooth tracking matters more than discrete taps. Turn it off if arrow-key movement gives you cleaner corrections near the side walls.
- Leave Trail on when the ball is hard to see during fast returns. It changes visibility and particles, not scoring or collision rules.
- Turn Auto off when you want manual serves after a reset or missed ball. Press Space, or use the touch Serve button, when you are ready.
- Use Pause for an actual break because the run clock stops while paused. Use Reset Ball only when you accept that the current rally is being restarted.
- Use Fullscreen when the ball path is cramped on a small display. The larger playfield can make edge rebounds easier to read.
The summary table is the record worth keeping. It reports Preset, Score, Best score, Level, Run duration, Bricks cleared, Longest streak, Stage progress, and Lives remaining. Copy a single row when you only need one value, copy or download CSV when comparing several runs, or export DOCX when you want a small practice note.
Slow down when a new Best score appears under different settings. Replay the same preset, then check whether the higher score also came with stronger Level, more Bricks cleared, or a longer Longest streak. That check prevents an easier setup from looking like a skill jump.
Step-by-Step Guide:
Start by choosing the challenge level, then judge the run from the summary instead of the score alone.
- Press Easy, Normal, or Hard on the start overlay. The status bar should move from
Readyinto an active run state and showScore,Lives,Level,Streak,Time, and brick progress. - Set Mouse, Trail, and Auto before the rally matters. These controls can be changed during play, but keeping them fixed makes later comparisons cleaner.
- Move with the arrow keys, mouse aiming, or touch arrows. Press Space to serve a held ball; after the ball is moving, Space and P pause or resume.
- Aim center hits when you need recovery time and edge hits when you want a wider sweep across the wall. Watch
Streakbecause quick brick hits inside the 3.5-second window raise the multiplier. - If the stage goes blank or the fallback says graphics are unavailable, reload once and try a current browser or device with working WebGL support. The run cannot start properly until the playfield renderer is available.
- After a miss, check
Livesand the serve state. With Auto on, the ball launches again quickly; with Auto off, place the paddle first and press Space or Serve. - At game over, review the run summary. Compare
ScorewithLevel,Bricks cleared,Stage progress,Longest streak, andRun duration, then copy or export the summary if you want to compare it later.
Interpreting Results:
Score is the headline, but it is built from both brick count and streak timing. A run with fewer bricks can sometimes score surprisingly well if several hits arrive close together. A run with many bricks but short streaks can look steadier in play while scoring less sharply.
| Result field | What it means | Check before comparing |
|---|---|---|
Score |
Total points from brick hits after streak multipliers. | Compare only against the same preset or the same custom state values. |
Best score |
The highest score saved in this browser profile. | It is local to the browser and does not prove a shared ranking. |
Level |
The wall number reached during the current run. | A high level with low current progress may mean the previous wall was cleared but the new wall was barely started. |
Bricks cleared |
Current wall bricks removed, shown against the current wall total. | It resets after a full clear because the next wall is built immediately. |
Stage progress |
Percentage of the current wall already removed. | Use it with Level, not as a lifetime completion percentage. |
Longest streak |
Highest quick-hit chain inside the 3.5-second streak window. | A high value with weak progress points to one burst rather than full-board control. |
Run duration |
Elapsed active time shown as minutes and seconds. | Pause stops the clock, so use duration as rally time rather than wall-clock time. |
The false-confidence case is a personal best earned with more forgiving settings. Treat it as a valid run, but verify it by replaying the same setup. A stronger result should usually show more than one supporting field, such as a better Level plus higher Stage progress, or a higher Score plus a longer Longest streak.
Worked Examples:
A controlled Normal baseline
A Normal run that ends with Score 740, Level 1, Bricks cleared 46 / 60, Stage progress 77%, and Longest streak x4 shows solid first-wall control. The score is helped by several quick hits, but the progress field matters just as much because most of the opening wall was actually removed.
A Hard run that looks lower but plays better
A Hard run with Score 620, Level 1, Bricks cleared 33 / 70, Stage progress 47%, and Longest streak x5 may be more impressive than an Easy run with a slightly higher score. Hard starts with seven rows, a 1.25-wide paddle, and faster opening velocity, so the same score range comes from a tighter challenge.
A level clear with a reset progress field
After clearing the first Normal wall, a later summary might show Score 1120, Level 2, Bricks cleared 18 / 70, and Stage progress 26%. That does not mean only 18 bricks were cleared during the whole run. It means level 1 was already cleared, level 2 now has 70 bricks, and 18 of the new wall are gone.
A graphics failure before play starts
If the control shell appears but the playfield reports graphics unavailable, the score fields are not the problem. The browser did not provide a usable WebGL context. A fresh reload is worth trying once, then switch browser or device if the stage still does not render.
FAQ:
Does the game save my run history?
No. It saves only Best score in local browser storage for the current browser profile. Exported CSV or DOCX summaries are the durable record if you want run history.
Why is the ball waiting on the paddle?
The ball is in a held serve state. This happens when Auto is off or after some reset and life-loss states. Press Space, or use the touch Serve button, to launch it.
Can I play without the mouse?
Yes. Turn Mouse off and use the left and right arrow keys, or use the touch arrows on smaller screens. Space and P handle pause and resume during keyboard play.
Why did my score improve but my run still felt worse?
A high Score can come from one hot streak. Check Level, Stage progress, and Bricks cleared to see whether the run cleared more of the wall or only had a short scoring burst.
Does Trail make the game easier?
Trail makes motion easier to see by drawing particle effects, but it does not change brick value, ball speed, paddle width, collision rules, or level progression.
Does the score have prize or cash value?
No. Score and Best score are entertainment and practice markers for this page. They are not wagering outcomes, cash-equivalent values, or official leaderboard records.
Glossary:
- Breakout-style play
- A brick-breaking game pattern where a paddle keeps a ball in play while the ball removes a wall of bricks.
- Serve
- The launch of a held ball from the paddle into the active playfield.
- Streak window
- The 3.5-second period in which another brick hit increases the streak multiplier.
- Stage progress
- The percentage of the current wall removed since the latest wall was built.
- Custom state
- A saved state that can carry custom ball speed, paddle width, and opening row values.
- Best score
- The highest score stored in local browser storage for the current browser profile.
- WebGL
- The browser graphics feature needed to render the interactive playfield.
References:
- Breakout, Atari.
- Breakout: Recharged, Atari, February 10, 2022.
- WebGL: 2D and 3D graphics for the web, MDN Web Docs.
- WebGL: 3D Graphics for the Web, Khronos Group.