BREAKOUT canvas 2d 400×600 8×4 grid no libs

BREAKOUT

insert coin
32 bricks · 3 lives · 60 fps · touch ready

Mouse · ← → keys · space to launch — or drag anywhere on the screen

◉ Drag horizontally to slide the paddle · tap to launch

Paddle angle mapping

Hit position along the 60px paddle decides the exit vector — edges throw the ball out to ±62°, dead centre sends it straight up. Vertical speed never collapses, so the ball can't crawl sideways forever.

-62° 0° +62° offset = (ball.x - paddle.mid) / 30

Collision model

Explicit AABB, closest hit only.

  1. Substepped sweep. Each frame the ball advances in ≤1.5px slices so fast shots can't tunnel a 20px brick.
  2. Side resolution. Penetration on X vs Y decides the axis: tx < ty → flip dx, otherwise flip dy.
  3. One brick per frame. Candidates are ranked by penetration; the shallowest resolves, the rest wait for the next tick.
  4. Magnitude preserved. Reflections only flip components, then a minimum vertical share is enforced.