Overview
I created an unconventional browser game using HTMX and Go that renders game frames server-side rather than using traditional canvas or WebGL approaches. This is something that should send any experienced web dev into a coma.
What is HTMX?
HTMX is a JavaScript library enabling dynamic web content without relying on heavy frameworks like React or Vue. Rather than requesting JSON and building UI client-side, HTMX fetches pre-rendered HTML fragments, significantly reducing client-side computational overhead.
How the Game Works
The game operates on a simple principle: upon initialization, the client receives an HTML document containing game elements (background, pipes, player). Every ~30ms, the client requests a new frame with CSS positioning styles. Server-side logic multiplexes user sessions to their respective game states, handling physics, collisions, and pipe movement centrally.
Key Challenges Encountered
Thread Safety
Managing concurrent access to game state across multiple simultaneous players required Go's sync.Map and mutexes to prevent data corruption.
Network Delay
Real-time gameplay at 30fps struggles with latency. The baseline achieves 30fps locally, but degrades to 10-15fps across distant regions (California to Virginia).
Deployment Costs
Each frame consumes 2KB uncompressed (1.6MB/minute per user). A single abusive user requesting 3,000 frames/second could cost $155.52 monthly in egress charges alone.
Motivation
I undertook this project to explore unconventional architectural thinking and engage with enterprise-level challenges despite handling only 1,000-1,500 monthly users in production.
Resources
Repository: GitHub - flappybird-htmx
Live Demo: htmx-flappybird.deastl.com