🧠 Memory Game

🎮 Overview:

This Memory Game is a browser-based card matching game where players flip over pairs of cards to find matching symbols. Built using HTML, CSS, and JavaScript (DOM Manipulation), this game emphasizes interactive UI design and client-side logic without the need for any frameworks or external libraries.

---

📋 Task Description:

Develop a Memory Game where:

• Players flip cards to reveal symbols.
• The goal is to find all matching pairs.
• Only two cards can be flipped at once.
• Cards that do not match are flipped back after a short delay.
• Matching pairs remain face-up.
• A restart button allows players to reset and reshuffle the board.

---

🚀 Features:

✅ Basic HTML layout with header and game board.
✅ Responsive design for desktop and mobile.
✅ Card flipping using CSS transitions.
✅ JavaScript-based shuffle functionality.
✅ Tracks flipped cards and matched pairs.
✅ Automatically flips unmatched cards back after delay.
✅ "Restart Game" button resets and shuffles the board.
✅ Clean and well-documented code.

---

🛠️ Tech Stack:

• HTML — For creating the structure of the game layout.
• CSS — For styling the game board, cards, transitions, and responsive layout.
• JavaScript (DOM Manipulation) — For game logic: shuffling, flipping, matching, and restarting.

---

🧩 Game Mechanics:

• The game initializes with 8 pairs of cards (16 total), each showing a random letter.
• Cards are shuffled randomly on each restart.
• A player can click on two cards:
  • If they match: cards stay face-up.
  • If they don’t match: cards flip back after 1 second.
• The player wins when all 8 pairs are matched.
• The Restart button resets the game and shuffles the board.

---

🧪 How to Play:

• Click on a card to flip it.

• Click on another card to flip and attempt to match the pair.

• If the cards match, they remain face-up.

• If they don’t match, they flip back after a short delay.

• Match all pairs to complete the game.

• Press the Restart button to play again!

---

💡 Code Highlights:

• Event Handling: Each card listens for click events to trigger flip logic.

• Game State Tracking: Arrays track flipped and matched cards.

• Animations: Smooth CSS transitions are used to flip cards with perspective effects.

---

🧼 Code Quality:

• Semantic HTML elements

• Modular and readable JavaScript

• Clear class naming conventions in CSS

• Comments provided for important logic sections

---

🏁 Future Enhancements (Optional Ideas):

• Add a timer.

• Add sound effects for flipping and matching.

• Display a victory message through animation.

• Support additional difficulty levels with more cards.

---

🙋‍♂️ Author & Contact:

• Developed by: Vignesh R
• GitHub: @VigneshRav
• Email: vignesh212000@gmail.com

---