HTMX Flappybird

HTMX Flappybird

Server-side Flappybird game engine running at 30 FPS. Built with Go (Fiber), HTMX, SQLite, and custom collision detection.

Go, HTMX, SQLite, Fiber
Started: 2/28/2024
Updated: 8/15/2024
htmx,web,game,go
View Project GitHub

HTMX Flappybird Gameplay Classic Flappybird gameplay powered by HTMX

Overview

This project reimagines the popular mobile game Flappybird using HTMX, proving that even games can be built with a hypermedia-first approach. It's a fun experiment in pushing HTMX beyond typical web application use cases.

Features

  • Server-Side Game Engine - Complete physics and collision detection running at 30 FPS on the server
  • Real-Time Updates - HTMX polling for smooth gameplay (33.3ms poll rate)
  • Persistent Leaderboards - SQLite database with sqlc-generated type-safe queries
  • Dynamic Pipe Generation - Randomized gaps and positions with pipe recycling
  • Session Management - JWT token-based authentication with random guest name generation
  • Concurrent Sessions - Supports multiple simultaneous players with shared leaderboard

Why HTMX for Games?

While games typically require heavy client-side JavaScript, this project explores how much can be accomplished using HTMX's server-driven approach. It's an educational experiment in the limits and possibilities of hypermedia-driven applications.

Technical Implementation

Architecture Stack

  • Backend: Go with Fiber framework
  • Database: SQLite with sqlc for type-safe query generation
  • Frontend: Server-side HTML templating
  • Real-Time Updates: HTMX polling (WebSockets planned for future optimization)
  • Game Loop: Server-authoritative at 30 FPS (~33ms updates)

Game Engine

Physics System:

  • Custom collision detection using bounding boxes
  • Gravity simulation and jump mechanics
  • Pipe collision and point scoring system
  • Background parallax scrolling effect

Game State Management:

  • All game logic calculated server-side
  • Frame-by-frame updates streamed as HTML
  • Score persistence with database integration
  • Guest name generation ("Flying Bird", "Speedy Eagle", etc.)

Performance Features:

  • Poll rate dynamically calculated as 1000/TargetFPS
  • Pipe recycling when off-screen to reduce memory
  • Compression middleware for optimized bandwidth
  • Docker containerized with multi-architecture support

Demo Video

Watch the gameplay demo:

Play Now

Try the game at htmx-flappybird.deastl.com and see how high you can score!