https://github.com/chanmeng666/html-brick-game

A modern take on the classic Brick Breaker game, featuring a shooting star that bounces off a deer paddle to break colorful bricks. Built with vanilla JavaScript and HTML5 Canvas.
https://github.com/chanmeng666/html-brick-game

arcade-game brick-breaker browser-game game-development html5-canvas javascript particle-effects svg-graphics vanilla-javascript web-game

Last synced: 6 days ago
JSON representation

A modern take on the classic Brick Breaker game, featuring a shooting star that bounces off a deer paddle to break colorful bricks. Built with vanilla JavaScript and HTML5 Canvas.

• Host: GitHub
• URL: https://github.com/chanmeng666/html-brick-game
• Owner: ChanMeng666
• Created: 2024-05-27T05:21:39.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-11-03T11:27:19.000Z (11 days ago)
• Last Synced: 2024-11-03T12:22:25.777Z (11 days ago)
• Topics: arcade-game, brick-breaker, browser-game, game-development, html5-canvas, javascript, particle-effects, svg-graphics, vanilla-javascript, web-game
• Language: JavaScript
• Homepage: https://chanmeng666.github.io/html-brick-game/
• Size: 11.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Brick Breaker Game

A modern take on the classic Brick Breaker game, featuring a shooting star that bounces off a deer paddle to break colorful bricks. Built with vanilla JavaScript and HTML5 Canvas.

## 🌟 Features

- Smooth gameplay with particle effects

- Meteor tail animation for the ball

- Colorful brick layout with collision detection

- Custom deer paddle controlled by mouse movement

- Lives system and score tracking

- Responsive game messages and restart options

- Beautiful gradient animated background

- Modern visual design with SVG graphics

## 🎮 How to Play

1. Move your mouse to control the deer paddle

2. The shooting star (ball) will bounce off the paddle

3. Break all the bricks to win

4. You have 3 lives to complete the game

5. If you miss the star, you lose a life

6. Game ends when all lives are lost or all bricks are broken

## 🛠️ Technical Details

- Built with pure JavaScript, HTML5 Canvas, and CSS3

- No external dependencies required

- Responsive design that works on various screen sizes

- SVG graphics for smooth scaling

- Particle system for visual effects

- Collision detection system

- Game state management

## 🚀 Getting Started

1. Clone the repository

2. Open `index.html` in your browser

3. Click "Start the game" to begin playing

## 🔧 Structure

- `game.js`: Main game logic and rendering

- `index.html`: Game container and message box

- `styles.css`: Game styling and animations

## 🎨 Customization

You can customize various aspects of the game by modifying constants in `game.js`:

- Ball speed and size

- Paddle dimensions

- Brick layout (rows, columns, spacing)

- Colors and visual effects

## 🤝 Contributing

Feel free to fork the project and submit pull requests. You can also open issues for bugs or feature requests.

## 📝 License

MIT License - feel free to use this code for your own projects!