BREAKOUT

canvas 2d · 400×600

STANDBY

FIELD 8 × 4 / BRICK 50 × 20

Drag anywhere on the screen to slide the paddle · tap to launch

Telemetry

Controls

←→ slide paddle
SPACE launch / restart
P pause & resume
M mute blips
DRAG finger controls paddle

Scoring

Event	Points
Brick destroyed	+10
Full clear (32 bricks)	320
Starting lives	3
Ball past paddle	−1

Field manual · 01

Every bounce is explicit. No engine, no hidden solver.

The play field is a fixed 400 × 600 logical surface. The brick wall is 8 columns of 50 px by 4 rows of 20 px, top-aligned, sitting under a 46 px HUD band so the score never sits on top of live bricks. Hover or tap cells below to inspect the grid.

READY — 32 CELLS LIVE

Field manual · 02

Collision model

Sub-stepped Motion is sliced into steps of ≤1.5 px per frame so a 4 px ball can never tunnel through a 20 px brick.
AABB + R Circle-vs-rect test against the brick's bounding box expanded by the ball radius; the shallower penetration axis is the one that flips.
Top / bottom Vertical overlap is shallower → flip dy, push the ball clear of the brick face.
Left / right Horizontal overlap is shallower → flip dx. Exactly one brick resolves per step, so a corner hit can't consume two bricks.
Paddle angle Contact offset drives a ±60° exit vector, so the paddle edge spits the ball wide and the centre returns it up.
Constant |v| Velocity is renormalised every frame; it only creeps upward from 3.44 to 4.00 px as the rally grows.