| Metric | Value | Copy |
|---|---|---|
| {{ row.label }} | {{ row.value }} |
Breakout is a brick-breaking arcade format where a paddle keeps a ball alive long enough to open a wall of blocks. The appeal is easy to explain but demanding in practice because every rebound changes the next angle, and one late correction can turn a clean rally into a lost life. This package recreates that loop as a neon-styled browser run with live score chips, streak tracking, and adjustable opening difficulty.
The challenge is not just reaction speed. Strong runs come from shaping the return angle, protecting the center before the drop gets too low, and deciding when to chase a streak instead of the safest clear. Because the status bar and summary table update as the run unfolds, you can see whether a round is surviving, clearing efficiently, or only spiking on a short scoring burst.
A practical use case is a short focus break where you want something readable at the start and sharper a minute later. Easy gives you four lives and the widest paddle, Normal balances speed and reach, and Hard narrows the paddle while pushing the opening ball faster. Custom goes further by letting you set ball-speed multiplier, paddle width, and opening brick rows before the run begins.
This version adds pressure through progression rather than through complicated rules. Clearing a board adds another brick row, nudges the base vertical speed upward, and resets the serve according to the Auto launch setting. The Streak chip rewards consecutive brick breaks inside a short timing window, so the highest-scoring shot and the safest shot are not always the same one.
The main boundary is comparability. A higher score only means something against the same preset or the same custom tuning, and the playfield depends on WebGL support. The package can keep a local best score and export the live run summary, but it does not create a shared leaderboard or a universal ranking across devices, browsers, or difficulty setups.
Normal is the cleanest first pass if you already know the brick-breaker rhythm. If the ball keeps slipping past before you can read the rebound, start on Easy instead. That wider paddle gives you more time to learn how far an off-center contact bends the next path.
Custom makes sense when you want to test one variable at a time rather than when you just want a quick run. A narrower paddle, faster ball, or taller opening wall all change the meaning of the score, so a custom session is best treated as its own benchmark.
Trail or Mouse aim.Stage progress, Streak, and Lives together. A hot streak with weak progress usually means you found a short scoring burst rather than stable board control.Reset Ball after a chaotic serve if you want a cleaner restart. With Auto launch off, the ball parks on the paddle so you can aim deliberately before sending it back up.Pause or the P key. The run clock stops while paused, so the game is giving you a real break in decision pressure, not a cosmetic overlay.The common misread is to treat every new local Best as better play. A score jump is only persuasive when it happens under the same tuning and arrives with more bricks cleared, higher level reach, or longer survival rather than one favorable streak.
The game renders its playfield as a WebGL scene with an orthographic camera. The paddle is a rectangular body near the bottom, the ball is a small sphere just above it, and the brick wall is rebuilt as a seven-column grid whose row count depends on the selected setup and the current level. If WebGL cannot be created, the intended playfield does not appear even though the surrounding interface still loads.
Ball motion updates on every animation frame. Side walls and the top wall reverse the matching velocity component, while a paddle contact always turns the vertical component upward and tweaks horizontal speed by impact offset. Brick collisions are resolved by axis overlap, so the ball bounces on the axis with the smaller penetration and the struck brick disappears immediately.
Scoring is deterministic once the rally is under way. Every brick is worth 10 points multiplied by the current streak factor, and the streak grows only when the next brick falls within a 3.5-second window. Losing the ball through the bottom boundary removes a life, resets the serve, and either continues the run or ends it if lives reach zero.
The summary fields are live rather than post-match only. Score, Best score, Level, Run duration, Bricks cleared, Longest streak, Stage progress, and Lives remaining can all be copied or exported while the run is still happening. Only the best score is persisted, and it stays local to the current browser profile.
The three numbers that drive pace are score per brick, wall height by level, and the vertical speed increase that follows a full clear.
| Symbol or field | Meaning | Range or values | Package use |
|---|---|---|---|
s |
Current streak factor | 1 and up | Multiplies the 10-point brick value when bricks are cleared in quick succession. |
baseRows |
Opening brick rows from the preset or custom setup | 5, 6, or 3 to 9 | Sets the first wall height before level growth adds more rows. |
vy |
Ball vertical speed | 0.015 to 0.085 | Raised after each full clear to make later boards faster. |
MAX_HORIZONTAL_SPEED |
Cap on horizontal ball speed | 0.06 | Stops extreme paddle-edge hits from creating uncontrollable side travel. |
| Mode | Lives | Paddle width | Opening rows | Ball setup |
|---|---|---|---|---|
Easy |
4 | 2.1 | 5 | Base velocity x 0.015, y 0.022. |
Normal |
3 | 1.6 | 5 | Base velocity x 0.02, y 0.03. |
Hard |
3 | 1.25 | 6 | Base velocity x 0.028, y 0.038. |
Custom |
3 | 1.0 to 2.4 | 3 to 9 | Uses the normal base speeds scaled by the chosen ball-speed multiplier from 0.6 to 1.8. |
For fair comparison, keep the same preset or the same custom values when you judge improvement. A score earned with a slower ball, wider paddle, or shorter wall is still a valid run, but it is not measuring the same challenge as a narrower or faster setup.
Pick a stable setup first, then let the run summary explain how that setup played out.
Preset on the opening overlay. If you switch to Custom, set Ball speed, Paddle width, and Rows before you start so the round has a clear benchmark.Auto launch on serve the way you want it, then press Start Run. If auto launch is off, the ball waits on the paddle until you press Space or trigger a reset that you want to serve manually.Mouse aim and steer with the pointer. As soon as the ball is in play, watch the status bar for Bricks left, Lives, Stage progress, and Streak.Pause, Resume, Reset Ball, and Fullscreen when needed. If the stage is blank, reloading is the quickest reset, but a persistent blank playfield usually means the browser or device could not create WebGL.Run Summary overlay appears. Compare Score, Level, Run duration, Bricks cleared, Longest streak, and Lives remaining under the same setup before you call the latest run an improvement.Score is the headline number, but it reads best alongside Stage progress and Longest streak. A run with a lower score but deeper level reach can reflect steadier control than a flashy run that stalled after one short burst.
Bricks left reaches zero, the game increments Level, rebuilds the wall with one more row, and raises vertical ball speed for the next board.Best score belongs only to the current browser profile. It is not shared with other devices or synced to an account.The false-confidence trap is comparing unlike runs. Verify any new Best by replaying the same preset or the same custom values and checking whether the score increase also came with stronger level reach, more bricks cleared, or a better streak profile.
A Normal session might finish with Score 340, Level 2, Stage progress 86%, Longest streak x4, and one life still available. That mix suggests the player nearly completed the second wall and chained several quick brick clears without fully losing board control. The run is more impressive than the score alone because it combines survival with sustained progress.
Now compare a custom setup with Ball speed 1.30, Paddle width 1.20, and Rows 7 that ends at Score 190. The raw score is lower, but the wall is taller, the paddle is narrower, and the ball is faster from the first serve. That round should be judged against other runs with the same custom values, not against a softer normal baseline.
The surrounding controls can still appear even if the stage never renders. In that situation, starting a run or entering fullscreen does not fix the underlying issue because the renderer was never created. The practical recovery path is to reload first and then try a browser or device with working WebGL support if the playfield is still missing.
No. The package stores only the best score in local browser storage. The current run state lives in memory and disappears when you reload.
Yes. Turn on Mouse aim and the paddle follows pointer position within the allowed bounds. Keyboard shortcuts still handle serve, pause, reset, and fullscreen.
Because Auto launch was enabled. When that switch is on, a reset prepares the serve and immediately relaunches the ball. Turn it off if you want the ball parked on the paddle first.
The most common reason is missing WebGL support. The intended playfield is created only when the browser can initialize WebGL successfully. If the screen stays blank after a reload, try a different browser, device, or graphics setting.
Yes. Run duration increases only while the run is active, not while the pause overlay is up.