How to Build a Card Match Up Game using React
Introduction
React is a JavaScript library used for building user interfaces. It is a frontend library that is fast and easy to learn.
In this tutorial, we will be building a Card Match Up Game using React.
Game Overview
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.
Prerequisite
- 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:
npm start
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
In the src
folder, create two folders:
components
folder: This folder will have added two folders. They are:
a.card
folder: Contains the Card and GameOver JSX files
b.header
folder: Contains the Header JSX file.styles
folder: Where we will put our custom CSS file.
We also need to delete these files in the src
folder.
- App.css
- index.css
- logo.svg
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 App.js
and index.js
files and remove the lines where we are importing logo.svg, App.css, and index.css
.
Setup the Application Files
- In the
src > components > card
folder, createCard.jsx
andGameOver.jsx
files.
Write the following code snippet in your created files. We will go over them shortly.
Card.jsx
GameOver.jsx
2. In the src > components > header
folder, createHeader.jsx
file. Type the below code snippet inside of the Header.jsx
file.
Header.jsx
3. Replace the contents of App.js
in the src
folder with the code snippet below.
App.js
4. Finally, in the src > styles
folder, create main.css
file. Paste these styles inside of it.
main.css
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 start
and try to play the game till the end.
Let us now have an in-depth look at the code.
Code Walk Through
App.js
This file contains the application logic. It also houses three other React components which are Header.jsx
, GameOver.jsx
and Card.jsx
.
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 shuffledCard.
Line 24 — 49 contains the method for flipping card when it is clicked on to reveal the card number. The method changes the isFlipped
state 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.
The Card.jsx
, GameOver.jsx
and 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