Build a Simple React Memory Game: A Beginner’s Guide

Written by

FixTechToday

in

In the world of web development, creating interactive and engaging user experiences is key to capturing and retaining users. One classic example of this is the memory game, a simple yet effective way to test and improve cognitive skills. Building a memory game with React JS provides a practical and enjoyable learning experience for beginners, allowing them to grasp fundamental React concepts while constructing something fun and functional. This guide will walk you through the process, from setting up your development environment to deploying your game, ensuring a clear and comprehensive understanding of each step.

Why Build a Memory Game with React?

React, with its component-based architecture and virtual DOM, is an excellent choice for building interactive UIs. A memory game, with its state management and dynamic rendering requirements, is a perfect project to showcase React’s capabilities. Building this game offers several benefits:

  • Practical Application: You’ll learn how to manage state, handle user events, and dynamically render components, core concepts in React development.
  • Interactive Experience: The game’s interactive nature keeps you engaged, making the learning process more enjoyable.
  • Component-Based Design: You’ll gain hands-on experience in breaking down a complex UI into reusable components, a fundamental aspect of React.
  • Real-World Relevance: Understanding how to build interactive games can translate to other types of web applications, such as quizzes, educational tools, and more.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server. Download and install them from nodejs.org.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is necessary to understand the code and styling aspects.
  • A code editor: Choose your preferred code editor (VS Code, Sublime Text, Atom, etc.).

Step-by-Step Guide

1. Setting Up the React Project

First, let’s create a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app memory-game
cd memory-game

This command creates a new React project named “memory-game” and navigates you into the project directory. Next, start the development server:

npm start

This will open your default web browser and display the default React app. Congratulations, you’ve set up your development environment!

2. Project Structure and File Organization

The standard project structure created by Create React App is as follows:


memory-game/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   │   └── Card.js
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   └── index.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

Let’s create a `components` folder inside the `src` directory to keep our components organized. We’ll create a `Card.js` component to represent each card in the game. You can create other components as needed.

3. Creating the Card Component (Card.js)

The `Card` component will be responsible for displaying a single card. Create a file named `Card.js` inside the `src/components` directory and add the following code:


import React from 'react';
import './Card.css'; // Import the stylesheet

function Card({ card, onClick, isFlipped, isMatched }) {
 const handleClick = () => {
 if (!isFlipped && !isMatched) {
 onClick(card);
 }
 };

 return (
 <div>
 <div>
 <div>
 <img src="{card.image}" alt="{card.name}" />
 </div>
 <div></div>
 </div>
 </div>
 );
}

export default Card;

Here’s a breakdown:

  • Import React: Imports the React library.
  • Import CSS: Imports the `Card.css` file for styling.
  • Props: The component receives `card`, `onClick`, `isFlipped`, and `isMatched` as props. These props determine the card’s data, click handler, and display state.
  • handleClick: Handles the click event. It calls the `onClick` function passed from the parent component, but only if the card is not already flipped or matched.
  • JSX: The component renders a `div` with the class `card`. The `flipped` and `matched` classes are conditionally added based on the props. The card displays either the image on the front or the back of the card.

Now, create a `Card.css` file in the same directory (`src/components/`) and add some basic styling. This is just an example, and you can customize it as you like:


.card {
 width: 100px;
 height: 100px;
 perspective: 1000px;
 margin: 10px;
}

.card-inner {
 position: relative;
 width: 100%;
 height: 100%;
 transition: transform 0.8s;
 transform-style: preserve-3d;
}

.card.flipped .card-inner {
 transform: rotateY(180deg);
}

.card.matched {
 pointer-events: none; /* Prevent clicks on matched cards */
}

.card-front, .card-back {
 position: absolute;
 width: 100%;
 height: 100%;
 backface-visibility: hidden;
 border-radius: 5px;
}

.card-front {
 background: #fff;
 transform: rotateY(180deg);
}

.card-front img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.card-back {
 background: #ccc;
}

4. Creating the App Component (App.js)

The `App.js` component will be the main component of our game. It will manage the game’s state, including the cards, the currently flipped cards, the number of moves, and the game’s win condition. Replace the content of `src/App.js` with the following code:


import React, { useState, useEffect } from 'react';
import Card from './components/Card';
import './App.css';

function App() {
 const [cards, setCards] = useState([]);
 const [flippedCards, setFlippedCards] = useState([]);
 const [moves, setMoves] = useState(0);
 const [isGameWon, setIsGameWon] = useState(false);

 const cardImages = [
 { name: 'cat', image: '/images/cat.png' },
 { name: 'dog', image: '/images/dog.png' },
 { name: 'bird', image: '/images/bird.png' },
 { name: 'fish', image: '/images/fish.png' },
 { name: 'rabbit', image: '/images/rabbit.png' },
 { name: 'horse', image: '/images/horse.png' }
 ];

 useEffect(() => {
 const shuffledCards = [...cardImages, ...cardImages]
 .sort(() => Math.random() - 0.5)
 .map((card, index) => ({
 ...card,
 id: index,
 isFlipped: false,
 isMatched: false,
 }));
 setCards(shuffledCards);
 }, []);

 useEffect(() => {
 if (flippedCards.length === 2) {
 const [firstCard, secondCard] = flippedCards;
 if (cards[firstCard.id].name === cards[secondCard.id].name) {
 // Match
 const updatedCards = cards.map((card, index) => {
 if (index === firstCard.id || index === secondCard.id) {
 return { ...card, isMatched: true };
 }
 return card;
 });
 setCards(updatedCards);
 setFlippedCards([]);
 } else {
 // No match
 setTimeout(() => {
 const updatedCards = cards.map((card, index) => {
 if (index === firstCard.id || index === secondCard.id) {
 return { ...card, isFlipped: false };
 }
 return card;
 });
 setCards(updatedCards);
 setFlippedCards([]);
 }, 1000);
 }
 setMoves(prevMoves => prevMoves + 1);
 }
 }, [flippedCards, cards]);

 useEffect(() => {
 if (cards.every(card => card.isMatched)) {
 setIsGameWon(true);
 }
 }, [cards]);

 const handleCardClick = (card) => {
 if (flippedCards.length  {
 if (c.id === card.id) {
 return { ...c, isFlipped: true };
 }
 return c;
 });
 setCards(updatedCards);
 setFlippedCards((prevFlippedCards) => [...prevFlippedCards, card]);
 }
 };

 const handleRestart = () => {
 const shuffledCards = [...cardImages, ...cardImages]
 .sort(() => Math.random() - 0.5)
 .map((card, index) => ({
 ...card,
 id: index,
 isFlipped: false,
 isMatched: false,
 }));
 setCards(shuffledCards);
 setFlippedCards([]);
 setMoves(0);
 setIsGameWon(false);
 };

 return (
 <div>
 <h1>Memory Game</h1>
 <p>Moves: {moves}</p>
 {isGameWon && <p>Congratulations! You won!</p>}
 <div>
 {cards.map((card) => (
 
 ))}
 </div>
 {isGameWon && <button>Restart Game</button>}
 </div>
 );
}

export default App;

Let’s break down this code:

  • Import statements: Imports `React`, `useState`, `useEffect` from React, and the `Card` component, and the `App.css` file.
  • State variables:
    • `cards`: An array of card objects, each containing an `id`, `name`, `image`, `isFlipped`, and `isMatched` property.
    • `flippedCards`: An array to store the currently flipped cards (up to 2).
    • `moves`: Tracks the number of moves the player has made.
    • `isGameWon`: A boolean to indicate whether the game is won.
  • `cardImages`: An array of objects, where each object holds the name and image path of a card.
  • `useEffect` (Initial card setup): This `useEffect` hook runs once when the component mounts. It shuffles the `cardImages` array, duplicates it to create pairs, and initializes the `cards` state.
  • `useEffect` (Match/Mismatch logic): This `useEffect` hook runs whenever `flippedCards` or `cards` change. It checks if two cards are flipped. If they match, it marks them as matched. If they don’t match, it flips them back after a delay.
  • `useEffect` (Win Condition): This `useEffect` hook checks if all cards are matched. If so, it sets `isGameWon` to `true`.
  • `handleCardClick`: This function is called when a card is clicked. It updates the `cards` state to flip the card and adds the card to `flippedCards`.
  • `handleRestart`: Resets the game to its initial state, allowing the player to play again.
  • JSX: The component renders the game’s UI, including the title, moves counter, the card grid, and the restart button when the game is won.

Create `App.css` in the `src` directory and add the following styling:


.app {
 text-align: center;
}

.card-grid {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

5. Adding Images

You’ll need images for your cards. Create an `images` folder in the `public` directory and add images for each card face (e.g., cat.png, dog.png, etc.). Update the `cardImages` array in `App.js` with the correct image paths, like this:


 const cardImages = [
 { name: 'cat', image: '/images/cat.png' },
 { name: 'dog', image: '/images/dog.png' },
 { name: 'bird', image: '/images/bird.png' },
 { name: 'fish', image: '/images/fish.png' },
 { name: 'rabbit', image: '/images/rabbit.png' },
 { name: 'horse', image: '/images/horse.png' }
 ];

6. Running the Game

Save all your files. Run `npm start` in your terminal to start the development server. You should now see the memory game in your browser! Try flipping cards and matching pairs.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Incorrect Image Paths: Double-check that your image paths in the `cardImages` array are correct relative to the `public` directory.
  • State Not Updating: Make sure you are correctly using `setCards` and `setFlippedCards` to update the state. Incorrect state updates can cause the game to malfunction.
  • Missing Dependencies: Ensure you’ve imported all necessary components and libraries.
  • Incorrect Logic: Carefully review your match/mismatch logic in the `useEffect` hook. A small error can break the matching functionality.
  • Styling Issues: If your cards are not displaying correctly, check your CSS for errors or conflicting styles. Use your browser’s developer tools to inspect the elements and identify styling problems.

Key Takeaways

  • State Management: Using `useState` to manage the game’s state (cards, flipped cards, moves, game won).
  • Component Structure: Creating reusable components like `Card` to organize the code.
  • Event Handling: Handling user interactions (card clicks) with the `onClick` event.
  • Conditional Rendering: Using conditional logic to display content based on the game’s state (e.g., flipping cards, showing a win message).
  • useEffect Hook: Using `useEffect` to handle side effects like shuffling cards, checking for matches, and the win condition.

FAQ

Q: How can I add more card images?

A: Simply add more objects to the `cardImages` array in `App.js`, including the image path and name for each new card.

Q: How do I change the number of card pairs?

A: You can modify the `cardImages` array to include more card names and images. The game logic will automatically handle the new pairs.

Q: How do I improve the game’s performance?

A: For larger games, consider optimizing image loading, using memoization techniques (e.g., `React.memo`), and optimizing the re-renders of the components.

Q: How do I deploy the game?

A: You can deploy your React app to platforms like Netlify, Vercel, or GitHub Pages. Build your project using `npm run build` and then follow the platform’s deployment instructions.

Enhancements and Next Steps

Once you have the basic game working, you can add further enhancements:

  • Timer: Add a timer to track how long it takes the player to complete the game.
  • Difficulty Levels: Implement different difficulty levels by changing the number of cards.
  • Scoreboard: Add a scoreboard to track high scores.
  • Sound Effects: Add sound effects for card flips and matches.
  • Animations: Implement more advanced animations for a better user experience.

Building a memory game is a great way to learn and practice React fundamentals. By following this guide, you have not only created a fun game but also gained valuable experience with state management, component composition, and event handling. Remember that the journey of a thousand miles begins with a single step; keep experimenting and exploring new features to take your React skills to the next level. The skills you learn here can be applied to many other types of web applications, and each project you undertake will only solidify your understanding of React and its ecosystem.

More posts