Projects · · 1 min read
What a memory match game taught me about state
A simple card game is a great way to learn how state changes and events work together.
My Memory Match game looks simple, but it forced me to think carefully about state: which cards are flipped, which are matched, and what is allowed to happen next.
State first, screen second
The biggest lesson was to decide what the game needs to remember before drawing anything. Once the state was clear, the screen simply followed it.
const state = {
flipped: [],
matched: [],
locked: false,
};Events need rules
Clicking fast, clicking the same card twice, clicking while two cards are being compared — every one of those is a bug waiting to happen. Writing the rules down made them easy to handle.
Most bugs are just a missing rule about what should happen next.