Memory Card Game
A concentration game built around the three states that stop fast clicks breaking the board.
- JavaScript
- CSS
- HTML
About this project
Flip two cards, keep them if they match, turn them back if they do not. Three board sizes, a move counter, a timer, and a CSS 3D flip.
The game itself is easy. Making it survive a player who clicks faster than the animation is the part worth learning, and it is the reason this project exists. The board is always in exactly one of three states — nothing flipped, one flipped, two flipped and locked — and the current state is displayed on screen while you play, so the mechanism is visible rather than merely described.
Most tutorial versions of this game guard the race with a scattering of boolean flags. That works until it does not: a fourth click landing in the wrong window can leave a card matched against itself, and the README walks through the exact timing that breaks it, with the millisecond figures measured rather than guessed.
What you will learn
- Model a UI as an explicit state machine instead of a pile of boolean flags
- Understand why a click during an animation is a real bug and how a LOCKED state removes it
- Shuffle correctly with Fisher-Yates, and see measured evidence that sort() with a random comparator is biased
- Build a CSS 3D card flip with transform-style and backface-visibility
- Keep a game accessible: live-region announcements, a labelled dialog, and a board taken out of the tab order when it is covered
Before you start
- JavaScript basics — arrays, functions and events
- A browser and a text editor. Nothing to install.
New to JavaScript? The free JavaScript course covers everything this project assumes.
Academic integrity notice
These projects are provided for learning, experimentation and reference. Understand the code, modify it for your own requirements, and acknowledge external work according to your institution’s academic policies. Priodemy does not supply work to be submitted as your own.
Features
- An explicit three-state machine, shown live on screen as you play
- Three board sizes — 4x4, 5x4 and 6x6
- Fisher-Yates shuffle, with the measured bias of the naive alternative documented
- CSS 3D card flip with no library
- Moves, timer and a personal best per board size
- Screen-reader support: the result is announced, the win panel is a labelled dialog, and the covered board leaves the tab order
Technology stack
Track: Web Development · Level: Starter
What is included
- index.html, style.css and script.js — commented throughout
- A README on the state machine, the click race and the shuffle bias, with measured numbers
- Suggested extensions, including a two-player mode and a card-flip sound
Delivered as a 16 KB ZIP. SHA-256 published under Changelog so you can verify it.
System requirements
- Operating system
- Any
- Runtime
- Any modern browser. No install, no build step.
Licence
Learn from it, change it, and use it in your own coursework and personal projects. Do not resell it or pass it off as your own original work.
- Personal and educational use
- Modifying the code however you like
- Using it as the basis of your own coursework, with honest acknowledgement
- Putting your modified version in a portfolio or on your own GitHub
- Reselling or redistributing the project, modified or not
- Presenting it as your own original work
- Commercial deployment — see the Commercial licence
Support window: 6 months from download.
Frequently asked
Why a state machine for something this small?
Because the alternative does not survive contact with a fast player. Two or three boolean flags can represent combinations that should be impossible, and a click arriving during the comparison delay will find one of them. Three named states can only ever be one thing at a time, which is what makes the bug unreachable rather than unlikely.
Is sorting with Math.random() really that bad?
It is wrong, but not in the way most articles claim. The README shows the measured result over 200,000 shuffles: adjacent pairs are barely affected, so a player would never notice. The real damage is positional — on a 16-card board the first card stays first in 13.3% of shuffles instead of 6.3%. Fisher-Yates is the same number of lines and is correct.
Is this enough for a school or college submission?
For a school project, comfortably. For college it is a good starter piece rather than a mini project. Either way, understand the state machine well enough to explain it, extend it, and write your own report.
Changelog
- First release
SHA-2567072719155dc396760f3ca9f4d2fe8407f89a6e21043c225d1b72ee3cc87da2e
You might also like
Free Personal Portfolio Website
A responsive portfolio in plain HTML and CSS — no framework, no build step.
- HTML
- CSS
Free Snake Game
The classic game in about 180 lines of plain JavaScript and a canvas.
- JavaScript
- Canvas
- HTML
Free Tic-Tac-Toe with AI
An opponent that plays perfectly, using minimax with alpha-beta pruning.
- JavaScript
- Minimax
- HTML
Free Typing Speed Test
A speed test that shows its own arithmetic, because WPM is a definition rather than a measurement.
- JavaScript
- CSS
- HTML