Memory Match — also known as Concentration, Pairs, or Pelmanism — is one of the oldest and most widely studied educational games. In its traditional form, pairs of cards are placed face-down in a grid; players flip two cards at a time, trying to find matching pairs based on remembered positions. Its simplicity makes it accessible to all ages, and its cognitive demands — working memory, spatial reasoning, attention — make it a legitimate brain training tool. For a developer, implementing it is a satisfying project that covers card shuffling algorithms, state machines, CSS animations, and timing logic.
The Cognitive Science of Memory Match
Memory Match exercises working memory — the system that temporarily holds and manipulates information in active use. Research consistently shows that working memory capacity correlates with academic achievement, problem-solving ability, and fluid intelligence. Games that require holding card positions in memory while actively searching for matches provide genuine working memory training in an engaging format.
The game also trains spatial memory (remembering where things are in a two-dimensional space), episodic memory (associating a stimulus with a time and place — "I just saw that card a few flips ago"), and attentional control (suppressing the impulse to flip cards randomly and maintaining a systematic search strategy). These are transferable cognitive skills, not just game mechanics.
Difficulty scales naturally by increasing the grid size. A 4×4 grid (8 pairs, 16 cards) is accessible to children. A 6×6 grid (18 pairs) is challenging for adults. An 8×8 grid (32 pairs) is genuinely demanding. Research on working memory capacity suggests most adults can hold 4–7 items in working memory simultaneously, which is why grids beyond 4×4 require strategy rather than pure memorisation.
Fisher-Yates Shuffle for Card Randomisation
Card shuffling is a foundational operation in any card game implementation. The Fisher-Yates shuffle (also called the Knuth shuffle) is the standard algorithm for generating a uniformly random permutation of an array. It works by iterating from the last element to the first, swapping each element with a randomly selected element at or before its position.
The Fisher-Yates shuffle in JavaScript: starting with an array of 2N values (N pairs), iterate from index n-1 down to 1. For each index i, generate a random integer j in the range [0, i] inclusive. Swap the elements at positions i and j. After completing the iteration, the array is in a uniformly random order — every permutation is equally likely. This is a critical property for a fair game: if the shuffle is not truly uniform, some card distributions are more likely than others, which experienced players could potentially exploit.
Using Math.random() for the random index generation is acceptable for a game context — the statistical bias is negligible for this purpose. For cryptographic applications where truly uniform distribution matters, use crypto.getRandomValues() with a rejection-sampling approach to avoid modulo bias. Memory Match is not a security application, so Math.random() is fine.
Game State Machine
A Memory Match game is elegantly modelled as a state machine. The states are: Idle (no cards flipped, waiting for input), OneFaceUp (one card flipped, waiting for a second), Evaluating (two cards flipped, checking for a match — input blocked), Matched (matched pair stays face up, returning to Idle), Unmatched (non-matching pair about to flip back — input blocked during the reveal delay), and GameOver (all pairs found).
The Evaluating and Unmatched states exist to handle the timing around match checking. When two cards are flipped, the player needs a brief moment to see both cards before they're hidden again (if they don't match). A 1–1.5 second delay during which input is blocked gives the player time to register and remember the unmatched cards' positions. Without this delay, the game would flip non-matching cards back immediately, making it impossible to learn from the reveal.
Input blocking during Evaluating and Unmatched states is critical. A common bug in naive implementations: the player can flip a third card while the evaluation delay is running, corrupting the game state. The state machine pattern naturally handles this: if gameState !== 'Idle' && gameState !== 'OneFaceUp', ignore all click events. This single guard prevents all invalid state transitions.
Card Flip Animation
The card flip animation is a CSS 3D transform: rotate the card 90 degrees around the Y axis (showing only the card edge), swap the card face from the back image to the front image at the midpoint, then rotate back to 0 degrees. The two halves of the animation are timed so the face swap happens when the card is edge-on and invisible, making the transition appear seamless.
Implementation using CSS transitions: the card element has transform-style: preserve-3d and contains two child elements — the front face and back face — both with backface-visibility: hidden and the back face rotated 180 degrees. Toggling a CSS class on the card element applies a rotateY(180deg) transform with a CSS transition, creating a smooth flip that swaps which face is visible.
Scoring and Timer Systems
A Move counter increments every time two cards are flipped (regardless of whether they match). Lower move counts indicate better performance — the player remembered more positions and made fewer wrong guesses. A timer measures elapsed time from first flip to final match. Combining moves and time into a single score requires a formula: time-and-move scores can weight the two factors based on their relative importance, or a simpler approach ranks by moves first and uses time as a tiebreaker.
High score persistence using localStorage provides a motivating baseline for repeat play. Store the best move count and best time separately, display them above the game board, and update them at game completion if the current game beats either record. This minimal feature — a handful of lines of localStorage read/write code — significantly increases replay value by giving players a personal benchmark to beat.
Our Memory Match implementation uses emoji as card faces (no image loading required), a 4×4 grid (8 pairs), a move counter, a real-time timer, and a best-score display. The clean interface and immediate playability without any setup make it a quick mental refresher between coding sessions. All game state is in-browser with no external resources beyond the page's CSS and JavaScript.