BREAKOUT8×4 · CANVAS

Cabinet ready 400×600 · 32 bricks · 3 lives · 320 max
MODEL BRK-400STATE · READY60 FPS TARGET
ScoreBest
000
000
Lives
Bricks left
32 / 32
Ball speed
3.40
Elapsed
0:00.0
Grid cleared
Controls
◀ ▶ move SPACE launch P pause R restart DRAG touch
Render -- fps

How the field is wired

Explicit, hand-written collision maths — no engine, no libraries. Every value below is enforced per frame.

01Brick grid8 columns × 4 rows of 50×20 cells, top-aligned. Position derived as x = col*50, y = 64 + row*20; state lives in a flat array of brick objects with an alive flag.
02Paddle60×10 at y=580, clamped to 0…340. Mouse, arrow keys and touch drag all feed a single smoothed target so finger input never snaps.
03BallRadius 3, spawns at (200, 570) on the paddle. Velocity is always re-normalised to a constant magnitude that ramps 3.40 → 3.90. Launch is a jittered 45° — left or right, never straight up.
04CollisionCircle tested as AABB against every live brick; the overlap axes decide the response — smaller overlap wins, so top/bottom → flip dy, left/right → flip dx. Sub-stepped at ≤2px per iteration, one resolution per step, nearest target only, with a same-frame re-hit guard. Ball never tunnels and never sticks.
05Paddle angleOffset from paddle centre maps to a ±65° exit vector, plus a nudge from paddle momentum. Side impacts reflect horizontally instead of vertically.
06Flow+10 per brick, hard ceiling 320. Three exits below the paddle end the run; a cleared grid triggers the win screen. Both end states offer a canvas-rendered restart, mirrored by the rack buttons.