Nobody tells you how weird game development gets at 2am when your submarine is clipping through the ocean floor and the leaderboard is submitting scores backwards. This is the honest account of building our first browser-based game—what worked, what broke spectacularly, and what we'd do completely differently next time.
The Stack We Chose
We built on HTML5 Canvas with vanilla JavaScript. No frameworks, no game engine. The decision was intentional: we wanted total control over the rendering pipeline and zero build tool complexity. For a physics-light arcade game, canvas is more than capable.
- Rendering: HTML5 Canvas 2D API
- Physics: Custom gravity and collision logic
- Leaderboard: Supabase (Postgres + realtime)
- Coin economy: localStorage + server validation
- Audio: Web Audio API
🎮 Lesson #1: Start with a working physics loop before building anything else. Every feature you add becomes a physics debugging nightmare if the foundation isn't solid.
The Bug That Almost Broke Us
Level completion. Sounds simple. It was not. When the player cleared level 1, the game would freeze the browser tab for 200–400ms before loading level 2. On mobile, it would sometimes crash entirely.
The culprit was synchronous asset preloading happening on the main thread at the exact moment the level transition fired. The fix: lazy load level assets during gameplay, not at transition. Memory footprint increased by ~15% but the freeze disappeared entirely.
What We'd Do Differently
1. Design the coin economy first. We bolted on the coin system halfway through development. It touched everything—UI, save state, game loop, leaderboard. Designing it upfront would have saved two full days of refactoring.
2. Build for mobile from day one. We started desktop and retrofitted mobile. Touch controls, viewport scaling, and performance optimization are all much harder to add than to design in from the start.
3. Set a "done" definition before starting. Scope creep is real. We added three features we never originally planned because they seemed quick. They weren't. Define MVP and ship it.
What's Next
We're planning a 3D endless runner in Unity/C# as our next project—a proper mobile game with app store distribution. The HTML5 canvas game taught us everything we needed to know about game loop architecture, player feel, and what makes a mechanic addictive. The next one will be built faster and better because of it.