Create a Memory Game with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a memory game with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app memory-game

with NPM to create our React project.

Create the Memory Game

To create the memory game, we write:

import React, { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";
const answerArr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5]
  .map((n) => {
    return {
      id: uuidv4(),
      open: false,
      value: n
    };
  })
  .sort(() => Math.random() - 0.5);

export default function App() {
  const [answer, setAnswer] = useState([...answerArr]);
  const [itemIds, setItemIds] = useState([]);

  const onClick = (id) => {
    if (!itemIds.includes(id)) {
      setItemIds((itemIds) => [...itemIds, id]);
    }
    const index = answer.findIndex((a) => a.id === id);
    setAnswer((answer) => {
      const ans = [...answer];
      ans[index].open = true;
      return ans;
    });
  };

  useEffect(() => {
    if (itemIds.length === 2) {
      const item1Index = answer.findIndex((a) => a.id === itemIds[0]);
      const item2Index = answer.findIndex((a) => a.id === itemIds[1]);
      if (answer[item1Index].value !== answer[item2Index].value) {
        setAnswer((answer) => {
          const ans = [...answer];
          ans[item1Index].open = false;
          ans[item2Index].open = false;
          return ans;
        });
      }
    }
  }, [itemIds, answer]);

  useEffect(() => {
    if (itemIds.length === 2) {
      setItemIds([]);
    }
  }, [itemIds]);

  return (
    <div>
      <style>
        {`
          .container {
            display: flex;
          }

.tile {
            border: 1px solid black;
            width: 20vw;
            height: 50px;
          }
          `}
      </style>
      <div className="container">
        {answer.map((a) => {
          return (
            <div key={a.id} className="tile" onClick={() => onClick(a.id)}>
              {a.open ? <div>{a.value}</div> : <div>&nbsp;</div>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

We have the answerArr array which is a random array of numbers.

It’s used to render the boxes which the player can open by clicking.

If 2 numbers match, then they stay open.

Otherwise, both are closed.

Then we define the answer state with the answers.

itemIds have the IDs of the answer card that are open.

There can be max of 2 that are opened.

Next, we define the onClick which checks if itemIds includes id .

If it doesn’t we add it to the itemIds array with setItemIds .

Then we call setAnswer to set the item in answer that should be opened’s open property to true .

Next, we have a useEffect callback to check if itemIds.length is 2.

If it is, then we call findIndex to get the indexes of the answer items that we clicked on.

If their value s don’t match, then we close them by setting the open property of both items to false .

We watch the itemIds and answer values to do the update accordingly.

And we have another useEffect hook to check if itemIds.length is 2 again, but this time, if it’s true , when we set itemIds to an empty array.

Next, we add the styles for the cards in the style tag.

Then we render the answers items into divs.

We show the value is a.open is true .

Otherwise, we show an empty box.

Conclusion

We can create a memory game with React and JavaScript.