BREAKOUT

HTML5 CANVAS BUILD · v1.0

-- FPS

MOUSE / ← → SPACE · LAUNCH TOUCH DRAG P · PAUSE

SPEC SHEET

FIELD: 400 × 600 px
BRICK GRID: 8 × 4 · 50 × 20
BALL: Ø 6 px · 3.0 → 4.0 px/f
PADDLE: 60 × 10 @ y 580
LIVES: × 3
SCORE: +10 / brick · max 320

CONTROLS

Desktop ← → / A D move · SPACE launch
Shortcuts R restart · P pause · M mute
Mobile drag finger to move · tap to launch / restart

DEV NOTES

Ball is integrated in sub-steps of ≤ radius per frame, so it can never tunnel through a 20 px brick. Exactly one brick is resolved per frame (closest along the path), velocity is re-normalized after every bounce to hold constant magnitude, and delta-time keeps speed identical on 60 / 120 Hz displays.

VANILLA JS · CANVAS 2D · requestAnimationFrame @ 60 FPS · ZERO DEPENDENCIES