Skip to content

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.

Notifications You must be signed in to change notification settings

ChanMeng666/html-brick-game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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!

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published