Case study · 08 / 11
A GitHub team game
Fig. 01 — Fort Mason OctodexHover for colour
A monster-collector adventure built as a team during GitHub Day of Learning in San Francisco: catch the twelve Octocats of Fort Mason, in the browser and on the GitHub Universe badge.
Fort Mason Octodex was born at the GitHub Day of Learning workshop, the day before GitHub Universe '26, as a canvas extension for the GitHub Copilot app. The team (Brett Post, Don Ebben, Chanrattnak Mong, Luke Vandekieft and me) laid the groundwork: the Fort Mason map, a first battle system, the chiptune music and the Octocat drawings. I first hooked up the gamepad and the Badger badge, then wrote most of what followed (39 of the 47 commits): a real type-based battle system (Git, Code, Ops, Security), the twelve Octocats redrawn in the Octodex style, Badger mode where the badge becomes a controller and second screen (mini-map, battles, Octodex) over USB, saving, items, trainers, a final boss and its credits, shiny Octocats, thirteen achievements, accessibility settings, touch controls, an installable version that plays offline, every building open to visit with its characters, and a bus ride to GitHub HQ. It all fits in a single HTML file: canvas, Web Audio for the music and sounds, Web Serial for the badge.
Main Features
Technical Challenges
Technologies
Year
Live captures · hover for colour
01A map of Fort Mason: the piers, the Great Meadow, Fort Mason Center where GitHub Universe is held, Alcatraz and the Golden Gate in the distance
02Twelve Octocats to catch, each with its own type, stats and four moves
03Type-based battles (Code beats Ops, Ops beats Security, Security beats Code): critical hits, effects, switching Octocats
04Badger mode: the badge becomes a controller and second screen (mini-map, battles, Octodex) over USB (Web Serial)
05Three trainers, a Merge Conflict boss and credits with your play time
06Shiny Octocats, thirteen GitHub-profile-style achievements and a numbered Octodex
07Every building can be visited, with nine characters, and a bus goes all the way to GitHub HQ
08Keyboard, gamepad, touch screen and badge; remappable keys
09Accessibility: colour-blind palette, less shake and fewer flashes, separate volumes
10Saved in the browser, and an installable version that plays offline
01Building as a team of five, in one day, on a shared codebase
02Fitting a whole game in one HTML file, with no engine or dependency
03Keeping the game and the badge in sync over the serial port: two screens, one state
04Music and sound effects fully synthesised with Web Audio
05Making the game playable with a keyboard, a gamepad, a finger and the badge
Front-end
Back-end
Tools
Tags
#game #html5-canvas #web-audio #web-serial #pwa #github-copilot #github-universe #team-project
Next project
09 / 11
Webana