Inspiration

I wanted to build a retro Snake game with a story mode. In Zuma Revenge, in the next chapter you find out who the opponent is, and they say something like, "That previous guy was my brother. I'm going to make you pay." Or an old opponent comes back and says, "I'm back, and I'm stronger." I wanted that kind of story structure. It's an idea I've had in my head for a while, and I just wanted to get it out there.

What I learned

I wanted to learn more about Canvas, Web Audio and the game loop, and to get HISSTORY working.

How I built it

  • TypeScript, the Canvas 2D API, the Web Audio API and Vite, with no game engine and no server
  • A fixed-timestep game loop (120 updates per second), so the snake moves at the same speed on every device
  • All 15 songs and every sprite are made in code: a small NES-style chiptune synth, and pixel art written as text grids
  • Built in 9 slices, each one playable and tested before the next: Classic, the first boss, the home screen and music, Story mode, saving, then Acts I to IV
  • 124 unit tests and 44 browser tests, deployed to GitHub Pages by GitHub Actions

Challenges

  • Coiling was too hard: in the first play-test, it required too much precision. I changed the rule from sealing the boss in a perfect loop to circling about 300° around him, made the board cells bigger (24×18 down to 20×15), and gave the boss longer windows.
  • Level starts facing walls: Chapter 2's first start position crashed the snake within a second. Every chapter now has a test checking for a clear run-up.
  • Text too wide for phones: long hints overflowed small screens. They now use a compact font, with a test limiting line length.
  • The finale's crumbling arena never crumbled: if the snake touched the edge, the crumble waited forever. Now it crumbles on schedule and only spares the cells the snake is on.
  • The build was failing on GitHub: browser tests that passed on my machine timed out on GitHub's servers, so the deploy pipeline now runs the unit tests and builds without them.

Built With

Share this project:

Updates

Submission history