Building Kiwi Defenders: Why We Chose Vanilla HTML5 Over Heavy Game Engines
A deep dive into the engineering decisions behind our lightweight, 60-FPS web tower defense game.
When development on Kiwi Defenders began, one decision shaped everything else: keep the game lightweight, fast, and instantly playable.
Fast Loading Was a Core Design Goal
Instead of relying on large game engines like Unity or Godot, the entire project was built using vanilla JavaScript and the native HTML5 Canvas API. That approach gave us direct control over performance, rendering, memory usage, and mobile optimization from day one.
For browser players, this matters more than ever. Nobody wants to wait through massive downloads before testing a game. The goal was simple: open the page and start defending New Zealand within seconds.
Play the pure HTML5 version of Kiwi Defenders here ➔
Engineering a Stable 60 FPS Experience
One of the biggest technical challenges in tower defense games is maintaining smooth gameplay during high-unit chaos. By the later campaign stages, dozens of projectiles, particle effects, enemies, summons, and animations can all be active simultaneously.
To handle that load, the engine uses a carefully optimized requestAnimationFrame loop that separates gameplay logic from rendering operations. This allows combat calculations to remain stable even when the screen becomes visually intense during Doomsday-level waves.
The result is responsive controls and fluid combat performance across desktop browsers, tablets, and lower-end mobile devices.
Lightweight Collision Detection That Scales
Rather than implementing expensive physics simulations, Kiwi Defenders relies on streamlined AABB (Axis-Aligned Bounding Box) collision systems.
This minimalist approach powers:
- Melee hit detection
- Projectile impacts
- Air-unit targeting
- Splash-damage calculations
- Defensive wall interactions
Because the system remains computationally cheap, large enemy swarms can exist on screen without introducing severe frame drops.
Responsive Design for Cross-Platform Play
Modern browser games must work everywhere. The game’s responsive canvas system dynamically scales the battlefield while preserving aspect ratio and gameplay clarity.
Combined with optimized WebP sprite sheets and compressed audio assets, the experience remains visually clean without bloating loading times.
Whether players launch the game on a widescreen desktop monitor or a mobile browser in landscape mode, the battlefield stays centered, sharp, and readable.