Emoji Memory Match Game

Project Overview

A fun and interactive 2-player memory card matching game where players take turns flipping cards to find pairs of matching emojis. Each player scores a point for every successful match. The game continues until all pairs are found, and the player with the highest score wins. It features smooth animations, colorful UI, and a responsive layout for both desktop and mobile.

Key Features

Two-player mode: Players alternate turns to flip cards.
Scoreboard: Displays points for each player in real-time.
Flip animation: Smooth 3D flip effect for cards using Framer Motion.
Winning animation: Confetti animation when the game ends.
Restart button: Reset the game at any time.
Move counter: Tracks number of turns played.

Functionality

Game Initialization: Shuffles emojis, resets scores, and sets up the game board.
Player Turns: Players click on cards to flip them. Only 2 cards can be flipped per turn.
Matching Logic: If two flipped cards match, current player earns a point and cards stay revealed. Otherwise, the turn switches to the other player.
Score Tracking: Each player’s score updates in real-time.
Game Completion: When all pairs are matched, the winner is determined based on score. Confetti animation is triggered.
Restart Functionality: Players can restart the game anytime using the restart button.
Responsive Layout: Ensures the scoreboard stays beside the grid on desktop and adjusts for mobile screens.

Technology Stack

React.js: Frontend library for building UI.
Framer Motion: Smooth animations for card flipping and effects.
Confetti.js: Celebration animation for game completion.
CSS / Tailwind (optional): Styling and responsive design.

Why This Project Is Useful

Encourages memory improvement and cognitive skills.
Perfect for friendly competition between 2 players.
Provides a fun way to learn basic game logic in React.
Demonstrates React state management, animation, and responsive design in a single project.