---
description: "Classic Breakout arcade game with paddle physics, brick collision, and scoring. Intermediate HTML5 Canvas tutorial."
---
# 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
```javascript
{
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
| Parameter | Default | Description |
|-----------|---------|-------------|
| `BRICK_ROWS` | 5 | Number of brick rows |
| `BRICK_COLS` | 10 | Number of brick columns |
| `BALL_SPEED` | 5 | Initial ball speed |
| `PADDLE_WIDTH` | 100 | Paddle width in pixels |
---
## Bundled Files
### `breakout.html`
```html
Canvas Breakout Clone
```
### `README.md`
```md
# Canvas Breakout Clone
A classic Breakout arcade game built with HTML5 Canvas.
## Playing
Open `breakout.html` in any modern browser. Move your mouse to control the paddle. Click to restart after game over.
## Rules
- Break all bricks to win
- Each brick is worth 10 points
- You have 3 lives
- Ball speeds up based on where it hits the paddle
```