Build a complete Frogger arcade game from scratch using TypeScript and HTML5 Canvas.
Difficulty: Intermediate Episodes: 6 Time: ~1h 30min total Prerequisites: Color Switch
Guide a frog across busy roads and a dangerous river to reach home. Dodge cars, hop on logs, and avoid the water in this classic arcade recreation.
- Lane-based level layout with different hazard types
- Moving platforms (logs, turtles) the player rides on
- Multi-lane traffic patterns with varying speeds
- Discrete grid-based player movement
- Lives system with safe-zone checkpoints
| # | Title | Time | What You'll Build |
|---|---|---|---|
| 1 | Project Setup & Lane Drawing | ~15min | Draw road lanes, river lanes, and safe zones |
| 2 | Frog Movement | ~15min | Move the frog one cell at a time with arrow keys |
| 3 | Traffic & Cars | ~15min | Cars scroll across road lanes at different speeds |
| 4 | River, Logs & Riding | ~15min | Logs scroll across river lanes, frog rides on them |
| 5 | Collision & Lives | ~15min | Die from cars or water, track lives, respawn |
| 6 | Home Slots & Polish | ~15min | Fill all five home slots to win, level progression |
The complete source code is at src/games/frogger/.
Continue to Space Invaders — where you'll learn enemy formations and bullet mechanics →