BREAKOUT — HTML5 Canvas Arcade Unit

crt · 400×600 ready

arcade unit — rev 1.0

drag anywhere on the screen with one finger to slide · tap to serve

readout serving

best0 max chain0

lives

bricks standing32/32

ball velocity0.00 px/f

serves0

frame rate—

← →A / DSPACE · serveP · pauseR · restartmouse · dragtouch · drag

Paddle is clamped to 0 – 340px. Hit the ball near the paddle edge for a ±60° launch; the middle returns it flat.

AABB ball-vs-object, side resolved from the smaller penetration axis: shallow X overlap → flip dx, shallow Y overlap → flip dy.
One brick per step. All overlapping bricks are scanned, the shallowest is resolved, the rest wait for the next step — no double-destroys, no trapped ball.
Sub-stepping chops each frame's motion into ≤1.25px hops so the ball can never tunnel a 20px brick.
Constant magnitude. Every reflection is re-normalized to 3.44px/frame with a floor on the vertical component — no near-horizontal locks.