Match Pair Game
React.js
hard
35 mins
Create a memory matching game where players flip cards to find matching pairs in a 4x4 grid (8 pairs total). The game should track flips, matches, and moves, and provide visual feedback during gameplay.
Requirements
1. Card Grid
- Render a 4x4 grid (total 16 cards).
- Each card hides an emoji initially.
- Use these 8 emojis (each repeated twice):
['β€οΈ','π','π','π','β½οΈ','π','β΅οΈ','π'] - Randomly shuffle emojis on every game start/reset.
2. Card Behavior
- When a card is clicked:
- 1.Reveal the emoji.
- 2.Only two cards can be revealed at a time.
- If the two revealed cards match, they stay visible (marked as matched).
- If they donβt match, flip them back after a 1-second delay.
- Disable user interaction during this 1-second delay.
3. Game Logic
- Track and display the number of moves (every two flips = one move).
- When all pairs are matched:
- Show a "π You won!" message.
4. Reset Button
- Provide a Reset button to restart the game:
- 1.Shuffle the emojis.
- 2.Reset the move counter.
- 3.Hide all cards.
- 4.Clear any matched state or win message.
Reference UI

Preview what you need to build
Solve Similar questions π₯
Want to upskill? Explore our courses!
Namaste DSA
Master DSA from scratch with numerous problems, and expert guidance.
Namaste React
Wanna dive deep into React and become Frontend Expert? Learn with me now!
Namaste Frontend System Design
The most comprehensive and detailed course for frontend system design.
Namaste Node.js
Wanna dive deep into Node.js? Enroll into `Namaste Node.js` now!
