A modern, responsive memory card matching game built with React, TypeScript, and Zustand.
Deploy on Vercel -> https://memorygametest-rust.vercel.app/
- 🎮 Classic memory card matching gameplay
- 🏆 Multiple difficulty levels (Easy, Medium, Hard)
- 📊 Real-time game statistics tracking (moves, time)
- 📱 Fully responsive design for all devices
- 💾 Game history saved to local storage
- 🎉 Celebration animations on game completion
- React with Vite for fast development and optimized builds
- TypeScript for type safety and better developer experience
- Zustand for efficient state management
- SCSS for component styling with variables and mixins
- LocalStorage for persisting game history
-
Clone the repository:
git clone https://gitlab.com/wjankowska8/memorygametest cd memory-game -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Build for production:
npm run build
memory-game/
├── src/
│ ├── assets/ # Images and icons
│ ├── components/ # React components
│ ├── store/ # Zustand store
│ ├── styles/ # Global SCSS styles
│ ├── types/ # TypeScript type definitions
│ └── utils/ # Helper functions
├── public/ # Static assets
└── ... # Config files
- Cards are randomly arranged at the start of each game
- Players flip two cards at a time to find matching pairs
- When a match is found, the cards remain flipped
- Game ends when all pairs are matched
- Performance is measured by number of moves and time elapsed
- Easy: 3 pairs (2x3 grid)
- Medium: 5 pairs (2x5 grid)
- Hard: 6 pairs (3x4 grid)
- Add sound effects for card flips and matches
- Implement additional themes with different card designs
- Add a motivational character with encouragement messages
- Implement online multiplayer functionality
- Add more advanced statistics and achievements
This project is licensed under the MIT License - see the LICENSE file for details.