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.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.