Canvas Arcade · Build 8×4 · Vanilla JS

Breakout32 bricks

Best
000
Status
READY

Under the hood

No engines, no libraries. Four rules keep the ball honest at 60 frames a second on a phone in your pocket.

01

AABB + radius test

Every brick is a rect. The ball's closest point on the rect is clamped, then compared against r² — no sqrt, no per-frame allocation.

02

Minimum-penetration axis

Overlap on X vs overlap on Y decides the reflection axis, then the ball is pushed flush to the face. One brick per frame, closest wins — the ball can never be swallowed.

03

Paddle angle mapping

Hit offset -1 … +1 across the 60px paddle maps to ±65° off vertical, with a nudge from paddle velocity. Centre returns flat; edges fire wide.

04

Fixed timestep, 2 substeps

Simulation runs in exact 16.67 ms ticks with two collision passes each, so a 120 Hz phone and a 60 Hz desktop play identically — and nothing tunnels.