Christen Dijoux — Portfolio©2026
000

Case study · 08 / 11

Fort Mason Octodex

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

In the wild

Live captures · hover for colour

What it does

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

How it was solved

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

Stack

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