Break//Out
Canvas 2D · 32 bricks · 3 lives · one yellow ball
READY · 60 FPS
Insert Coin
Drag anywhere on the screen to slide the paddle · tap to serve
Canvas 2D · 32 bricks · 3 lives · one yellow ball
Drag anywhere on the screen to slide the paddle · tap to serve
Operator’s manual
The ball rides the paddle centre. Tap the screen, hit Space, or press Launch — it leaves at a 54° vector (dx ±2, dy −2.8) normalised to a constant 3.6 px/frame, so it never flies straight up the middle.
Contact point decides the exit angle: dead centre returns it vertically, the tips fire it out at ±60°. Paddle motion adds english on top of that.
Brick hits resolve on the axis of least penetration — top/bottom flips dy, left/right flips dx — and only one brick per frame is consumed, so the ball can never wedge itself between two cells.
32 bricks × 10 points = 320. Survive with lives in hand and each remaining ball pays a 25-point bonus on the victory screen.
| Property | Value |
|---|---|
| Canvas | 400 × 600 |
| Grid | 8 × 4 |
| Brick cell | 50 × 20 |
| Field offset | y = 100 |
| Ball radius | 3 |
| Ball speed | 3.6 px/f |
| Paddle | 60 × 10 @ y580 |
| Paddle clamp | 0 – 340 |
| Lives | 3 |
| Max score | 320 |
| Tick | 16.67 ms fixed |
Rendering is a fixed-timestep accumulator under requestAnimationFrame; the 32-brick layer is baked into an offscreen buffer and only re-baked when a brick dies, so the per-frame cost stays flat on mid-range phones.