Pop World — Building an Arcade Bubble Shooter with Phaser 3
How I built a 44-level arcade game inspired by the classic Bust-a-Move, using Phaser 3, TypeScript, and Capacitor for mobile.
The Project
Pop World is a web and mobile arcade game where you shoot arrows at balloons that split into smaller ones as you hit them — a direct nod to the classic Bust-a-Move / Puzzle Bobble franchise. The twist: 44 levels spread across 5 continents, each set in a famous city with its own color palette and world theme.
The game features a punk cartoon character named Mia, 4 difficulty modes, procedural Web Audio SFX, and a full mobile port via Capacitor.
Why Phaser 3?
Phaser 3 is the de facto standard for 2D web games. It ships with Arcade Physics, a robust scene system, and excellent TypeScript support. Given the game's requirements — precise collision detection on splitting balloons, per-level tilemap layouts, and mobile touch controls — it was the obvious choice over a raw Canvas implementation.
The project runs on Vite for fast HMR during development.
npm run dev # localhost:3001
Core Mechanic: Balloon Splitting
The core challenge is the balloon split chain. When a large balloon is hit, it splits into two medium ones. Those split into two small ones. Each size has its own radius, velocity, and point value.
The key is managing the physics group carefully so that spawned balloons inherit the parent's horizontal velocity direction but always bounce upward — preventing the "wall hugging" bug that plagued early iterations.
Levels: 44 Cities, 5 Continents
Each level is tied to a real city — Paris, Tokyo, Rio, Lagos, Sydney. The villes.md data file maps each level to:
- GPS coordinates
- A dominant color for the world theme
- A background scene
Levels are grouped into 5 world packs. Completing a world unlocks the next continent.
Weapons & Power-ups
Five weapons unlock progressively:
| Weapon | Effect |
|---|---|
| Arrow | Standard single shot |
| Double Arrow | Two simultaneous shots |
| Shotgun | Wide spread burst |
| Repel | Pushes balloons away |
| Crampon | Creates a vertical wall on the ceiling |
Power-up drops are randomized on balloon destruction: shield, freeze, extra life, time bonuses (+15s / -15s), and a nasty one that multiplies all balloons on screen.
Mobile with Capacitor
The web build wraps into a native Android app via Capacitor. Mobile-specific features:
- Dedicated touch buttons (left, right, shoot, kick)
- Landscape-only orientation lock
- Scale mode
ENVELOP— fills screen without black bars - Haptic feedback on balloon impacts
- PWA installable on iOS
// capacitor.config.ts
const config: CapacitorConfig = {
appId: 'com.kmoussouni.popworld',
webDir: 'dist',
}
Procedural Audio
All sound effects are generated via the Web Audio API — no audio files to load. Each weapon, balloon pop, and bonus pickup has its own synthesis chain (oscillators, filters, envelopes). This keeps the bundle light and the experience consistent across devices.
Try It
The game is playable now at demo.kmoussouni.dev/popworld — desktop and mobile.
What's Next
The game is currently in Phase 4 (debug & polish). Remaining work: 6 world music themes, visual polish on later levels, and Google Play submission. The bones are solid — the gameplay loop is tight and the 44-level structure is fully playable.