arcade unit 08 · html5 canvas · vanilla js

BREAK/OUT

8 × 4 grid32 bricks320 pts max3 lives60 fps fixed steptouch ready

best0

streak0

run score

0

/ 320

field integrity

controls

move ← → / A D
serve SPACE
pause P
restart ENTER
mobile drag finger
mouse pointer x

crt · 400 × 600 power on

booting…space serve

collision table

WALL left/right → dx ↦ −dx

CEILING → dy ↦ −dy

PADDLE → angle = offset × 65°

BRICK t/b → dy ↦ −dy

BRICK side → dx ↦ −dx

PIT → lives − 1

paddle angle map

edge cases

circle–AABB with penetration-depth axis test
one brick resolved per frame (closest only)
velocity magnitude renormalised after every bounce
sub-stepped motion — no tunnelling at 4px/frame
paddle side impacts deflect dx, never tunnel
anti-stall floor on |dy| — no horizontal lock
paddle clamped to 0…340 on drag & keys

physics: fixed 16.6 ms step · requestAnimationFrame · sub-step ×2 no libraries · canvas-rendered ui · webaudio blips