Canvas Breakout Clone

Difficulty: Intermediate | Runtime: HTML5 Canvas | Output: Playable game

Teach an AI agent to build a classic Breakout arcade game with paddle controls, ball physics, brick collision detection, scoring, and game-over handling.

What You'll Build

A self-contained HTML file implementing a fully playable Breakout clone:

• Rows of colored bricks at the top of the screen
• A paddle controlled by mouse movement
• A ball that bounces off walls, paddle, and bricks
• Score tracking and game-over state
• Restart capability

Core Concepts

1. Game State

{
  ball: { x, y, dx, dy, radius },
  paddle: { x, y, width, height },
  bricks: [{ x, y, width, height, color, alive }],
  score: number,
  lives: number,
  running: boolean
}

2. Game Loop Architecture

Input → Update Physics → Detect Collisions → Render → Repeat

Each frame at 60fps:

1. Read mouse position for paddle
2. Move ball by (dx, dy)
3. Check wall bounces (reflect dx or dy)
4. Check paddle collision (reflect dy, adjust dx by hit position)
5. Check brick collisions (destroy brick, reflect ball, add score)
6. Check ball-below-paddle (lose life)
7. Clear and redraw everything

3. Brick Layout

Bricks arranged in a grid:

• Columns: 10 across, with gaps
• Rows: 5 deep, each row a different color
• Colors: Red, Orange, Yellow, Green, Cyan (top to bottom)

4. Collision Detection

For brick collisions, use AABB (Axis-Aligned Bounding Box):

ball overlaps brick if:
  ball.x + radius > brick.x AND
  ball.x - radius < brick.x + brick.width AND
  ball.y + radius > brick.y AND
  ball.y - radius < brick.y + brick.height

Instructions

1. Set up a fixed-size canvas (800x600)
2. Create the brick grid with colors
3. Implement paddle that follows mouse X position
4. Add ball with initial diagonal velocity
5. Handle wall bounces, paddle bounces, and brick collisions
6. Track score (10 points per brick) and display it
7. Detect game over (ball falls below paddle)
8. Add click-to-restart functionality

Parameters