Memory Match Card Game
Study a compact browser memory game: a shuffled 4x4 grid of emoji cards, click-to-flip logic, match detection, a move counter, a live timer, and a win screen, all built with plain JavaScript and CSS 3D flip transforms.
Live result
Run the original project
Complete source
Read and copy the code
Inside the project
How it works
- A shuffled array of paired emoji values is rendered as 16 clickable card elements with a CSS 3D flip transform.
- Click handling tracks up to two flipped cards at a time, locking the board while a match is checked.
- A matched pair stays face-up permanently; a mismatched pair flips back after a short delay using setTimeout.
Try it yourself
Run and customize it
- 01Open the live preview and click any two cards to flip them.
- 02Match all 8 pairs to reveal the win summary with your move count and time.
- 03Click Restart at any point to reshuffle the board and reset the timer.
- 04Open the project in Code Studio to change the icon set, grid size, or flip timing.
Learning goals
What to study in this source
- See how a Fisher-Yates shuffle produces a fair random card layout from a fixed set of paired values.
- Understand a simple two-card comparison state machine: track flipped cards, lock input, compare, then resolve.
- Learn how CSS backface-visibility and 3D transforms create a card-flip effect without any image assets.
Next experiments
Useful ways to customize it
- Change the ICONS array to a themed set (numbers, letters, or a different emoji set) to reskin the game.
- Adjust the grid size and pair count together, keeping the shuffle logic and win condition in sync.
- Add a best-moves or best-time record using browser storage, similar to the existing best-score pattern in other library games.
Common questions
Memory Match Card Game FAQs
How does the memory match game shuffle the cards?
A Fisher-Yates shuffle runs on an array containing two copies of each icon, producing a fair random order every time the board is built or restarted.
What happens when I flip two cards that don't match?
Both cards stay face-up briefly so you can see them, then automatically flip back face-down after a short delay so you can try again.
Does the game track how well I'm doing?
Yes. A move counter increases every time you flip a second card, and a live timer starts on your first flip and stops the moment all 8 pairs are matched.
Can I change the number of cards or the icons used?
Yes. Open the project in Code Studio and edit the ICONS array and the CSS grid column count together to change the board size.
Does this game need any images or external libraries?
No. The cards are plain HTML elements styled with CSS, and the icons are emoji characters, so the entire game is one self-contained file.
How do I download and run the memory match game?
Download the project ZIP, extract index.html, and open it in any modern browser. No build step or server is required.
More source code
Related projects
Neon Space Defender
A complete neon canvas shooter with waves, bosses, power-ups, keyboard controls, and mobile touch controls.
intermediate / 1 fileTyping Speed Test Game
A working WPM and accuracy calculator with live character-by-character highlighting, built with plain JavaScript.
advanced / 1 fileRealistic JavaScript Sun
A responsive Canvas solar animation with plasma texture, sunspots, flares, corona rays, and orbiting energy.