ARCADE // SINGLE FILE BUILD

BREAKOUT

Thirty-two bricks, one paddle, three lives. The ball keeps a constant speed — only the angles change.

System telemetry

StateMENU

Score000

Bricks left32

Lives3

Streak0

|v| px/frame3.44

Best000

Event log

Controls

←→ AD SPACEPR DRAG

Move mouse, arrow keys, or drag anywhere on the screen. Tap / space launches the ball. P pauses.

Paddle is clamped to 0–340 px · Ball speed stays inside 3.44–4.00 px/frame

Everything is drawn with the Canvas 2D API — playfield, particles, HUD, overlays and the restart button. The markup above is cabinet trim only.

Brick grid: 8 × 4 · cell 50 × 20 px · x = col·50, y = 68 + row·20 · 32 bricks / 320 pts
Ball: radius 3 px · spawns at paddle centre · v = (2, −2.8) → 3.44 px/frame, ramps to 4.00
Paddle: 60 × 10 px at y = 580 · x clamped 0 → 340 · smoothed follow (lerp 0.45)
Paddle bounce: offset = (ball − centre)/30 → angle 0° → ±60°, speed re-normalised
Brick hit: AABB broad-phase → nearest penetration wins · one brick resolved per frame · ball ejected along the normal, no tunnelling
Side detection: |dx|·(h/2+r) > |dy|·(w/2+r) → flip dx, else flip dy
Lives & score: 3 lives · +10 per brick · miss below y = 600 costs a life · 0 lives ends the run
Frame loop: requestAnimationFrame + fixed 16.67 ms step (max 5 catch-up steps) · static brick layer cached offscreen
Input: pointermove · touchstart/move/end (passive:false) · keyboard · hold-pads · auto-pause on blur