Bubble Shooter — HTML5 Bubble Pop Game

A polished, fully featured HTML5 bubble-shooter game built for commercial distribution. Zero external JavaScript dependencies. Works on any device, in any modern browser, straight from a static file host.

Overview

Bubble Shooter is a classic match-3 bubble-popping game: aim, shoot, and match three or more same-colored bubbles to clear them from the board before they reach the danger zone. It ships with three difficulty tiers plus an endless Free Mode, 50 hand-shaped levels per tier, 11 unlockable ball skins, a coin economy, a daily streak system, an integrated ad framework, and four selectable color themes — a complete, ready-to-ship product.

About the Game

Entry point is index.html — no build step required
Pure vanilla HTML5, CSS3, and ES6+ JavaScript — no libraries, no frameworks, no package manager
Fully responsive layout — crisp rendering at every screen size and pixel density
Procedural Web Audio API sound engine — no audio files bundled, every sound effect is synthesized in code
All game state persisted to localStorage with graceful degradation when storage is unavailable
Supports mouse, touch, and stylus input
Canvas-based rendering for the game board and shooter, with a hex-offset bubble grid

Themes

Four color themes are available, each with matching accent colors across every screen. Purple is free by default; the other three are unlocked with in-game coins, using the same buy-card flow as ball skins. The active theme is saved to localStorage and applied instantly on every return visit.

Purple — deep violet with electric purple accents (default, free)
Black — pure dark minimalism (60 coins)
Parrot — vivid jungle greens with lime highlights (80 coins)
Pink — soft rose tones with warm blush highlights (80 coins)

Levels & Difficulty

150 total levels across three difficulty tiers, plus an unlimited-length Free Mode
50 Easy levels (5 bubble colors), 50 Medium levels (6 bubble colors), 50 Hard levels (7 bubble colors)
Free Mode uses 4 bubble colors and plays as an endless session with no level limit
Each level’s bubble layout is procedurally generated from a seeded shape (dome, wave, funnel, diamond, and more) so every level has a distinct silhouette
Level progress and completion state are saved per-difficulty in localStorage
A Level Select overlay lets players jump to any unlocked level within a difficulty
Levels are rated 1–3 stars based on the score earned when the level is cleared

Ball Skins

11 selectable ball skins, unlocked with in-game coins or free by default. Each skin re-textures every bubble on the board, in the shooter, and in the next-ball preview.

Classic — shiny gloss spheres (free by default)
Car Tire, Bike Tire, Golf Ball, Soccer Ball — sports-themed textures
Crystal, Lava Ball, Galaxy, Candy, Neon Ring — stylised material textures
Fruit Bowl — six real fruit photos, one per color

How to Play

Select a difficulty (Easy, Medium, Hard, or Free) and a level from the lobby.
Aim the shooter with the mouse or a touch drag, and tap/click to fire the current bubble.
Match 3 or more bubbles of the same color to pop them and any bubbles left floating without support.
Clear the board (or reach the level’s target) before any bubble crosses the danger zone.
Tap the shooter itself to swap the current bubble with the next one in queue.

Controls

Aim & Shoot: Click/tap anywhere on the board to aim, click/tap again (or drag and release) to fire.
Swap: Tap the shooter cannon to swap the current and next bubble.
Bomb Bubble: Clears a radius of bubbles around the shooter’s target point. Starts with a small inventory; more are earned by watching a rewarded ad. The button greys out (without disappearing) once the inventory reaches zero.
Home: Returns to the lobby from the in-game bottom bar.
Restart: Restarts the current level from the beginning.
Pause: Pauses the game and opens the pause menu (resume, restart, quit).

Settings

All settings are accessible from the lobby settings button and are saved automatically to localStorage.

Sound Effects: Toggle procedural game sounds on or off.
Volume: Adjust the sound effects volume level.
Aim Guide: Toggle the dotted/beam trajectory line.
Laser Style: Choose between Beam, Dotted, or Neon aim-line styles.
Full Trajectory: Extend the aim line all the way to the landing point.
Particle Effects: Toggle the pop-burst particle animation.
Fall on Match: Toggle whether matched bubbles fall away instead of exploding in place.
Reset All Progress: Clears all saved progress, coins, and settings from localStorage.

Ad Monetization

Bubble Shooter ships with a fully integrated, configurable ad system ready to connect to any ad network.

Important: Ad network integrations such as Google AdSense, AdMob, and ironSource are third-party external services not affiliated with or included in this product. Each network operates independently and has its own account registration process, eligibility requirements, approval policies, and potentially associated costs. Bubble Shooter provides the ad slot infrastructure only — buyers are solely responsible for obtaining their own accounts, meeting each network’s requirements, and complying with their respective terms of service.

Ads are displayed in a full-screen overlay with a sandboxed iframe, a countdown timer, and a skip button that appears after 5 seconds (configurable).
Ad content is loaded from script/ads/ad.html — the file contains clearly marked comment blocks that show exactly where to paste your ad network’s loader script and ad unit code (Google AdSense, AdMob Web, ironSource, Unity Ads, etc.).
Ad completion is signaled from the ad slot via window.parent.postMessage('AD_COMPLETE', '*').
Ad trigger points: the first game start of a session, roughly every 3rd game start after that (interstitial), quitting back to the lobby, and the “watch an ad” prompts for bonus bomb bubbles or coins.
Watching an ad rewards 50 coins, or 3 bomb bubbles, depending on which prompt is used.
Players can spend coins in the shop to disable ads for their current browser session.

Tech Stack

Technology	Details
HTML5	Semantic markup, all screens in one file
CSS3	Custom properties, flexbox, grid, keyframe animations, backdrop-filter
Vanilla JavaScript (ES6+)	Arrow functions, optional chaining, Canvas 2D rendering, Web Audio API
Google Fonts (CDN)	Bebas Neue, Space Grotesk, Orbitron, Rajdhani, Share Tech Mono, Barlow Condensed, DM Sans, JetBrains Mono — loaded via CDN at runtime
localStorage	All game persistence: progress, coins, settings, theme, ball skin, streak, owned items
No WebGL, no game engine, no npm dependencies	Zero external JavaScript libraries; board and shooter rendering uses the HTML5 Canvas 2D API

Requirements & Compatibility

Any modern browser: Chrome 88+, Firefox 85+, Safari 14+, Edge 88+, Samsung Internet 14+
No server-side code required — deploy to any static file host (GitHub Pages, Netlify, S3, cPanel, etc.)
No installation, no build step, no CLI tools required
Internet connection required for Google Fonts (loaded via CDN) to render correctly
Fully responsive — adapts to desktop, tablet, and mobile screens
Internet Explorer is not supported
All localStorage operations are wrapped in try/catch for safe degradation in private browsing mode

Other Games You Will Like

Bubble Shooter | HTML5 Game