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

Written by

FixTechToday

in

In the digital age, where attention spans are constantly challenged, interactive and engaging web applications are more crucial than ever. Building a memory game with React JS provides an excellent opportunity to learn fundamental React concepts while creating a fun and addictive user experience. This project isn’t just about coding; it’s about understanding how to structure your application, manage state, handle user interactions, and bring a classic game to life on the web. Whether you’re a beginner taking your first steps into React or an experienced developer looking to sharpen your skills, this guide will provide a clear, step-by-step approach to building your own memory game.

Why Build a Memory Game?

Creating a memory game offers several advantages for aspiring React developers. Firstly, it’s a project that’s manageable in scope, allowing you to focus on core React principles without getting overwhelmed. Secondly, it’s inherently visual and interactive, providing immediate feedback on your code and making the learning process more engaging. Thirdly, it’s a project that can be easily customized and expanded upon, allowing you to experiment with new features and further develop your skills.

Moreover, building a memory game helps you grasp essential React concepts such as:

  • Component-Based Architecture: Learn to break down your application into reusable components.
  • State Management: Understand how to manage and update the game’s state (e.g., cards, matched pairs, score).
  • Event Handling: Handle user interactions like card clicks.
  • Conditional Rendering: Display different content based on the game’s state (e.g., game over screen).

Project Setup and Prerequisites

Before diving into the code, you’ll need to set up your development environment. Here’s what you’ll need:

  • Node.js and npm (or yarn): These are essential for managing project dependencies and running the development server. If you don’t have them installed, download them from the official Node.js website.
  • A Code Editor: Choose your preferred code editor (e.g., VS Code, Sublime Text, Atom).
  • Basic HTML, CSS, and JavaScript Knowledge: Familiarity with these languages will be helpful but not strictly required.

Let’s create a new React project using Create React App, which simplifies the setup process. 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. Now, start the development server by running:

npm start

This will open your default web browser with the React app running on `http://localhost:3000`. You should see the default Create React App welcome screen.

Building the Card Component

The card component is the heart of our memory game. It represents each individual card and handles user interactions. Let’s create a new component file called `Card.js` inside the `src` folder. Inside `Card.js`, we’ll define a functional component:

// src/Card.js
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 className={`card ${isFlipped ? 'flipped' : ''} ${isMatched ? 'matched' : ''}`} onClick={handleClick}>
   <div className="card-inner">
    <div className="card-front"></div>
    <div className="card-back">{card.value}</div>
   </div>
  </div>
 );
}

export default Card;

Here’s a breakdown of the code:

  • Import React: Imports the React library.
  • Import Stylesheet: Imports `Card.css` for styling.
  • Functional Component: Defines a functional component named `Card` that receives props.
  • Props:
    • `card`: An object containing the card’s information (e.g., value).
    • `onClick`: A function to handle card clicks.
    • `isFlipped`: A boolean indicating if the card is flipped.
    • `isMatched`: A boolean indicating if the card is matched.
  • handleClick Function: This function is triggered when the card is clicked. It checks if the card is not already flipped and not matched, then calls the `onClick` prop (which is a function passed down from the parent component).
  • JSX Structure: Renders the card’s HTML structure, including the front and back of the card. The `flipped` and `matched` classes are added conditionally based on the `isFlipped` and `isMatched` props.

Now, let’s create `Card.css` in the `src` directory to style the card component:

/* src/Card.css */
.card {
 width: 100px;
 height: 140px;
 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; /* Disable clicks on matched cards */
}

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

.card-front {
 background-color: #ccc;
}

.card-back {
 background-color: #fff;
 transform: rotateY(180deg);
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 2em;
 font-weight: bold;
}

This CSS provides basic styling for the card, including its size, perspective, and the flipping animation. The `flipped` class is used to rotate the card when it’s clicked, and the `matched` class disables clicks on matched cards.

Building the Game Board Component

The game board component is responsible for managing the game’s state, rendering the cards, and handling the game logic. Create a new file called `GameBoard.js` inside the `src` folder:

// src/GameBoard.js
import React, { useState, useEffect } from 'react';
import Card from './Card';
import './GameBoard.css';

function GameBoard() {
 const [cards, setCards] = useState([]);
 const [selectedCards, setSelectedCards] = useState([]);
 const [matchedCards, setMatchedCards] = useState([]);
 const [moves, setMoves] = useState(0);
 const [gameOver, setGameOver] = useState(false);

 const cardValues = ['A', 'B', 'C', 'D', 'E', 'F', 'A', 'B', 'C', 'D', 'E', 'F'];

 useEffect(() => {
  // Initialize cards
  const shuffledCards = shuffleArray(cardValues.map((value, index) => ({
   id: index,
   value: value,
   flipped: false,
   matched: false,
  })));
  setCards(shuffledCards);
 }, []);

 useEffect(() => {
  // Check for matches and game over
  if (selectedCards.length === 2) {
   const [card1, card2] = selectedCards;
   if (card1.value === card2.value) {
    // Match found
    setMatchedCards([...matchedCards, card1.id, card2.id]);
   } else {
    // No match, flip cards back
    setTimeout(() => {
     setCards(
      cards.map((card) =>
       card.id === card1.id || card.id === card2.id ? { ...card, flipped: false } : card
      )
     );
    }, 1000);
   }
   setSelectedCards([]);
   setMoves(moves + 1);
  }
  if (matchedCards.length === cardValues.length) {
   setGameOver(true);
  }
 }, [selectedCards, matchedCards, cards, moves]);

 const handleCardClick = (card) => {
  if (selectedCards.length < 2 && !matchedCards.includes(card.id)) {
   // Flip the card
   setCards(
    cards.map((c) => (c.id === card.id ? { ...c, flipped: true } : c))
   );
   setSelectedCards([...selectedCards, card]);
  }
 };

 const shuffleArray = (array) => {
  const newArray = [...array];
  for (let i = newArray.length - 1; i > 0; i--) {
   const j = Math.floor(Math.random() * (i + 1));
   [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
  }
  return newArray;
 };

 const resetGame = () => {
  const shuffledCards = shuffleArray(cardValues.map((value, index) => ({
   id: index,
   value: value,
   flipped: false,
   matched: false,
  })));
  setCards(shuffledCards);
  setSelectedCards([]);
  setMatchedCards([]);
  setMoves(0);
  setGameOver(false);
 };

 return (
  <div className="game-board">
   <div className="game-info">
    <p>Moves: {moves}</p>
    {gameOver && <p>Congratulations! You Won!</p>}
    <button onClick={resetGame}>Restart Game</button>
   </div>
   <div className="card-grid">
    {cards.map((card) => (
     <Card
      key={card.id}
      card={card}
      onClick={handleCardClick}
      isFlipped={card.flipped}
      isMatched={matchedCards.includes(card.id)}
     />
    ))}
   </div>
  </div>
 );
}

export default GameBoard;

Let’s break down the `GameBoard` component:

  • Import Statements: Imports necessary modules like `React`, `useState`, `useEffect`, `Card` component, and `GameBoard.css`.
  • State Variables:
    • `cards`: An array of card objects.
    • `selectedCards`: An array to store the two selected cards.
    • `matchedCards`: An array to store the IDs of matched cards.
    • `moves`: A counter for the number of moves.
    • `gameOver`: A boolean indicating if the game is over.
  • cardValues: An array containing the values for the cards.
  • useEffect (Initialization):
    • Shuffles the `cardValues` and creates an array of card objects with `id`, `value`, `flipped`, and `matched` properties.
    • Updates the `cards` state with the shuffled cards.
  • useEffect (Match Checking):
    • Checks if two cards have been selected (`selectedCards.length === 2`).
    • If the cards match, adds their IDs to the `matchedCards` array.
    • If the cards don’t match, flips them back after a short delay (1 second).
    • Resets the `selectedCards` array.
    • Increments the `moves` counter.
    • Checks if all cards are matched, and sets the `gameOver` state to true.
  • handleCardClick Function:
    • Handles card clicks.
    • If less than two cards are selected and the clicked card is not already matched, it flips the card and adds it to the `selectedCards` array.
  • shuffleArray Function: Shuffles the card values using the Fisher-Yates shuffle algorithm.
  • resetGame Function: Resets the game by reshuffling cards, clearing selected and matched cards, resetting moves, and setting `gameOver` to false.
  • JSX Structure: Renders the game board, including:
    • A display for the number of moves.
    • A message if the game is over.
    • A restart game button.
    • A grid of `Card` components, mapping over the `cards` array and passing props to each card.

Create `GameBoard.css` in the `src` directory to style the game board:

/* src/GameBoard.css */
.game-board {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 20px;
}

.game-info {
 margin-bottom: 20px;
 text-align: center;
}

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

This CSS provides basic styling for the game board, including a layout for the game info and the card grid.

Integrating the Components in App.js

Now, let’s integrate the `GameBoard` component into our main application. Open `src/App.js` and modify it as follows:

// src/App.js
import React from 'react';
import GameBoard from './GameBoard';
import './App.css';

function App() {
 return (
  <div className="App">
   <h1>Memory Game</h1>
   <GameBoard />
  </div>
 );
}

export default App;

This code imports the `GameBoard` component and renders it within the `App` component. Let’s create some basic styling in `App.css`:

/* src/App.css */
.App {
 text-align: center;
}

Running and Testing the Game

Save all the files and run your React application using `npm start` in your terminal. You should see the memory game in your browser. Try clicking on the cards to flip them over. When you click on two cards, they should either flip back (if they don’t match) or stay flipped (if they match). The game should end when all pairs are matched, and a “Congratulations!” message should appear.

Here’s a breakdown of how the game works:

  • Initialization: The game initializes with a set of shuffled cards. Each card has a unique value and is initially hidden.
  • Card Selection: When you click on a card, it flips over to reveal its value.
  • Matching: If you click on a second card, the game compares the values of the two selected cards.
  • Match or No Match:
    • If the values match, the cards remain flipped, and the matched pair is stored.
    • If the values don’t match, the cards flip back after a short delay.
  • Game Over: The game continues until all pairs are matched. A “Congratulations!” message appears at the end.

Common Mistakes and How to Fix Them

While building the memory game, you might encounter some common mistakes. Here’s a list of potential issues and how to address them:

  • Incorrect State Updates:
    • Problem: Not updating the state correctly can lead to unexpected behavior and bugs. For example, not updating the `cards` state properly after a match or a mismatch.
    • Solution: Use the correct methods to update state. When updating an array, always create a new array using the spread operator (`…`) to avoid mutating the original array directly. Use the functional form of `setState` when the new state depends on the previous state. For example: `setCards(prevCards => prevCards.map(…))`
  • Incorrect Card Flipping Logic:
    • Problem: Cards might not flip back correctly after a mismatch, or they might flip back too quickly.
    • Solution: Ensure the `isFlipped` prop is correctly managed based on the game’s state. Implement a `setTimeout` function to flip the cards back after a delay (e.g., 1 second) after a mismatch. Make sure to only flip cards back that are not matched.
  • Incorrect Match Detection:
    • Problem: The game might incorrectly identify matches or fail to detect matches.
    • Solution: Double-check the logic that compares the values of the selected cards. Ensure that the correct properties are being compared. Verify that the `matchedCards` state is being updated correctly.
  • Incorrect Handling of User Clicks:
    • Problem: Cards might not respond to clicks, or multiple clicks might cause unexpected behavior.
    • Solution: Ensure that the `onClick` handler is correctly attached to each `Card` component. Verify that the `handleCardClick` function is correctly updating the `selectedCards` state. Disable clicks on matched cards using the `matchedCards.includes(card.id)` check.
  • Incorrect Game Over Logic:
    • Problem: The game might not end correctly, or the “Congratulations!” message might not appear.
    • Solution: Ensure that the `gameOver` state is set to `true` when all pairs are matched. Verify the condition that checks if all cards have been matched (`matchedCards.length === cardValues.length`).
  • Performance Issues:
    • Problem: The game might become slow or unresponsive, especially if there are many cards or complex operations.
    • Solution: Optimize the code to improve performance. Use memoization to avoid unnecessary re-renders. Avoid unnecessary state updates. Use efficient algorithms for tasks such as shuffling the cards.

Enhancements and Next Steps

Once you’ve built the basic memory game, you can add several enhancements to improve its functionality and user experience. Here are some ideas:

  • Difficulty Levels: Implement different difficulty levels by varying the number of cards.
  • Scoring System: Add a scoring system to track the player’s performance.
  • Timer: Include a timer to add a sense of urgency.
  • Sound Effects: Add sound effects for card flips, matches, and game over.
  • Visual Enhancements: Improve the visual design and animations of the cards.
  • Responsive Design: Ensure the game is responsive and works well on different screen sizes.
  • Persistent High Scores: Store high scores using local storage or a backend database.
  • Custom Card Designs: Allow users to customize the card designs or choose different themes.
  • Multiplayer Mode: Implement a multiplayer mode where players can compete against each other.

Key Takeaways

Building a React memory game is a fantastic way to learn and practice fundamental React concepts. You’ve learned how to create components, manage state, handle user interactions, and implement game logic. Remember to break down complex tasks into smaller, manageable components. Practice proper state management techniques to avoid bugs and ensure your application behaves as expected. Experiment with different features and enhancements to further develop your skills. By following the steps outlined in this guide and continuously practicing, you can create engaging and interactive web applications that will impress users and expand your understanding of React. The beauty of coding lies not just in the final product but in the journey of learning and problem-solving, so embrace the challenges and enjoy the process of building your own memory game.

More posts