Memory Game Html | Memory Game Using Html Css Javascript







Memory Game Html | Memory Game Using Html Css Javascript 

Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Memory Game Html. We use HTML, Css, and javascript for this Memory Game Html. I hope you enjoy our blog so let’s start with a basic HTML structure for the Memory Game Html.

HTML Code

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Memory Game</title>
<script src="https://kit.fontawesome.com/d77ac583c4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/stylesheet/style.css">
</head>
<body>
<header>
<h1 class="heading">How good is your Memory?</h1>
</header>
<div class="count-container">
<p class="attempts">Attempts: <span class="count"></span></p>
<span class="reset">Reset <i class="fas fa-sync"></i></span>
<p class="time">Time: <span class="min-count">00</span>: <span class="sec-count">00</span></p>
</div>
<div id="game"></div>
<script src="script.js"></script>
</body>
</html>

There is all the HTML code for the Memory Game Html. Now, you can see an output with CSS, then we write javascript for the Memory Game Html.

output

Memory Game Html | Memory Game Using Html Css Javascript

CSS code

 *,  
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 20px 0;
background: #6589f9;
}
.heading {
text-align: center;
background: rgb(0, 15, 46);
padding: 1rem;
color: bisque;
}
.count-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 60%;
margin: auto auto;
padding: 2rem 0;
}
.attempts {
font-size: 2rem;
color: antiquewhite;
}
.reset {
font-size: 2rem;
color: antiquewhite;
cursor: pointer;
border: 1px solid grey;
padding: .5rem;
}
.reset:hover {
transform: scale(1.2);
}
.time {
font-size: 2rem;
color: antiquewhite;
}
.grid {
max-width: 750px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.card {
position: relative;
transition: all 0.4s linear;
transform-style: preserve-3d;
margin: 5px;
}
.card,
.back,
.front {
height: 100px;
width: 100px;
}
.back,
.front {
position: absolute;
backface-visibility: hidden;
}
.front {
background: #fab942 url('../media/question.gif') no-repeat center center /
contain;
}
.back {
transform: rotateY(180deg);
background-color: white;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.selected {
border: 4px solid blue;
transform: rotateY(180deg);
}
.match .front {
border: 0px;
background: rgb(4, 44, 2) url("../media/celebrate.gif") no-repeat center center /
contain !important;
cursor: not-allowed;
transform: none !important;
}

Css Updated output

Memory Game Html | Memory Game Using Html Css Javascript

Javascript code 

 // Card data  
const cardsArray = [
{
name: "pokemon1",
img: "./assets/media/pokemon1.png",
},
{
name: "pokemon2",
img: "./assets/media/pokemon2.png",
},
{
name: "pokemon3",
img: "./assets/media/pokemon3.png",
},
{
name: "pokemon4",
img: "./assets/media/pokemon4.png",
},
{
name: "pokemon5",
img: "./assets/media/pokemon5.png",
},
{
name: "pokemon6",
img: "./assets/media/pokemon6.png",
},
{
name: "pokemon7",
img: "./assets/media/pokemon7.png",
},
{
name: "pokemon8",
img: "./assets/media/pokemon8.png",
},
{
name: "pokemon9",
img: "./assets/media/pokemon9.png",
},
{
name: "pokemon10",
img: "./assets/media/pokemon10.png",
},
{
name: "pokemon11",
img: "./assets/media/pokemon11.png",
},
{
name: "pokemon12",
img: "./assets/media/pokemon12.png",
},
];
// GAME
const game = document.getElementById("game");
const grid = document.createElement("section");
grid.classList.add("grid");
// game.addEventListener("click", secCount);
game.appendChild(grid);
// DOUBLE ARREY
let gameGrid = cardsArray.concat(cardsArray);
// FOR RAMDOMISING THE CARDS EVERY TIME WE REFERESH THE PAGE
gameGrid.sort(() => 0.5 - Math.random());
// CREATE CARDS
gameGrid.forEach((item) => {
const card = document.createElement("div");
card.classList.add(`card`,`${item.name}`);
card.dataset.name = item.name;
const front = document.createElement("div");
front.classList.add("front");
const back = document.createElement("div");
back.classList.add("back");
back.style.backgroundImage = `url(${item.img})`;
grid.appendChild(card);
card.appendChild(front);
card.appendChild(back);
});
// ATTEMPTS COUNT
let attemptCount = 0;
let attempts = document.querySelector(".count");
attempts.innerText = attemptCount;
// TIME COUNT
var sec = 0;
var timeInSec;
let min = 0;
function secCount() {
sec = sec + 1;
document.querySelector(".sec-count").innerText = Math.floor(sec % 60);
timeInSec = setTimeout(secCount, 1000);
min = Math.floor(sec / 60);
document.querySelector(".min-count").innerText = min;
}
var timeStarted = false;
// secCount();
// RESET ALL
let reset = document.querySelector(".reset");
reset.addEventListener("click", () => {
let confirmReset = confirm("Whole game will start again. continue to reset?");
if (confirmReset === true) {
window.location.reload();
}
});
// VARIABLES FOR THE GAME
let firstGuess = "";
let secondGuess = "";
let previousTarget = null;
let count = 0;
let delay = 1200;
// FUNCTIONS FOR THE GAME
const match = () => {
var selected = document.querySelectorAll(".selected");
selected.forEach((card) => {
card.classList.add("match");
});
};
const resetGuesses = () => {
firstGuess = "";
secondGuess = "";
count = 0;
var selected = document.querySelectorAll(".selected");
selected.forEach((card) => {
card.classList.remove("selected");
});
};
// GAME LOGICS
grid.addEventListener("click", function (event) {
!timeStarted && secCount();
timeStarted = true;
let clicked = event.target;
attemptCount++;
attempts.innerText = attemptCount;
if (
clicked.nodeName === "SECTION" ||
clicked === previousTarget ||
clicked.parentNode.classList.contains("selected")
) {
return;
}
if (count < 2) {
count++;
if (count === 1) {
// Assign first guess
firstGuess = clicked.parentNode.dataset.name;
clicked.parentNode.classList.add("selected");
} else {
// Assign second guess
secondGuess = clicked.parentNode.dataset.name;
clicked.parentNode.classList.add("selected");
}
// If both guesses are not empty...
if (firstGuess !== "" && secondGuess !== "") {
// and the first guess matches the second match...
if (firstGuess === secondGuess) {
// run the match function
// match();
// resetGuesses();
setTimeout(match, delay);
setTimeout(resetGuesses, delay);
var matched = document.querySelectorAll(`.${firstGuess}`);
matched.forEach(node => node.addEventListener('click',function (e) {
e.stopPropagation();
}))
} else {
setTimeout(resetGuesses, delay);
}
}
}
// Set previous target to clicked
previousTarget = clicked;
});

Final output

Memory Game Html | Memory Game Using Html Css Javascript

Memory Game Html | Memory Game Using Html Css Javascript

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Memory Game Html. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Memory Game Html using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Share on:

Leave a Comment