Simon Says Color Sequence Game — HTML CSS JS Snippet

Simon is one of the most enduring memory-game formats in consumer electronics history, and rebuilding it in the browser is a genuinely useful exercise in managing asynchronous timing, game state, and user input validation together. This snippet implements the complete classic loop with four colored quadrant pads: the game plays back a growing sequence of color flashes, the player must repeat it back exactly, a correct repeat extends the sequence by one more random color, and a wrong input ends the game immediately with a final score. The best score persists across browser sessions using localStorage, so returning players always see their personal record.

Modeling the sequence as an array and driving playback with async/await

The entire game state lives in one growing array, sequence, which starts empty and gains one new random color (chosen from COLORS = ['red', 'green', 'blue', 'yellow'] via Math.floor(Math.random() * COLORS.length)) every round. Rather than chaining setTimeout callbacks — which quickly becomes unreadable once you need to flash four, five, or ten pads in order — the snippet wraps each pad flash in a Promise-returning helper, lightPad(color, duration), and awaits them one at a time inside an async function playSequence(). This means the playback logic reads top-to-bottom like synchronous code (for (let i = 0; i < sequence.length; i++) { await lightPad(sequence[i], 480); }) while still being fully non-blocking, and it is trivial to insert a pause between flashes or before the sequence starts by awaiting a small wait(ms) promise-timeout helper.

Locking input during playback

A critical correctness detail is that the four pad buttons must be genuinely unclickable while the sequence is animating — otherwise a fast or accidental click during playback could be misread as the player's first move. The snippet handles this with a combination of a playingBack boolean guard checked at the top of handlePadClick() and setting the actual disabled attribute on every pad button via setPadsEnabled(false) for the duration of playSequence(). Only after the full sequence has finished flashing does acceptingInput flip to true, playerIndex reset to 0, and the pads re-enable, ensuring player input can only ever be interpreted against a sequence that has fully finished displaying.

Validating player input against the sequence

As the player clicks pads, handlePadClick(color) compares the clicked color against sequence[playerIndex] — the expected next color in the sequence. A match increments playerIndex; a mismatch immediately calls endGame(), ending the round on the very first wrong click rather than waiting for the player to finish an incorrect attempt. If playerIndex reaches sequence.length, the player has correctly repeated the entire sequence, so the pads disable again and, after a brief pause, nextRound() pushes one more random color onto the sequence and replays the whole extended sequence from the beginning — the defining "growing memory pattern" mechanic that makes Simon progressively harder.

Best score persistence with localStorage

On page load, loadBest() reads a stored value from localStorage.getItem('simon-best-score'), parses it as an integer (defaulting to 0 if nothing is stored or the value is invalid), and displays it in the Best Score stat tile. Whenever a game ends with a score higher than the currently stored best, saveBest() writes the new value back to localStorage immediately, so the record persists across page refreshes and future browser sessions without needing any backend. The score itself is calculated as sequence.length - 1, since a wrong click on round N means the player successfully completed N-1 full rounds before failing.

Visual feedback: quadrant layout and lit-pad glow

The four pads are arranged as CSS-rounded quadrants of a circle using border-radius set independently on each corner (100% 0 0 0 for the top-left pad, and so on), recreating the classic circular Simon console shape entirely with CSS, no image assets required. A center circle houses the Start button. When a pad is part of an active flash — whether during automated playback or as instant feedback on a player click — it gains a .lit class that boosts opacity, applies a filter: brightness(1.35) saturate(1.2), and adds an inset glow using box-shadow: 0 0 24px currentColor inset, giving each color pad a distinct colored glow that matches its own hue.