HTML5 · Canvas 2D · Vanilla JS

BREAKOUT32 bricks · 3 lives · 320 max

Ready
400 × 600
60 FPS
Breakout — 400 by 600 canvas game. Your browser does not support the canvas element.

Click / tap the screen or press SPACE to launch

How the physics behaves

01

Launch vector

The ball rests on the paddle until you commit. Release applies the spec vector (2, −2.8) normalised to 3.44 px/frame — never straight up, with a few degrees of jitter so no two serves are identical.

02

Angle off the paddle

Contact position maps to a ±60° exit angle. Dead centre returns vertically; the tips throw the ball wide. Speed magnitude is re-normalised after every bounce so the ball never accelerates out of control.

03

One brick per frame

Circle-vs-AABB overlap is resolved against the single closest brick using minimum-penetration axes, then the ball is displaced clear of the box — no double flips, no tunnelling, no bricks eaten twice.

Build sheet
canvas400 × 600
grid8 × 4 @ 50 × 20
bricks32 · 10 pts
ballr 3 · 3.44→4.00
paddle60 × 10 @ y 580
paddle rangex 0 → 340
collisionAABB + side resolve
looprAF · fixed 16.67 ms
lives3
dependenciesnone