Build Frogger with AI: from brief to deployable arcade game
Learn how a plain-language brief became a faithful, deployable arcade reconstruction — using Grok, Hermes and GPT for reasoning and content, with Cursor as the coding agent, and a human steering every decision.
What you'll learn
This course walks through the actual build of Frogger — an AI-assisted arcade reconstruction, tile by tile, system by system. You'll see the brief that set the fidelity target, the architecture that supported it, and the game systems that make it playable: roads, rivers, homes, scoring and level progression.
Past the mechanics, you'll cover the parts that make a game feel finished — the Canvas attract-mode animation, synthesised Web Audio music and sound effects, and a real installable mobile PWA with touch controls.
The final module steps back from the code to look at the workflow itself: what an AI coding agent handled well, where it needed correcting, and why human review was the quality system throughout.
Course outline
Nine lessons across four modules, following the real build from brief to deployed game.
FoundationsFoundations
- The brief and the fidelity target — What we are building and why faithful reconstruction matters.
- Architecture and tech stack — TypeScript, Canvas 2D, Web Audio, Vite and a static PWA.
Building the gameBuilding the game
- The game grid and tile-stepped movement — Lay out the board and move the frog tile by tile.
- Roads and rivers: obstacles that kill and carry — Cars, logs, turtles that dive, crocodiles and snakes.
- Scoring, lives, homes and level progression — Homes, the lady-frog bonus, lives and difficulty ramp.
Feel and polishFeel and polish
- The Canvas attract-mode animation — A cabinet-style seven-frog attract sequence.
- Synthesised Web Audio music and sound effects — Generate the music and SFX with the Web Audio API.
- Mobile PWA and touch controls — Installable app, portrait/landscape, on-screen D-pad.
Working with AIWorking with AI
- Human-directed, AI-assisted development — What worked, what did not, and where human review was the quality system.
Ready to build it yourself?
Start with Lesson 1 and follow the same brief-to-deploy path used to build the real game.