Memory Match (Concentration) is a great first "state machine" game: flip two cards, match or flip back, repeat. The whole thing is ~80 lines of vanilla JS + a CSS 3D flip. Here's a playable build.
🃏 Play it: https://dev48v.infy.uk/game/day17-memory-match.html
The deck
Pick 8 emoji, duplicate them into 16 cards, then shuffle with Fisher-Yates (the only correct shuffle — sort(() => Math.random()-0.5) is biased). Each card tracks value, flipped, matched.
The flip flow
Click flips a card face-up (CSS transform: rotateY(180deg) + backface-visibility: hidden). On the second flip: if the two values match, lock them; if not, flip both back after ~800ms.
The bug everyone hits
During that 800ms flip-back, a fast clicker can flip a third card and corrupt the state. Fix: set a locked flag while the mismatch resolves and ignore clicks until it clears. Also ignore clicks on already-flipped/matched cards.
Win + score
Win when all 8 pairs are matched; track moves + a timer and save a best score in localStorage.
🔨 Full build (deck + shuffle → flip → match/lock → flip-back lock → win) on the page: https://dev48v.infy.uk/game/day17-memory-match.html
Part of GameFromZero. 🌐 https://dev48v.infy.uk
Top comments (0)