Simon — flash a color sequence, you repeat it, it gets one longer each round. It's a 40-year-old toy and a perfect lesson in timed async, state machines, and the Web Audio API. Here's a playable build in vanilla JS (with real beeps, no audio files).
🟢 Play it: https://dev48v.infy.uk/game/day14-simon.html
The sequence is just an array
Each round, push a random pad (0–3). To "show" it, you flash each pad in order with a delay between them — then hand control to the player.
Timed playback without callback soup
The flash loop is where beginners get stuck. Use async/await with a small sleep(ms) helper so the sequence plays one pad at a time, cleanly, then unlock input.
Tones from nothing
No .mp3 files — the Web Audio API generates each pad's tone with an oscillator. Four frequencies, four pads. (Browsers block audio until a user gesture, so start it on the first click.)
A tiny state machine
Three states: showing, input, over. Clicks only count during input; a wrong pad → game over. That's the whole game.
🔨 Full build (sequence → timed playback → Web Audio tone → compare input → rounds) on the page: https://dev48v.infy.uk/game/day14-simon.html
Part of GameFromZero. 🌐 https://dev48v.infy.uk
Top comments (0)