Memory Game

A fun and interactive memory card game built using React, Vite, and Tailwind CSS. Match pairs of cards by flipping them, and challenge yourself to complete the game with fewer attempts and a faster time!

Screenshots

Features

• Randomized Card Shuffle: Cards are shuffled each time the game starts.
• Flip and Match: Click to flip cards and match pairs.
• Timer: Tracks the time taken to complete the game.
• Attempts Tracker: Displays the number of attempts made.
• Difficulty Levels: Choose between Easy, Medium, and Hard modes.
• New Game Button: Restart the game at any time.
• Dynamic Gameplay: The timer starts when the first card is flipped.
• Responsive Design: Optimized for various screen sizes.

Technologies Used

• React: For building the user interface.
• Vite: As the build tool for fast development and bundling.
• Tailwind CSS: For efficient and modern styling.

Installation

1. Clone the Repository:

2. git clone https://github.com/ArvanHunt/memory-game-react

3. Navigate to the Project Directory:

   cd memory-game

4. Install Dependencies:

   npm install

5. Start the Development Server:

   npm run dev

6. Open your browser and navigate to the local server URL provided by Vite (e.g., http://localhost:5173).

How to Play

1. Select a difficulty level:
   • Easy: 4 pairs
   • Medium: 6 pairs
   • Hard: 8 pairs
2. Click on a card to flip it and reveal its icon.
3. Flip another card to try matching the first one.
4. If the icons match, the cards remain flipped. Otherwise, they will flip back after a short delay.
5. The game ends when all pairs are matched.
6. View your stats:
   • Time taken to complete the game.
   • Number of attempts made.

Customization

• Icons: Modify the icons in the generateCards function in App.jsx to use different symbols or images.
• Styling: Customize the Tailwind CSS classes in the components for a unique design.

License

This project is open-source and available under the MYLICENSE.

---