I created a memory game in React.js which is a perfect starting point for beginner React developers. It shows off that you understand basic knowledge and that you can work through problems by visualizing the solution. The reason why it is a great starting point for aspiring developers is because everyone knows how the game works. Therefore figuring out the logic is just going through the game yourself.
To do so you can grab a deck of cards and filter out any two identical numbers/symbols until you have a deck of twelve. You put them out and you start playing, writing down the actions you do every time.
Setting Up
For building a React app we will need to have Node.js installed and NPM package manager. To do so you can follow the following link
https://www.codecademy.com/articles/react-setup-i
To create a react app you will need to use npx create-react-app inside of your terminal. Wait until it is done installing and you receive the message "Happy Hacking".
When this has been completed you cd into the react app you just created and open it in your text editor. I use VSCode for this which means I type in the command "code .". After the text editor has opened you run your react application by typing the command "npm start" into your terminal.
Getting Started
To create the basics of your memory game we will need to build a components folder inside our src folder. You can do so by using the terminal or your code editor. Inside the components folder I have created all my components for the game as shown in the picture below
Components
To give you a better overview of what every component does I have given a break down below.
Main
the main component serves all the components of the game to App.js.
The reason I didn't use App.js for this is that App.js is a functional component, and I have created Main to be a class component, therefore it can have a state, multiple functions and serve all the components at the same time.Game
The game component is a layout for the game part of the application, the component doesn't do more then serve the images and holds the styling of the center of the game.Login
Login is a component that holds a prompt at the start of the game where people can input there namesNavbar
Like the name suggests this is the navbar of the application that holds the name of the game, the persons input name from the login and there scoreEndGame
This is a component for when somebody finishes the game, it shows a prompt with a cute message and a button to restart the game.Images
This holds the main logic of the game. It has the logic for the sorting of the pictures at the start of the game and all the click events for the cards build into it.messages
This is a small javascript file with an array of objects of different messages for the EndGame component
Main
In the main component we will be importing the following components:
- Game.js
- Login.js
- Endgame.js
- Navbar.js
I've used the state to show off components such as the login and the endgame. Then using ternary statements to show the components in the file
Using the function handleLogin and handleEndgame to show the components and set some variables such as the score and the username.
inside the components there are properties or props if you will serving data from the main page to the underlying components.
In the login component I'm using the property name of "name" to serve the handleLogin function to the Login component.
the same goes for the other components where I'm using either the state information, which I have deconstructed using es6 syntax, or other functions such as the handleEndGame function.
Login
The Login page is a very simple page with some Bootstrap build in.
Twitter Bootstrap is a framework which Twitter build to create easy working layouts that has mobile responsiveness build into them.
I will not go into to much detail on it but if you are interested in it you can check it out at https://getbootstrap.com/.
I have build a function to keep track of the changes inside the input field and utilizing the state, storing the information. The submit function takes set information and using the props functionality sends it over to Main.js.
Inside Main.js it gets stored in the state. That state then sends over the name to the Navbar.js file using the props and displays it on the screen.
Game & Images
This is where the fun part starts.
Here we are going to build the logic to the actual game.
As explained before the Game component will just serve as a layout and server of the images so I won't go into that.
The images part however is much more interesting and holds all the logic to the game.
When I thought about a game of memory I saw any amount of cards with their back facing upwards. Underneath there are pairs of cards, so I set out to create the cards, finding 6 different images that can be duplicated to form 12 cards or 6 pairs. The images I saved in their own folder named Images with a javascript file that exports the images in an array structure.
I created the layout for it using flexbox and the size I saw fit for the playing field, which in this case have a height of 450 px and a width of 570 px. every image inside of it has a height and width of 120 px with a margin of 10px. Therefore it can only fit 4 images in a row. flexbox then breaks those up automatically by using the wrap functionality, it will start a new line whenever the max width of the parent has been reached.
Now that I had the main layout for the game I needed to put the cards into place in a random position (you don't want them all next to each other). The easiest way I thought of doing this is by importing the images from the JavaScript file in the Images folder, which has all the images stored in an array, and then using JavaScript's build in method of map to create a new card from every image that we used.
Before using the map method, I wanted to randomize the position of all the cards so every time the game starts over, the cards will have a new random position. This has been done with the sort method, applying Math.random to it with an adjustment of 0.5.
Afterwards I created a className called "image-blank" which would be the backside of the card. It had a generic image and it would show at the start of the game. The class will then be removed whenever we click on the image so it will show the cards image instead of the back of it.
Now we come down to the nitty and gritty of the application. The actual logic of the game itself as shown below.
So when I thought of the game memory and what data structure to use it became evident that the most choices a memory game will hold at the same time is 2 and that an array is a good data structure to store these in because its fast for this application.
I started of by creating an on click functionality where I would store the entire div of the card at hand into the array. Then I would remove the className of "image-blank" to show the card's image and store it into the array. The removal of the class "image-blank" is being done by my switch functionality as shown below. I added a "check" value to every div so that I can know whether it has been flipped, has a pair, or has not been flipped. If the same imaged is clicked again then it would turn around again, that is what the else part of the if else statement does.
if I then click on an another card, that one should open too and if its the same card as the first one then they should stay face up by setting the "check" value to "found" which I tackle at the start of the handleClick function, if not they should both face down again and be removed from the array, that is what the checkName functionality does.
if all the pictures are flipped and have no className of "image-blank" then the game finishes and we sent the true boolean up to main using the props.
End Game
The End Game component is pretty much the same as the login component, it doesn't have an input form but the shape and size are similar and it has a button. The difference is that it uses the same functionality as the game logic to get a random message from the messages file as shown below.
Well.. That's the end of this article. I hope you have a blast creating this game as much as I did. If you have any questions you can always leave a comment, I'll be sure to answer you in a timely fashion.
If you want to check out the end result of my game go to https://rocky-falls-03487.herokuapp.com/
If you get stuck and don't know how to get further, just check out my github repository at https://github.com/lucvankerkvoort/memory/tree/master/memory-game
Thank you!
With kind regards,
Luc van Kerkvoort
Top comments (2)
Clear tutorial!
Nice! I was thinking about making another game for my next project.