Cabinet No. 04 · free play insert coin
Coin-op·8 × 4 brick wall·3 lives·320 max

BREAK//OUT

Thirty-two cyan bricks, a three-pixel yellow ball and a sixty-pixel paddle. No engine, no libraries — one file, one canvas, one fixed 60 Hz physics step.

canvas400 × 600
grid8 × 4 · 50×20
ballØ6 · 3.44 px/f
paddle60 × 10 @ y580
inputmouse · keys · touch

Operator's manual

The wall is a contiguous 8 × 4 grid — 50 × 20 px per brick, laid out at col × 50 and row × 20, dropped below a 60 px HUD strip so the score never fights the bricks. Everything else is the ball's problem.

  1. 01

    Launch, never straight up

    The ball waits on the paddle. Tap, click or hit Space and it leaves along (2, −2.8) normalised to 3.44 px/frame — roughly 54° off vertical, with a randomised sign so no two lives open the same way.

  2. 02

    Use the paddle's edges

    Where you contact decides the exit angle: dead centre goes nearly vertical, the tips throw the ball out at up to 62°. Lateral paddle speed is added as spin, then the vector is re-normalised so the magnitude never drifts.

  3. 03

    One brick per sub-step

    Every overlapping brick is scored by penetration area; only the deepest resolves, so a corner hit can't double-deduct. The ball is ejected along the collision normal, which is also what stops it tunnelling or lodging inside the wall.

  4. 04

    Clearing the wall pays 320

    Ten points a brick, three lives, and the broken bricks stay broken when you lose one. Survive and the next wave rebuilds the wall a little faster.

Hard specs

Canvas
400 × 600
Brick
50 × 20 · #00ffff
Ball
r 3 · #ffd83d
Paddle
60 × 10 · y 580
Paddle range
x 0 – 340
Speed
3.44 px/frame +wave
Lives / max
3 / 320 pts
Loop
rAF · fixed 60 Hz

Edge cases, handled

  • Velocity magnitude re-normalised after every bounce — speed never creeps up.
  • No ball-in-brick: positional ejection plus one collision per sub-step.
  • Min |dx| and min |dy| clamps kill horizontal and vertical locks.
  • Paddle side hits flip dx; top hits flip dy with angle mapping.
  • Touch coordinates rescaled into buffer space — crisp on any DPR.
  • Tab blur auto-pauses; timers clamp on refocus.