Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a memory game. To build this game, we need HTML, CSS and Javascript. This project is suitable for javascript intermediates.
If you are looking for more projects to improve your javascript skills, check out this playlist here. This playlist consists of 90+ javascript projects. These projects come with varying difficulties, from simple to quite complex.
Let us take a look at how this game works. The game begins with a start screen. The user clicks on the ‘Start’ button to get the game started. We display the game screen. The game screen consists of a 4 x 4 grid of cards. Initially, we turn the cards upside down. The user has to click on each card to flip it to see what the card consists of. When the user clicks two matching cards in a row, we increment the win count by 1.
When the win count is equal to 8, the player wins. We display the result screen. We show the total moves required by the user and the start button on the result screen.
Video Tutorial:
If you prefer to learn by coding along to a video tutorial rather than reading this blog post, you can check out this video here down below. Also, subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called – “Memory Game”. Inside this folder, we have three files – index.html, style.css and script.js. These are the HTML document, the stylesheet and the script file.
HTML:
We start with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Memory Game</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="stats-container">
<div id="moves-count"></div>
<div id="time"></div>
</div>
<div class="game-container"></div>
<button id="stop" class="hide">Stop Game</button>
</div>
<div class="controls-container">
<p id="result"></p>
<button id="start">Start Game</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style these elements using CSS. For this, copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f4c531;
}
.wrapper {
box-sizing: content-box;
width: 26.87em;
padding: 2.5em 3em;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 0.6em;
box-shadow: 0 0.9em 2.8em rgba(86, 66, 0, 0.2);
}
.game-container {
position: relative;
width: 100%;
display: grid;
gap: 0.6em;
}
.stats-container {
text-align: right;
margin-bottom: 1.2em;
}
.stats-container span {
font-weight: 600;
}
.card-container {
position: relative;
width: 6.25em;
height: 6.25em;
cursor: pointer;
}
.card-before,
.card-after {
position: absolute;
border-radius: 5px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #000000;
transition: transform 0.7s ease-out;
backface-visibility: hidden;
}
.card-before {
background-color: #f4c531;
font-size: 2.8em;
font-weight: 600;
}
.card-after {
background-color: #ffffff;
transform: rotateY(180deg);
}
.card-container.flipped .card-before {
transform: rotateY(180deg);
}
.card-container.flipped .card-after {
transform: rotateY(0deg);
}
.controls-container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
background-color: #f4c531;
top: 0;
}
button {
border: none;
border-radius: 0.3em;
padding: 1em 1.5em;
cursor: pointer;
}
#stop {
font-size: 1.1em;
display: block;
margin: 1.1em auto 0 auto;
background-color: #000000;
color: #ffffff;
}
.controls-container button {
font-size: 1.3em;
box-shadow: 0 0.6em 2em rgba(86, 66, 0, 0.2);
}
.hide {
display: none;
}
#result {
text-align: center;
}
#result h2 {
font-size: 2.5em;
}
#result h4 {
font-size: 1.8em;
margin: 0.6em 0 1em 0;
}
Javascript:
We finally add functionality to this game. To do this, we use javascript. Now copy the code below and paste it into your script file.
const moves = document.getElementById("moves-count");
const timeValue = document.getElementById("time");
const startButton = document.getElementById("start");
const stopButton = document.getElementById("stop");
const gameContainer = document.querySelector(".game-container");
const result = document.getElementById("result");
const controls = document.querySelector(".controls-container");
let cards;
let interval;
let firstCard = false;
let secondCard = false;
//Items array
const items = [
{ name: "bee", image: "bee.png" },
{ name: "crocodile", image: "crocodile.png" },
{ name: "macaw", image: "macaw.png" },
{ name: "gorilla", image: "gorilla.png" },
{ name: "tiger", image: "tiger.png" },
{ name: "monkey", image: "monkey.png" },
{ name: "chameleon", image: "chameleon.png" },
{ name: "piranha", image: "piranha.png" },
{ name: "anaconda", image: "anaconda.png" },
{ name: "sloth", image: "sloth.png" },
{ name: "cockatoo", image: "cockatoo.png" },
{ name: "toucan", image: "toucan.png" },
];
//Initial Time
let seconds = 0,
minutes = 0;
//Initial moves and win count
let movesCount = 0,
winCount = 0;
//For timer
const timeGenerator = () => {
seconds += 1;
//minutes logic
if (seconds >= 60) {
minutes += 1;
seconds = 0;
}
//format time before displaying
let secondsValue = seconds < 10 ? `0${seconds}` : seconds;
let minutesValue = minutes < 10 ? `0${minutes}` : minutes;
timeValue.innerHTML = `<span>Time:</span>${minutesValue}:${secondsValue}`;
};
//For calculating moves
const movesCounter = () => {
movesCount += 1;
moves.innerHTML = `<span>Moves:</span>${movesCount}`;
};
//Pick random objects from the items array
const generateRandom = (size = 4) => {
//temporary array
let tempArray = [...items];
//initializes cardValues array
let cardValues = [];
//size should be double (4*4 matrix)/2 since pairs of objects would exist
size = (size * size) / 2;
//Random object selection
for (let i = 0; i < size; i++) {
const randomIndex = Math.floor(Math.random() * tempArray.length);
cardValues.push(tempArray[randomIndex]);
//once selected remove the object from temp array
tempArray.splice(randomIndex, 1);
}
return cardValues;
};
const matrixGenerator = (cardValues, size = 4) => {
gameContainer.innerHTML = "";
cardValues = [...cardValues, ...cardValues];
//simple shuffle
cardValues.sort(() => Math.random() - 0.5);
for (let i = 0; i < size * size; i++) {
/*
Create Cards
before => front side (contains question mark)
after => back side (contains actual image);
data-card-values is a custom attribute which stores the names of the cards to match later
*/
gameContainer.innerHTML += `
<div class="card-container" data-card-value="${cardValues[i].name}">
<div class="card-before">?</div>
<div class="card-after">
<img src="${cardValues[i].image}" class="image"/></div>
</div>
`;
}
//Grid
gameContainer.style.gridTemplateColumns = `repeat(${size},auto)`;
//Cards
cards = document.querySelectorAll(".card-container");
cards.forEach((card) => {
card.addEventListener("click", () => {
//If selected card is not matched yet then only run (i.e already matched card when clicked would be ignored)
if (!card.classList.contains("matched")) {
//flip the cliked card
card.classList.add("flipped");
//if it is the firstcard (!firstCard since firstCard is initially false)
if (!firstCard) {
//so current card will become firstCard
firstCard = card;
//current cards value becomes firstCardValue
firstCardValue = card.getAttribute("data-card-value");
} else {
//increment moves since user selected second card
movesCounter();
//secondCard and value
secondCard = card;
let secondCardValue = card.getAttribute("data-card-value");
if (firstCardValue == secondCardValue) {
//if both cards match add matched class so these cards would beignored next time
firstCard.classList.add("matched");
secondCard.classList.add("matched");
//set firstCard to false since next card would be first now
firstCard = false;
//winCount increment as user found a correct match
winCount += 1;
//check if winCount ==half of cardValues
if (winCount == Math.floor(cardValues.length / 2)) {
result.innerHTML = `<h2>You Won</h2>
<h4>Moves: ${movesCount}</h4>`;
stopGame();
}
} else {
//if the cards dont match
//flip the cards back to normal
let [tempFirst, tempSecond] = [firstCard, secondCard];
firstCard = false;
secondCard = false;
let delay = setTimeout(() => {
tempFirst.classList.remove("flipped");
tempSecond.classList.remove("flipped");
}, 900);
}
}
}
});
});
};
//Start game
startButton.addEventListener("click", () => {
movesCount = 0;
seconds = 0;
minutes = 0;
//controls amd buttons visibility
controls.classList.add("hide");
stopButton.classList.remove("hide");
startButton.classList.add("hide");
//Start timer
interval = setInterval(timeGenerator, 1000);
//initial moves
moves.innerHTML = `<span>Moves:</span> ${movesCount}`;
initializer();
});
//Stop game
stopButton.addEventListener(
"click",
(stopGame = () => {
controls.classList.remove("hide");
stopButton.classList.add("hide");
startButton.classList.remove("hide");
clearInterval(interval);
})
);
//Initialize values and func calls
const initializer = () => {
result.innerText = "";
winCount = 0;
let cardValues = generateRandom();
console.log(cardValues);
matrixGenerator(cardValues);
};
Your memory game is now ready. That’s it for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the download button below. Also, I would love to hear from you guys, so don’t forget to leave your queries, suggestions and feedback in the comments below.
Happy Coding!
Hello
thank you for this tutorial its awesome.
and i liked the game and i want to open it on android phone but the scale not right
can you edit it to make it max weight equal to smart phones
I want to put this game on my website so where I need to paste those files basically the JAVA script files or the total folder together
Sorry, I don’t understand js code from line 51 to line 141. I don’t know why you use so many variables. Thanks and greatings.
c bien mais ce serai d avantage mieu avec des explications parce que là on a directement la réponse à copier coller, ce serai mieux un réel tutoriel etape par etape reellement expliqué et à la fin le code à copier coller:
nous fesons ça car…. puis ça .. et enfin voila le code à copier coller
thank you for this tutorial its awesome.
hello. for me is not working properly. Can i chat to you somwhere so u can help me 5 mins? Thanks. 😀
Thank you for posting this. I am a beginner at Javascript and like to learn by example.
I noticed that if you double click a single tile in the game, it appears to be accepted as a match without clicking a second tile.
I’m trying to figure out how to have the script avoid this
Thanks