Memory Game Using HTML, CSS, & JavaScript

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.

Using CSS we present Memory Game Using HTML, CSS, & JavaScript projects with source code available for you to copy and paste directly into your own project.

 

HTML Code For Memory Game

<!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>

Fancy tab bar animation | Tab bar UI design Html CSS javascript

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

CSS Code For Memory Game

*,
*::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: 0.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;
}

Difference Between Web Developer Vs Web Designer

CSS Updated output

JavaScript Code For Memory Game

// 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;  
});

Create Moving Car Animation Using HTML &Css

Final output

 

 

 

Now we have completed our javascript section,  Here is our updated output with javascript. Hope 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.

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.

Thank You And Keep Learning!!!

Written by – Code With Random/Anki

Leave a Reply