When building an arcade boss-battle game for the mobile web, the browser is an unforgiving environment. You have no install screen to hide a 50 MB download, no background thread to unpack heavy archives, and no guarantee that the player is on a desktop GPU. Every extra megabyte costs you players before the title screen even renders.
For Fight The Dragon, the goal was an immediate, responsive arcade duel against five elemental dragons. You dodge and parry breath attacks with a split-second shield, lock onto targets with tactile crosshair controls, and gamble for loot between rounds.
The entire architecture, code implementation, and tooling workflow was designed, developed, and shipped inside Antigravity using the Gemini 3.7 model. Operating within Antigravity allowed rapid experimentation across game physics, procedural audio synthesis, and mobile controls, turning architectural ideas into a production game in hours.
👉 Launch and Play Fight The Dragon Live in Your Browser
(Instant play, no download or install required, touch and desktop ready)
The Stack at Your Fingertips
| Layer | Selected Technology | Why Chosen | What Was Rejected |
|---|---|---|---|
| Engine | Phaser 3 (3.88.2) | Sub-second cold boot, tiny runtime footprint, stable Canvas fallback | Unity / Godot 4 (heavy 15 to 30 MB Wasm binaries) |
| Audio | Procedural Web Audio API | Zero audio asset payload, sample-accurate timing, no decode stalls | MP3 / WAV sprite files (heavy 5 to 15 MB audio payloads) |
| Tooling | TypeScript + Vite | Monomorphic V8 optimizations, instant HMR, multi-page studio build | Webpack (slow builds) or Vanilla JS (runtime bugs) |
| Physics | Phaser Arcade Physics | Lightweight AABB collision checks, zero CPU overhead at 60 FPS | Matter.js or Box2D (unnecessary polygon math) |
| Controls | Dual-thumb crosshair + shield | Eliminates screen occlusion, stops misfires, enables parry timing | Screen-tap shooting (chaotic button-mashing) |
| Delivery | Cloudflare Pages + Quick Tunnels | Instant global edge CDN, zero-config HTTPS testing on physical phones | Heavy app stores or manual staging servers |
1. Engine: Phaser 3 over Compiled Wasm (Godot / Unity)
The first choice was whether to export a native engine to WebAssembly or use a web-native JavaScript framework.
Godot 4 and Unity offer rich visual editors, but their browser exports carry heavy penalties:
- Download sizes start at 8 MB and often exceed 25 MB compressed. On mobile networks, this means 5 to 15 seconds of waiting at a loading bar.
- Compilation and initialization of large WebAssembly modules cause noticeable thread lockup on budget mobile chips.
- Multithreaded Wasm exports require custom server isolation headers (
Cross-Origin-Opener-PolicyandCross-Origin-Embedder-Policy), complicating distribution inside webviews or iframes.
Phaser 3 weighs roughly 900 KB uncompressed (under 250 KB gzipped). It boots in less than 500 milliseconds, automatically negotiates between WebGL2 and Canvas 2D based on device capabilities, and runs natively on the browser event loop without compilation overhead.
2. Audio: Procedural Web Audio over MP3 Asset Packs
In most 2D browser games, audio files account for 60% or more of total asset weight. A full sound effects suite and background tracks can easily add 10 MB of compressed audio. Worse, decoding multiple compressed MP3 files into uncompressed PCM buffers at startup causes frame stutter.
To eliminate this overhead entirely, the audio engine runs on custom procedural synthesis built on the Web Audio API without loading external audio files.
All combat sounds are synthesized algorithmically at runtime:
- Laser fire uses a frequency-swept sawtooth oscillator sliding exponentially from 880 Hz down to 110 Hz in 150 milliseconds.
- Explosions use a white-noise buffer shaped by a low-pass biquad filter that sweeps down from 800 Hz to 50 Hz.
- Shield deflections trigger dual-frequency tone pulses (triangle wave followed by sine wave) to produce a crisp metallic parry sound.
The benefits at a glance:
- Sound asset download size: Exactly 0 bytes.
- Audio decode memory cost: 0 megabytes.
- Timing: Scheduled on
AudioContext.currentTime, a hardware clock unaffected by garbage collection pauses.
3. Tooling: TypeScript, Vite, and the Dual-Entrypoint Pattern
Using TypeScript gives the compiler full visibility over game state objects. In V8 and modern JavaScript engines, objects with consistent property order and types generate monomorphic hidden classes. This avoids dynamic property lookups during 60 FPS update loops.
Vite serves as the bundler, configured to build two distinct application targets simultaneously:
- The production game: The lean, optimized player runtime serving the live game.
- The interactive studio sandbox: A five-tab testing hub where collaborators can tune boss attack variables, test soundboard frequencies, preview font pairings against HUD meters, and inspect art assets without playing through the game levels.
This dual-entrypoint setup allowed immediate testing of boss variables and audio envelopes in isolation, speeding up gameplay balancing.
4. Physics: Arcade Physics over Heavy Rigid-Body Engines
Games frequently over-engineer physics by adopting full rigid-body libraries like Matter.js or Box2D. These engines simulate continuous polygon collisions, rotational friction, restitution, and compound joints.
Fight The Dragon is an arcade boss combat game. It does not need realistic tumbling rocks or ragdoll joints. It needs fast, dependable collision checks between player bullets, dragon hitboxes, and incoming fireballs.
Phaser’s built-in Arcade Physics uses Axis-Aligned Bounding Box (AABB) checks. Because the math avoids rotational matrix calculations, collision resolution takes less than 0.1 milliseconds per frame, leaving virtually the entire 16.6-millisecond frame budget for visual rendering and particle effects.
5. Controls: Decoupled Crosshair Aiming over Screen Taps
Early prototypes used simple screen-tap shooting: tapping the dragon fired a bullet. In testing, this mechanic broke down:
- The player’s hand covered the boss, hiding incoming fireball animations.
- Screen taps triggered unintended browser gestures on mobile devices.
- Combat devolved into chaotic button-mashing without tactical pacing.
The controls were restructured to decouple aiming from firing:
- Left hand: Controls crosshair reticle position using mouse coordinates on desktop or a virtual thumb joystick on mobile.
- Right hand: Operates a dedicated fire button that lights up with visual target-lock feedback when the crosshair overlaps the dragon.
- Defensive shield: A hold-to-guard shield mechanic allows players to parry incoming boss fireballs, shifting combat into a rhythm of precision aiming and defensive timing.
6. Testing & Deployment: Cloudflare Tunnels and Edge Hosting
Desktop browser emulation cannot accurately test mobile browser quirks. iOS Safari restricts Web Audio playback unless triggered by a trusted user gesture over HTTPS, and multi-touch thumb tracking often clashes with system navigation swipes.
To solve this, testing was handled through an automated script pairing the local Vite development server with Cloudflare Quick Tunnels. Running a single command generated an instant public HTTPS URL. Scanning a terminal QR code on physical iPhones and Android devices loaded the live development build with hot-reloading, making it possible to verify touch ergonomics and audio timing on real hardware within seconds.
For production, the compiled static assets deploy directly to Cloudflare Pages. With no server runtime, database, or container overhead, global edge distribution ensures cold-load times under two seconds anywhere in the world.
Built with Antigravity and Gemini 3.7
Developing a browser game typically demands juggling separate tools for asset generation, audio synthesis, game loop coding, and mobile testing. In Fight The Dragon, this entire engineering cycle was executed within Antigravity using the Gemini 3.7 model:
- System architecture and stack trade-off evaluations were reasoned and planned directly in chat.
- The procedural Web Audio synthesis engine was mathematically modeled and implemented in TypeScript with zero external audio assets.
- Dual-entrypoint bundling and Cloudflare tunnel automation scripts were scaffolded and verified within the unified workspace.
- Combat pacing refinements, such as target-locking crosshairs and evasive boss teleportation, were iterated through continuous agentic feedback loops.
Production Metrics Summary
- Production Bundle Size: Under 1.5 MB gzipped (including all stage art, UI sprites, and game code).
- Audio Payload: 0 bytes (100% procedural Web Audio synthesis).
- Cold Startup Time: Under 800 milliseconds on 4G mobile connections.
- Target Frame Rate: Stable 60 FPS across desktop, iOS Safari, and Android Chrome.
- Built With: Antigravity + Gemini 3.7
- Source Repository:
[email protected]:ihsanberahim/fight-the-dragon.git
Experience the Game Live
Ready to feel the combat rhythm, split-second shield parries, and procedural Web Audio effects firsthand?
👉 Play Fight The Dragon Now in Your Browser
(Loads in under a second. Compatible with desktop browsers and mobile touch screens.)