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
HTML
x
146
146
1
2
<html lang="en" dir="ltr">3
<head>4
<meta charset="utf-8"> 5
<title>Memory Cards Game</title>6
<link rel="stylesheet" href="style.css">7
<meta name="viewport" content="width=device-width, initial-scale=1.0">8
</head>9
<body>10
<div class="wrapper">11
<ul class="cards">12
<li class="card">13
<div class="view front-view">14
<img src="images/que_icon.svg" alt="icon">15
</div>16
<div class="view back-view">17
<img src="images/img-1.png" alt="card-img">18
</div>19
</li>20
<li class="card">21
<div class="view front-view">22
<img src="images/que_icon.svg" alt="icon">23
</div>24
<div class="view back-view">25
<img src="images/img-6.png" alt="card-img">26
</div>27
</li>28
<li class="card">29
<div class="view front-view">30
<img src="images/que_icon.svg" alt="icon">31
</div>32
<div class="view back-view">33
<img src="images/img-3.png" alt="card-img">34
</div>35
</li>36
<li class="card">37
<div class="view front-view">38
<img src="images/que_icon.svg" alt="icon">39
</div>40
<div class="view back-view">41
<img src="images/img-2.png" alt="card-img">42
</div>43
</li>44
<li class="card">45
<div class="view front-view">46
<img src="images/que_icon.svg" alt="icon">47
</div>48
<div class="view back-view">49
<img src="images/img-1.png" alt="card-img">50
</div>51
</li>52
<li class="card">53
<div class="view front-view">54
<img src="images/que_icon.svg" alt="icon">55
</div>56
<div class="view back-view">57
<img src="images/img-5.png" alt="card-img">58
</div>59
</li>60
<li class="card">61
<div class="view front-view">62
<img src="images/que_icon.svg" alt="icon">63
</div>64
<div class="view back-view">65
<img src="images/img-2.png" alt="card-img">66
</div>67
</li>68
<li class="card">69
<div class="view front-view">70
<img src="images/que_icon.svg" alt="icon">71
</div>72
<div class="view back-view">73
<img src="images/img-6.png" alt="card-img">74
</div>75
</li>76
<li class="card">77
<div class="view front-view">78
<img src="images/que_icon.svg" alt="icon">79
</div>80
<div class="view back-view">81
<img src="images/img-3.png" alt="card-img">82
</div>83
</li>84
<li class="card">85
<div class="view front-view">86
<img src="images/que_icon.svg" alt="icon">87
</div>88
<div class="view back-view">89
<img src="images/img-4.png" alt="card-img">90
</div>91
</li>92
<li class="card">93
<div class="view front-view">94
<img src="images/que_icon.svg" alt="icon">95
</div>96
<div class="view back-view">97
<img src="images/img-5.png" alt="card-img">98
</div>99
</li>100
<li class="card">101
<div class="view front-view">102
<img src="images/que_icon.svg" alt="icon">103
</div>104
<div class="view back-view">105
<img src="images/img-4.png" alt="card-img">106
</div>107
</li>108
<li class="card">109
<div class="view front-view">110
<img src="images/que_icon.svg" alt="icon">111
</div>112
<div class="view back-view">113
<img src="images/img-4.png" alt="card-img">114
</div>115
</li>116
<li class="card">117
<div class="view front-view">118
<img src="images/que_icon.svg" alt="icon">119
</div>120
<div class="view back-view">121
<img src="images/img-4.png" alt="card-img">122
</div>123
</li>124
<li class="card">125
<div class="view front-view">126
<img src="images/que_icon.svg" alt="icon">127
</div>128
<div class="view back-view">129
<img src="images/img-4.png" alt="card-img">130
</div>131
</li>132
<li class="card">133
<div class="view front-view">134
<img src="images/que_icon.svg" alt="icon">135
</div>136
<div class="view back-view">137
<img src="images/img-4.png" alt="card-img">138
</div>139
</li>140
</ul>141
</div>142
143
<script src="script.js"></script>144
145
</body>146
</html>script.js
JavaScript
1
65
65
1
const cards = document.querySelectorAll(".card");2
3
let matched = 0;4
let cardOne, cardTwo;5
let disableDeck = false;6
7
function flipCard({target: clickedCard}) {8
if(cardOne !== clickedCard && !disableDeck) {9
clickedCard.classList.add("flip");10
if(!cardOne) {11
return cardOne = clickedCard;12
}13
cardTwo = clickedCard;14
disableDeck = true;15
let cardOneImg = cardOne.querySelector(".back-view img").src,16
cardTwoImg = cardTwo.querySelector(".back-view img").src;17
matchCards(cardOneImg, cardTwoImg);18
}19
}20
21
function matchCards(img1, img2) {22
if(img1 === img2) {23
matched++;24
if(matched == 8) {25
setTimeout(() => {26
return shuffleCard();27
}, 1000);28
}29
cardOne.removeEventListener("click", flipCard);30
cardTwo.removeEventListener("click", flipCard);31
cardOne = cardTwo = "";32
return disableDeck = false;33
}34
setTimeout(() => {35
cardOne.classList.add("shake");36
cardTwo.classList.add("shake");37
}, 400);38
39
setTimeout(() => {40
cardOne.classList.remove("shake", "flip");41
cardTwo.classList.remove("shake", "flip");42
cardOne = cardTwo = "";43
disableDeck = false;44
}, 1200);45
}46
47
function shuffleCard() {48
matched = 0;49
disableDeck = false;50
cardOne = cardTwo = "";51
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];52
arr.sort(() => Math.random() > 0.5 ? 1 : -1);53
cards.forEach((card, i) => {54
card.classList.remove("flip");55
let imgTag = card.querySelector(".back-view img");56
imgTag.src = `images/img-${arr[i]}.png`;57
card.addEventListener("click", flipCard);58
});59
}60
61
shuffleCard();62
63
cards.forEach(card => {64
card.addEventListener("click", flipCard);65
});style.css
CSS
1
114
114
1
/* Import Google Font - Poppins */2
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');3
*{4
margin: 0;5
padding: 0;6
box-sizing: border-box;7
font-family: 'Poppins', sans-serif;8
}9
body{10
display: flex;11
align-items: center;12
justify-content: center;13
min-height: 100vh;14
background: #6563FF;15
}16
.wrapper{17
padding: 25px;18
border-radius: 10px;19
background: #F8F8F8;20
box-shadow: 0 10px 30px rgba(0,0,0,0.1);21
}22
.cards, .card, .view{23
display: flex;24
align-items: center;25
justify-content: center;26
}27
.cards{28
height: 400px;29
width: 400px;30
flex-wrap: wrap;31
justify-content: space-between;32
}33
.cards .card{34
cursor: pointer;35
list-style: none;36
user-select: none;37
position: relative;38
perspective: 1000px;39
transform-style: preserve-3d;40
height: calc(100% / 4 - 10px);41
width: calc(100% / 4 - 10px);42
}43
.card.shake{44
animation: shake 0.35s ease-in-out;45
}46
@keyframes shake {47
0%, 100%{48
transform: translateX(0);49
}50
20%{51
transform: translateX(-13px);52
}53
40%{54
transform: translateX(13px);55
}56
60%{57
transform: translateX(-8px);58
}59
80%{60
transform: translateX(8px);61
}62
}63
.card .view{64
width: 100%;65
height: 100%;66
position: absolute;67
border-radius: 7px;68
background: #fff;69
pointer-events: none;70
backface-visibility: hidden;71
box-shadow: 0 3px 10px rgba(0,0,0,0.1);72
transition: transform 0.25s linear;73
}74
.card .front-view img{75
width: 19px;76
}77
.card .back-view img{78
max-width: 45px;79
}80
.card .back-view{81
transform: rotateY(-180deg);82
}83
.card.flip .back-view{84
transform: rotateY(0);85
}86
.card.flip .front-view{87
transform: rotateY(180deg);88
}89
90
@media screen and (max-width: 700px) {91
.cards{92
height: 350px;93
width: 350px;94
}95
.card .front-view img{96
width: 17px;97
}98
.card .back-view img{99
max-width: 40px;100
}101
}102
103
@media screen and (max-width: 530px) {104
.cards{105
height: 300px;106
width: 300px;107
}108
.card .front-view img{109
width: 15px;110
}111
.card .back-view img{112
max-width: 35px;113
}114
}