https://github.com/bborbe/breakout
https://github.com/bborbe/breakout
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bborbe/breakout
- Owner: bborbe
- Created: 2025-12-25T22:26:24.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2025-12-25T22:29:07.000Z (5 months ago)
- Last Synced: 2025-12-27T08:58:40.058Z (5 months ago)
- Language: HTML
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Breakout
**Play online:** https://bborbe.github.io/breakout/
A classic Breakout game built with vanilla JavaScript, HTML5 Canvas, and CSS. Break all the bricks with the ball while keeping it from falling below the paddle!
## Features
- **Classic Gameplay**: Paddle-controlled ball bouncing and brick breaking
- **Progressive Difficulty**: Ball speed increases as bricks are destroyed
- **Lives System**: 3 lives to clear all bricks
- **Score Tracking**: Points awarded based on brick row (higher rows = more points)
- **High Score Persistence**: Best score saved in browser localStorage
- **Dual Control**: Control paddle with arrow keys or mouse
- **Pause/Restart**: Pause gameplay and restart anytime
- **Victory Detection**: Win screen when all bricks cleared
- **Modern UI**: Clean gradient design matching Tetris/Snake style
## How to Play
1. Open `index.html` in a web browser
2. Use **arrow keys** or **mouse** to move the paddle
3. Keep the ball bouncing to destroy all bricks
4. Don't let the ball fall below the paddle!
5. Clear all bricks to win
## Controls
- **← →** or **Mouse**: Move paddle left/right
- **P** or **Esc**: Pause/unpause game
- **R**: Restart game
## Gameplay Rules
- You start with **3 lives**
- Ball destroys bricks on contact
- Ball bounces off paddle, walls, and bricks
- Lose a life if ball falls below paddle
- Game over when all lives lost
- Victory when all bricks destroyed
## Scoring System
Bricks award different points based on row position:
- Row 1 (Top): **80 points** (Red)
- Row 2: **70 points** (Orange)
- Row 3: **60 points** (Yellow)
- Row 4: **50 points** (Green)
- Row 5: **40 points** (Blue)
- Row 6: **30 points** (Purple)
- Row 7: **20 points** (Pink)
- Row 8 (Bottom): **10 points** (Cyan)
**Total possible score**: 4,400 points (80 bricks)
## Technical Details
- **Canvas Size**: 800x600 pixels
- **Paddle**: 100x20 pixels
- **Ball**: 8 pixel radius
- **Bricks**: 75x20 pixels, 8 rows × 10 columns
- **Initial Ball Speed**: 5 pixels per frame
- **Speed Increase**: 2% per brick destroyed
- **No Dependencies**: Pure vanilla JavaScript
## Game Architecture
The game follows a modular architecture pattern:
- **Game State Module**: Manages game state, collision detection, scoring
- **Renderer Module**: Handles all canvas drawing operations
- **Input Handler Module**: Processes keyboard and mouse input
- **Game Loop**: Uses requestAnimationFrame for smooth gameplay
## Browser Compatibility
Works in all modern browsers supporting:
- HTML5 Canvas
- ES6 JavaScript
- localStorage API
## Development
Built following the same architectural patterns as the companion Tetris and Snake games.
## License
Free to use and modify.