Play Signal Memory

A colorful memory game built with plain JavaScript. Watch the signal pattern, then repeat it. Play solo, or duel a friend on the same device.

This is a real, playable game, not a screenshot. The pads flash a sequence with sound, and you tap them back in order. It is built with no library and no canvas, just four buttons, CSS, and a small state machine, which makes it a clean example of event driven game logic. After you play, the sections below show how it works.

How to play

The pads light up one at a time in a sequence, each with its own tone. Watch the whole pattern, then tap the pads in the exact same order to repeat it. Get it right and the sequence grows by one pad for the next round, so it gets harder as your memory is pushed. In Solo mode you are chasing your own best streak. In the 2 player duel, you and a friend take turns repeating a sequence that keeps growing, and the first person to tap a wrong pad loses.

How this game is built

This is a small state machine, which makes it a clear example of how game logic and rendering stay separate.

The sequence as data

The whole game is one array of pad numbers. Everything else, the lights, the score, the turn, is read from that array, the single source of truth idea behind game state management.

Playing the pattern with timing

To show the sequence, the code lights each pad for a moment with a gap between, using timers rather than a continuous loop. Tuning those delays is what makes the pattern readable instead of a blur.

Reading the taps

When it is your turn, each tap is compared against the next expected pad. A pointer event handles mouse and touch with one code path, the input idea from handling game input.

Win and lose, and turns

One wrong tap ends the round. Solo records how far you got, and the duel passes the growing sequence between two players until someone misses, all plain phases of state.

Sound with the Web Audio API

Each pad plays a short tone generated in the browser with the Web Audio API, no audio files needed. On phones the sound switches on after your first tap, because browsers require a gesture before playing audio.

Why order matters in real systems

Reconstructing a sequence is not just a game. Real apps are driven by events that arrive in a sequence, and the order often changes the result, a click before data loads behaves differently from the reverse. Systems built on signals and subscribers, like the patterns in pub and sub messaging and event driven UI, spend real effort keeping events in the right order. This game turns that idea into something you can feel: miss the order, and it breaks.

Frequently asked questions

How do I play Signal Memory?

Watch the pads light up in order, then tap them in the same order. Each round adds one more pad to remember. A single wrong tap ends the round.

What is the 2 player duel?

Two players share one device and take turns repeating a sequence that grows each turn. The first player to tap a wrong pad loses, so it rewards steady memory under pressure.

Is there sound, and why is it silent at first on my phone?

Yes, each pad has its own tone made with the Web Audio API. Phone browsers block audio until you interact, so the sound starts working right after your first tap on a mode button.

How does this relate to real programming?

It mirrors event driven systems, where events arrive in a sequence and the order matters. Repeating the pattern is like processing ordered signals correctly, the core of pub and sub and observer patterns.