Bubble Pop
Bubble Pop is a browser-based canvas game built entirely with vanilla JavaScript — no libraries, no frameworks, no build tools. Bubbles rise from the bottom of the screen in a gentle sine wave. Click or tap them before they escape. Miss too many and it’s game over.
The project introduces the HTML5 Canvas API, a game loop built on requestAnimationFrame, entity classes for bubbles and particles, and browser storage for a persistent high score.
Play the finished game | View the source
What you will build
Section titled “What you will build”A fully playable game with:
- A canvas rendered at 480 × 640 with gradient bubbles and particle pop effects
- Sine-wave bubble movement that speeds up as levels increase
- Click and touch input that scales correctly to any screen size
- A start screen, game-over screen, and
localStoragehigh score - Three source files:
index.html,style.css, andpop.js
Prerequisites
Section titled “Prerequisites”You should have finished the fundamentals track before starting this project:
- HTML — you will write semantic structure and use
idattributes to wire the JS - CSS — you will use flexbox, custom properties, and pseudo-classes
- JavaScript — you will use classes, closures, and the Canvas 2D API
Git is helpful but not required for this project.
How the guide works
Section titled “How the guide works”The build is split across five stages. Each stage adds one layer of the game and ends with a working checkpoint you can open in the browser.
Project files
Section titled “Project files”| File | What it does |
|---|---|
index.html | Game shell — canvas, HUD overlay, start screen, and game-over screen |
style.css | Dark background, gradient buttons, and absolutely-positioned overlay screens |
pop.js | All game logic — POP namespace object plus Bubble and Particle classes |
Fork and follow along
Section titled “Fork and follow along”The starter repository is on GitHub. Fork it to your own account so you have a place to commit your work at each stage.