Project Overview
Proton Blaster is a high-performance browser arcade shooter. The game is inspired by retro arcade shooters and designed to run smoothly at 60 FPS directly within the browser tab. It features fast-paced keyboard/mouse shooting mechanics, escalating enemy waves, powerup grids, and vibrant retro neon-colored rendering effects.
The build was compiled to compile with standard publishing requirements for browser portals like Poki, CrazyGames, and Itch.io.
Architecture & Core Tech
Unlike standard web apps built with DOM manipulation, Proton Blaster is driven entirely within an HTML5 Canvas using a custom JavaScript game engine loop.
System Data Flow
- Game Loop: Orchestrated via `requestAnimationFrame` with delta-time calculations. This guarantees that game physics and speed are consistent regardless of CPU speed or screen refresh rates (e.g. 60Hz vs 144Hz).
- Entities System: All objects (player, projectiles, enemies, particles) are defined as ES6 classes and stored in managed arrays, allowing automated creation, rendering, and removal.
- Collision Solver: Utilizes rectangular bounding boxes (AABB) and circular geometry distance calculations to detect weapon hits instantly.
Key Features & Implementation
- Delta-Time Physics: Prevents game-speed adjustments on faster hardware, securing fair competitive gameplay.
- Particle Splatters: Physics-bound neon particles spawn upon enemy destruction, drifting and fading to add visual crunch.
- Web Audio Pool: A preloaded sound pool that overlays sound effects (explosions, laser fire) without audio lags.
- Local High-Score persistence: Saves user performance scores inside localStorage.
Key Lessons & Takeaways
Building Proton Blaster offered crucial lessons in browser rendering optimizations. Garbage collection issues are a common cause of game stutters. To avoid this, I utilized object pooling concepts, reusing projectile and particle instances rather than instantiating and destroying objects repeatedly.
Additionally, keeping physics state math separate from draw code made collision checking and game state management far more reliable and easier to modularize.