A highly interactive, visually stunning Memory Match game built with Vanilla JavaScript, HTML5, and advanced CSS3. This project features immersive 3D card flipping animations, custom canvas-based particle effects (confetti), and utilizes browser localStorage for high score tracking.
Perfect for players looking for a quick brain teaser, or developers seeking a clean, responsive frontend game project!
(Tip: Add a GIF or a nice screenshot of your game here to improve user engagement and lower bounce rate for SEO!)
- Advanced CSS3 Animations: Smooth 3D card flips with backface-visibility and glowing neon effects.
- Flawless Game Logic: Robust JavaScript state management that prevents bugged rapid-clicking and dual-card flips.
- Persistent High Scores: Automatically saves your best score (fewest moves) using HTML5
localStorage. - Custom Particle Engine: A high-performance HTML Canvas confetti explosion triggers upon victory.
- Fully Responsive: Playable on desktops, tablets, and mobile devices with a sleek UI.
- HTML5: Semantic structure and Canvas element.
- CSS3: Flexbox, CSS Grid, 3D Transforms, Keyframe Animations, Custom Properties (Variables), and Glassmorphism UI.
- Vanilla JavaScript (ES6+): DOM manipulation, Event Listeners, State Management, and RequestAnimationFrame for the custom physics engine.
- Click on any card to reveal its hidden neon symbol.
- Click on a second card to find a match.
- If the symbols match, the cards will glow green and stay locked.
- If they don't match, they will automatically flip back over.
- Match all pairs in the fewest moves possible to set a new High Score!
To run this project locally on your machine:
- Clone the repository:
git clone [https://github.com/saad-innovation/Memory-match.git](https://github.com/saad-innovation/Memory-match.git)