In this tutorial, you will learn how to create a Memory Cards Game using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Memory Cards Game is given below.
You can download the full source code (including images) of this JavaScript Memory Cards Game at the end of this article.
JavaScript Memory Cards Game Source Code
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Memory Cards Game</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<ul class="cards">
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-1.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-6.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-3.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-2.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-1.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-5.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-2.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-6.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-3.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-5.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<img src="images/que_icon.svg" alt="icon">
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>script.js
const cards = document.querySelectorAll(".card");
let matched = 0;
let cardOne, cardTwo;
let disableDeck = false;
function flipCard({target: clickedCard}) {
if(cardOne !== clickedCard && !disableDeck) {
clickedCard.classList.add("flip");
if(!cardOne) {
return cardOne = clickedCard;
}
cardTwo = clickedCard;
disableDeck = true;
let cardOneImg = cardOne.querySelector(".back-view img").src,
cardTwoImg = cardTwo.querySelector(".back-view img").src;
matchCards(cardOneImg, cardTwoImg);
}
}
function matchCards(img1, img2) {
if(img1 === img2) {
matched++;
if(matched == 8) {
setTimeout(() => {
return shuffleCard();
}, 1000);
}
cardOne.removeEventListener("click", flipCard);
cardTwo.removeEventListener("click", flipCard);
cardOne = cardTwo = "";
return disableDeck = false;
}
setTimeout(() => {
cardOne.classList.add("shake");
cardTwo.classList.add("shake");
}, 400);
setTimeout(() => {
cardOne.classList.remove("shake", "flip");
cardTwo.classList.remove("shake", "flip");
cardOne = cardTwo = "";
disableDeck = false;
}, 1200);
}
function shuffleCard() {
matched = 0;
disableDeck = false;
cardOne = cardTwo = "";
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];
arr.sort(() => Math.random() > 0.5 ? 1 : -1);
cards.forEach((card, i) => {
card.classList.remove("flip");
let imgTag = card.querySelector(".back-view img");
imgTag.src = `images/img-${arr[i]}.png`;
card.addEventListener("click", flipCard);
});
}
shuffleCard();
cards.forEach(card => {
card.addEventListener("click", flipCard);
});style.css
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #6563FF;
}
.wrapper{
padding: 25px;
border-radius: 10px;
background: #F8F8F8;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.cards, .card, .view{
display: flex;
align-items: center;
justify-content: center;
}
.cards{
height: 400px;
width: 400px;
flex-wrap: wrap;
justify-content: space-between;
}
.cards .card{
cursor: pointer;
list-style: none;
user-select: none;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
height: calc(100% / 4 - 10px);
width: calc(100% / 4 - 10px);
}
.card.shake{
animation: shake 0.35s ease-in-out;
}
@keyframes shake {
0%, 100%{
transform: translateX(0);
}
20%{
transform: translateX(-13px);
}
40%{
transform: translateX(13px);
}
60%{
transform: translateX(-8px);
}
80%{
transform: translateX(8px);
}
}
.card .view{
width: 100%;
height: 100%;
position: absolute;
border-radius: 7px;
background: #fff;
pointer-events: none;
backface-visibility: hidden;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
transition: transform 0.25s linear;
}
.card .front-view img{
width: 19px;
}
.card .back-view img{
max-width: 45px;
}
.card .back-view{
transform: rotateY(-180deg);
}
.card.flip .back-view{
transform: rotateY(0);
}
.card.flip .front-view{
transform: rotateY(180deg);
}
@media screen and (max-width: 700px) {
.cards{
height: 350px;
width: 350px;
}
.card .front-view img{
width: 17px;
}
.card .back-view img{
max-width: 40px;
}
}
@media screen and (max-width: 530px) {
.cards{
height: 300px;
width: 300px;
}
.card .front-view img{
width: 15px;
}
.card .back-view img{
max-width: 35px;
}
}