Demo:
To create the CSS & JavaScript Memory Game you will need 9 images (one image of the backside of the card, and 8 when the card is open). For learning you can use mine below:
Step1.
Add HTML
<div class="memory-container">
<div id="memory-game">
<div class="memory-card" data-inx="0"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="1"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="2"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="3"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="4"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="5"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="6"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="7"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="8"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="9"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="10"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="11"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="12"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="13"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="14"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
<div class="memory-card" data-inx="15"><img src="https://lenadesign.org/wp-content/uploads/2021/06/show-0.png"></div>
</div>
<button id="restartButton">Restart</button>
</div>Step2.
Add CSS
body {
background-color: #e5e5e5;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
#memory-game {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 5px;
max-width: 500px;
margin: 0 auto;
}
.memory-card {
width:100px;
height:100px;
padding: 0;
cursor: pointer;
transition: transform .3s;
}
.memory-card:hover {
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.memory-card:active {
transform: rotateY(165deg);
}
.memory-card.front { background-color: #e9c46a; }
.memory-card.right { background-color: #9fffcb; }
.memory-card.wrong { background-color: #e76f51; }
#restartButton {
position: relative;
left:167px;
top:7px;
color: #264653;
font-weight: bold;
border: 5px solid #264653;
padding: 10px;
transition: .2s;
}
#restartButton:hover {
color: white;
background-color:#264653;
}Step3.
Add JavaScript
var memory = {
url : "https://lenadesign.org/wp-content/uploads/2021/06/",
grid : null,
mWrap : null,
mCards : null,
types : 8,
time : 600,
loaded : 0,
moves : 0,
last : null,
matches : null,
locked : null,
preload : function () {
memory.mWrap = document.getElementById("memory-game");
for (let i=0; i<=memory.types; i++) {
let img = document.createElement("img");
img.onload = function(){
memory.loaded++;
if (memory.loaded == memory.types+1) { memory.init(); }
};
img.src = memory.url+"show-"+i+".png";
}
},
init : function () {
if (memory.locked != null) {
clearTimeout(memory.locked);
memory.locked = null;
}
memory.mCards = [];
memory.grid = [];
memory.matches = [],
memory.moves = 0;
memory.last = null;
memory.locked = null;
memory.mWrap.innerHTML = "";
let current = memory.types * 2, temp, random;
for (var i=1; i<=memory.types; i++) {
memory.grid.push(i);
memory.grid.push(i);
}
while (0 !== current) {
random = Math.floor(Math.random() * current);
current -= 1;
temp = memory.grid[current];
memory.grid[current] = memory.grid[random];
memory.grid[random] = temp;
}
for (let i=0; i<memory.types * 2; i++) {
let card = document.createElement("div");
card.className = "memory-card";
card.innerHTML = `<img src='${memory.url}show-0.png'/>`;
card.dataset.idx = i;
card.onclick = memory.front;
memory.mWrap.appendChild(card);
memory.mCards.push(card);
}
},
front : function () { if (memory.locked == null) {
memory.moves++;
let idx = this.dataset.idx;
this.innerHTML = `<img src='${memory.url}show-${memory.grid[idx]}.png'/>`;
this.onclick = "";
this.classList.add("front");
if (memory.last == null) { memory.last = idx; }
else {
if (memory.grid[idx] == memory.grid[memory.last]) {
memory.matches.push(memory.last);
memory.matches.push(idx);
memory.mCards[memory.last].classList.remove("front");
memory.mCards[idx].classList.remove("front");
memory.mCards[memory.last].classList.add("right");
memory.mCards[idx].classList.add("right");
memory.last = null;
if (memory.matches.length == memory.types * 2) {
alert("YOU WIN! Total moves: " + memory.moves);
memory.init();
}
}
else {
memory.mCards[memory.last].classList.add("wrong");
memory.mCards[idx].classList.add("wrong");
memory.locked = setTimeout(function(){
memory.back(idx, memory.last);
}, memory.time);
}
}
}},
back : function (one, two) {
one = memory.mCards[one];
two = memory.mCards[two];
one.classList.remove("wrong");
two.classList.remove("wrong");
one.classList.remove("front");
two.classList.remove("front");
one.innerHTML = `<img src='${memory.url}show-0.png'/>`;
two.innerHTML = `<img src='${memory.url}show-0.png'/>`;
one.onclick = memory.front;
two.onclick = memory.front;
one.style.transform = "rotateY(165deg)";
two.style.transform = "rotateY(165deg)";
memory.locked = null;
memory.last = null;
}
};
window.addEventListener("DOMContentLoaded", memory.preload);Step4.
Add jQuery
$("#restartButton").on("click", function() {
alert("Are you sure you want to start a new game?");
history.go(0);
});Enjoy coding!
Read also: