📋 Description
A fun and interactive memory game built using HTML, CSS, and Vanilla JavaScript. The goal is to match all pairs of identical images before the countdown timer runs out. The game includes flipping animations, sound effects, a score tracker, and a smooth user experience with a clean responsive layout.
✅ What This Project Covers
- Prompt user for name before starting the game.
- Shuffles and displays image blocks in a random order.
- Shows a 3-second preview of all cards before the game starts.
- Timer countdown with formatted display.
- Score system that increases for each matched pair.
- Tracks number of failed attempts.
- Interactive card flipping animations.
- Sound effects for success, failure, win, and game over.
- Responsive layout using modern CSS.
- Ability to restart the game at any time.
🚀 Features Implemented
- Name prompt and display for personalization.
- Timer countdown with game-over handling.
- Sound effects (success, fail, win, lose, background music).
- Dynamic creation and rendering of cards via JavaScript.
- Matching logic with locked flipped cards.
- Unmatched cards automatically flip back.
- "No-clicking" mode prevents fast spamming.
- Restart button to reset the game instantly.
- Score increases by 5 points for every correct match.
- Game ends with alert for win/loss.
- Audio handled via HTML5
<audio>tags and JavaScript.
🌟 Ideas for Future Enhancements
-
Add difficulty levels (Easy / Medium / Hard).
-
Add timer extension reward for streaks.
-
Save high scores using localStorage.
-
Show a leaderboard for multiple players.
🛠️ Technologies Used
- HTML5
- CSS3 (Flexbox + grid + Transitions)
- JavaScript (ES6+)
- DOM Manipulation
- Audio API (
<audio>+ JS) - Responsive Design
🌐 Live Demo
👉 https://elfajome.github.io/Memory-Game/
📸 Screenshots
Add screenshots later to showcase gameplay, score UI, and timer in action.
📦 How to Run Locally
# Clone the repository
https://github.com/elfajome/Memory-Game.git