Bubble Game

A simple browser-based reflex game where players pop randomly generated balloons to earn points.

Overview

This project is a lightweight vanilla JavaScript game with a styled UI and difficulty modes.

• Enter your player name at startup
• Start and stop rounds at any time
• Pop balloons to increase your score
• Switch between Easy, Medium, and Hard difficulty
• Save the best score in the current session
• Play pop sound effects on each hit

How It Works

• Balloons are created at random positions inside the game area.
• Balloon colors are randomized for visual variety.
• Difficulty controls balloon spawn interval:
  • Easy: 1500ms
  • Medium: 1000ms
  • Hard: 500ms
• Score per balloon:
  • Easy: +1
  • Medium: +2
  • Hard: +3

Controls

• Start: begins spawning balloons
• Stop: pauses the game and shows overlay
• Reset: clears active balloons, resets current score, and updates high score if beaten
• Easy / Medium / Hard: sets difficulty and spawn speed

Tech Stack

• HTML5
• CSS3
• Tailwind CSS (via CDN for utility classes)
• Vanilla JavaScript (DOM + events + timers)

Project Structure

bubble-game/
├─ index.html
├─ js/
│  └─ app.js
├─ css/
│  ├─ import.css
│  ├─ font/
│  │  └─ fontFamily.css
│  └─ style/
│     └─ style.css
├─ audio/
│  └─ machine-gun.mp3
├─ icon/
│  └─ github.svg
└─ LICENSE

Run Locally

No build step is required.

1. Clone or download this repository.
2. Open index.html in your browser.

For best results, use a local static server (optional), for example with VS Code Live Server.

License

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