Skip to content

Latest commit

ย 

History

History
131 lines (91 loc) ยท 2.49 KB

File metadata and controls

131 lines (91 loc) ยท 2.49 KB

๐Ÿง  Memory Card Game (React)

A fun and interactive Memory Matching Game built using React + Vite. Flip cards, match pairs, and test your memory skills!


๐Ÿš€ Features

  • ๐ŸŽด Flip cards with smooth UI
  • ๐Ÿ”€ Random card shuffling every game
  • ๐Ÿงฉ Match logic with score tracking
  • ๐Ÿ“Š Move counter
  • ๐Ÿ”’ Prevents rapid clicks during evaluation
  • ๐ŸŽ‰ Win message when all cards are matched
  • โ™ป๏ธ Reset / Restart game anytime

๐Ÿ› ๏ธ Tech Stack

  • React (Functional Components + Hooks)
  • Vite (Fast development build tool)
  • CSS (Custom styling)

๐Ÿ“ Project Structure

memory-cards/
โ”‚
โ”œโ”€โ”€ public/
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ assets/          # Images & icons
โ”‚   โ”œโ”€โ”€ components/      # UI Components
โ”‚   โ”‚   โ”œโ”€โ”€ Card.jsx
โ”‚   โ”‚   โ”œโ”€โ”€ GameHeader.jsx
โ”‚   โ”‚   โ””โ”€โ”€ WinMessage.jsx
โ”‚   โ”œโ”€โ”€ hooks/           # Custom logic
โ”‚   โ”‚   โ””โ”€โ”€ useGameLogic.js
โ”‚   โ”œโ”€โ”€ App.jsx          # Main component
โ”‚   โ”œโ”€โ”€ index.css        # Styles
โ”‚   โ””โ”€โ”€ main.jsx         # Entry point
โ”‚
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ README.md

๐Ÿง  How the Game Works

  1. Cards are shuffled randomly at the start.

  2. Player clicks a card โ†’ it flips.

  3. Player selects a second card:

    • โœ… If both match โ†’ they stay flipped
    • โŒ If not โ†’ they flip back after a short delay
  4. Moves are counted for every attempt.

  5. Game ends when all pairs are matched.


โš™๏ธ Installation & Setup

1. Clone the repository

git clone https://github.com/your-username/memory-cards.git
cd memory-cards

2. Install dependencies

npm install

3. Run the app

npm run dev

๐ŸŽฎ Controls

  • Click on any card to flip it
  • Match all pairs to win
  • Use Reset button to restart the game

๐Ÿ–ผ๏ธ Screenshot of the Game

![Memory Card Game Screenshot]


๐Ÿ“Œ Future Improvements

  • โฑ๏ธ Timer feature
  • ๐Ÿ† High score system
  • ๐ŸŽš๏ธ Difficulty levels (easy/medium/hard)

๐Ÿ™Œ Acknowledgements

Built as a learning project to practice:

  • React Hooks
  • State management
  • Component structure
  • Game logic implementation

๐Ÿ“„ License

This project is open-source and free to use.


๐Ÿ’ก Author

Made with โค๏ธ by Dishitha ๐Ÿ˜„ Feel free to improve and expand it!