Memory Game Html | Memory Game Using Html Css Javascript

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

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 

Post a Comment

Previous Post Next Post