Project Title
Memory Matching Game (using Angular)

Project Summary
The Memory Matching Game is a browser-based card-matching game where the player needs to find matching pairs of cards by flipping them over. The goal is to match all pairs in the shortest time possible. Built with Angular, the game features dynamic game logic for card flipping, shuffling, matching, and tracking the number of moves. This project offers hands-on experience in managing state, animations, and user interactions in Angular.

Core Features

• Card Grid Layout: Displays a grid of face-down cards, and players flip them to try to find matching pairs.
• Card Shuffling: Cards are shuffled at the start of each game to create a new random layout each time.
• Card Flipping: When a player clicks on a card, it flips to show the image. If two flipped cards match, they stay face-up; otherwise, they flip back down after a short delay.
• Move Counter: Tracks and displays the number of moves the player has made.
• Timer: Measures the time taken to complete the game, providing a challenge to beat the clock.
• Game Completion: The game ends when all matching pairs are found. A "You Win" message is displayed, showing the total time and number of moves.
• Responsive Design: Ensures the game is playable across various devices (mobile, tablet, desktop).

Technologies Used

• Angular: For building the game’s user interface, managing card states, and handling player interactions.
• Angular Services: To manage the game’s state (e.g., shuffled cards, match logic, timer, and move counter).
• CSS/SCSS: For styling the cards, grid layout, animations, and ensuring the game is visually appealing and responsive.
• RxJS: For managing asynchronous operations, such as flipping cards and handling delays between flips.

Learning Outcomes

• Building a dynamic game interface using Angular components
• Managing game state (shuffled cards, flipped cards, etc.) through Angular services
• Implementing animations and delays to enhance the user experience (e.g., flipping cards)
• Using Angular directives for dynamic rendering and handling user input (click events)
• Understanding and implementing timers and counters within Angular applications

Possible Enhancements

• Add difficulty levels (e.g., small, medium, large grids with more cards)
• Include sound effects for correct/incorrect matches and when the game is won
• Implement a leaderboard to save the fastest completion times
• Allow users to upload custom images for the cards
• Add a multiplayer mode where two players can compete to match cards
• Include a hint feature to help players find a pair
• Track statistics, such as the average time and moves per game