Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

A modern artistic 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, enhanced with particle effects and smooth animations.
https://github.com/chanmeng666/html-brick-game

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

Last synced: 16 days ago
JSON representation

A modern artistic 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, enhanced with particle effects and smooth animations.

Awesome Lists containing this project

README 

        


 
 
Starlight Brick Breaker


 

 

 

 

 







https://github.com/user-attachments/assets/21a1ed86-09b0-4699-83d4-43c1e336103f



![屏幕截图 2024-12-08 191344](https://github.com/user-attachments/assets/d64bcba2-a283-47de-bcd3-11c265238775)



# Features

A modern artistic reimagining of the classic Brick Breaker game with unique visual elements and smooth gameplay mechanics.



### ⭐ Shooting Star Ball

Navigate a magical shooting star across the screen, complete with glowing particle trail effects that create beautiful light patterns as you play.



### 🦌 Mystical Deer Paddle

Control an elegant deer paddle that gracefully moves to bounce the star, bringing a touch of natural beauty to the classic paddle mechanic.



### 🎨 Colorful Interactive Design

Break through vibrant, colorful bricks that create stunning particle effects upon collision, set against a smoothly animated gradient background.



### 🌟 Particle Effect System

Enjoy a rich visual experience with dynamic particle effects for ball trails, brick collisions, and paddle impacts.



### 💎 Polished Game Elements

- Smooth, responsive controls

- Lives tracking system

- Score counter

- Victory and game over states

- Elegant messaging system



### 🎮 Pure Vanilla Implementation

Built entirely with vanilla JavaScript and HTML5 Canvas - no external libraries or dependencies required.



## 🚀 Getting Started



1. Clone the repository

```bash

git clone https://github.com/ChanMeng666/html-brick-game.git

```



2. Open `index.html` in your browser

3. Click "Start the game" to begin playing

4. Use your mouse to control the deer paddle



## 🎯 How to Play



1. Move your mouse to guide the deer paddle horizontally

2. Bounce the shooting star to break all the bricks

3. Don't let the star fall below the paddle

4. Break all bricks to win the game

5. You have 3 lives to complete your mission



## 🛠️ Tech Stack



![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)



## 📁 Project Structure



- `index.html`: Game container and UI elements

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

- `styles.css`: Styling and animations

- `SVG/`: Visual assets for the deer paddle and star



## 🔧 Customization



You can customize various game parameters in `game.js`:



- Ball speed and size

- Paddle dimensions

- Brick layout and colors

- Particle effect properties

- Background animation speed



## 🤝 Contributing



Contributions are welcome! Feel free to submit pull requests or open issues for bugs and feature requests.



## 📝 License



This project is licensed under the MIT License - see the LICENSE file for details.



## 🎮 Try It Out



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



---



Created with ❤️ by [ChanMeng666](https://github.com/ChanMeng666)