How to Build a Card Match Up Game using React
In this tutorial, we will be building a Card Match Up Game using React.
The game comprises of 8 pairs of cards (i.e 16 cards). The cards are arranged randomly and are faced down. A user flips a card by clicking on it. If the two flipped cards are a match they will disappear from our game board otherwise they will be flipped back. The game ends when all cards are successfully matched with their pairs.
- Node JS (v6 and above)
- NPM (v5.2 and above)
Let the coding begin.
To begin, we have to first install the packages that we require for building the application.
First, we install the create-react-app NPM package. This package enables us to quickly set up a ReactJs project with just one command.
In your terminal or command line, type:
npm i create-react-app
Now that we have the create-react-app package installed, we can set up our project.
npx create-react-app card-match-up
Open the card-match-up project folder with any text editor. I will be making use of VSCode Editor.
Start the application with:
The application should be automatically opened in your browser on port 3000. The interface should be similar to this:
We need to install another NPM package for the game.
npm install react-card-flip --save
ReactCardFlip allows us to use card flip animation. I find it easier to use rather than writing custom CSS animation for the card components.
Setup the Application Folder Structure
src folder, create two folders:
componentsfolder: This folder will have added two folders. They are:
cardfolder: Contains the Card and GameOver JSX files
headerfolder: Contains the Header JSX file.
stylesfolder: Where we will put our custom CSS file.
We also need to delete these files in the
With the creation of the folders and the removal of some files, our folder structure should look like this:
The application is currently broken because we are still referencing some files that we have deleted. To resolve this, open
index.jsfiles and remove the lines where we are importing
logo.svg, App.css, and index.css.
Setup the Application Files
- In the
src > components > cardfolder, create
Write the following code snippet in your created files. We will go over them shortly.
2. In the
src > components > header folder, create
Header.jsx file. Type the below code snippet inside of the
3. Replace the contents of
App.js in the
src folder with the code snippet below.
4. Finally, in the
src > styles folder, create
main.cssfile. Paste these styles inside of it.
Before we go over the lines of code that above, let us make sure that our application is working properly. Run the application with
npm startand try to play the game till the end.
Let us now have an in-depth look at the code.
Code Walk Through
This file contains the application logic. It also houses three other React components which are
App.js contains an internal state object and five different methods.
Line 18–22 contains the method for duplicating the array of card numbers. This is because each card number should have a duplicate. The
duplicateCard method will return an array of length 16 which is [0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7]. This array is randomised when it is passed to the state object
Line 24 — 49 contains the method for flipping card when it is clicked on to reveal the card number. The method changes the
isFlippedstate of the card to true and prevents a card that is already flipped from responding to the click event. From line 40, we check if the number of flipped cards is two so we can check if the two cards are a match.
Line 51–69 is the method that checks if the two flipped cards are a match. This method is called in line 46 as seen above. The
setTimeout method used while setting the state is so that the card flip will not be abrupt.
Line 71–79 is the
restartGame method. This method basically resets the game’s state.
Line 81–83 checks if the game is over. If the game is over, the
GameOver component is displayed.
Line 85–106 The last block of code in
App.js is the render method. In Line 88, The
Header component is passed
restartGame props. The
isGameOver method is used to render the
GameOver component when the game is over otherwise, the
Card component is rendered.
Header.jsx are all presentational components. They do not contain any application logic rather they contain props passed down to them from the
App.js parent component.
There we go! Our fun little game is done.
Thank you for reading. Clap if you had fun building the card game using React.
Follow me on twitter @iamkenec