Breakout Brick Breaker — Free HTML CSS JS Snippet

Breakout (and its spiritual successor Arkanoid) is a brick-clearing paddle game whose entire challenge rests on one piece of physics: a ball must bounce correctly off a paddle, walls, and a grid of bricks, reflecting from the correct face on every single collision. This snippet implements a complete, dependency-free version of that physics using axis-aligned bounding box (AABB) collision detection with proper face-of-impact reflection, plus a paddle bounce that varies the return angle by contact position, exactly like the games it is modelled on.

Grid-generated brick layout

Bricks are not hand-placed — buildBricks() generates a ROWS x COLS (5x8) grid programmatically, computing each brick's x and y from its row and column index: x: BRICK_PAD + c * (BRICK_W + BRICK_PAD), y: BRICK_TOP + r * (BRICK_H + BRICK_PAD). BRICK_W itself is derived from the canvas width so the grid always fills the play area evenly regardless of column count: (W - BRICK_PAD * (COLS + 1)) / COLS. Each brick object also stores a color drawn from a five-entry ROW_COLORS palette (indexed by row) and an alive boolean, which is the only piece of state that changes when a brick is destroyed — the brick object itself is never removed from the array, it is simply skipped during both collision checks and drawing once alive is false.

AABB collision with face-aware reflection

The core physics challenge in Breakout is not detecting *that* the ball hit a brick, but determining *which face* it hit, since a top/bottom hit should flip vertical velocity while a left/right hit should flip horizontal velocity. This snippet solves it with an overlap-comparison technique: on collision, it computes how far the ball has penetrated into the brick from each of the four sides — overlapLeft, overlapRight, overlapTop, overlapBottom — and finds minOverlap, the smallest of the four. The smallest overlap identifies the face the ball crossed most recently, since a ball approaching from the left will have a small overlapLeft and large overlaps on the other three sides at the moment of first contact. If the minimum overlap is on the left or right, ball.vx *= -1; otherwise ball.vy *= -1. This is a lightweight, effective substitute for full swept collision detection and correctly handles all four approach directions.

Paddle bounce with variable angle, mirroring real Arkanoid feel

Like the Pong vs Computer snippet's paddle physics, the paddle here does not simply invert vy on contact — relativeHit = (ball.x - paddleX) / PADDLE_W computes where along the paddle's width the ball landed (0 at the left edge, 1 at the right edge), and maps that to a launch angle spanning roughly ±63 degrees from vertical (Math.PI * 0.7 total range) via angle = (relativeHit - 0.5) * (Math.PI * 0.7). The resulting velocity is always forced upward (ball.vy = -Math.abs(...)) regardless of the angle sign, preventing the ball from ever being redirected back downward through the paddle. Ball speed increases slightly on every paddle hit (* 1.03, capped at 8.5) so extended rallies build gradual tension.

Lives, scoring, and win/loss states

Each brick destroyed adds 10 points via score += 10. When the ball falls past the paddle (ball.y - BALL_RADIUS > H), lives decrements; reaching zero triggers loseGame(). Clearing every brick — checked with bricks.every(b => !b.alive) immediately after any brick is destroyed — triggers winGame(). serveBall() launches the ball on both the initial serve and every life-lost respawn with horizontalKick = (Math.random() * 2 - 1) * 1.5, a small randomised horizontal component, so the ball is never launched perfectly vertically and rallies do not degenerate into a repetitive straight-line bounce pattern.