Facebook Pixel

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

matchPairGame

Preview what you need to build

Solve Similar questions πŸ”₯

Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.