Memory Game Using HTML, CSS, & JavaScript

Memory Game Using HTML, CSS, & JavaScript (Source Code)

Memory Game Using HTML, CSS, & JavaScript

Memory Game Using HTML, CSS, & JavaScript
Memory Game Using HTML, CSS, & JavaScript

 

Welcome to Code With Random blog. In this blog, we learn how to create the Memory Game. We use HTML, CSS, and JavaScript for this Memory Game.

I hope you enjoy our blog so let’s start with a basic html structure for the Memory Game.

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>

There is all the html code for the Memory Game. we use font awesome icon CDN in html files and link Css and JavaScript fil.

50+ HTML, CSS & JavaScript Projects With Source Code

Now, you can see output without Css and JavaScript. then we write Css for styling the Memory game and give the main functionality using javascript.

Output

Memory Game Using HTML, CSS, & JavaScript
Memory Game Using HTML, CSS, & JavaScript

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

This is all css code for the memory game, now you see the output with only html +css code.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Output

Memory Game Using HTML, CSS, & JavaScript
Memory Game Using HTML, CSS, & JavaScript

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

10+ HTML CSS Projects For Beginners with Source Code

now our javascript code is complete. here you can see the final output👇

Final Output Of Memory Game Using JavaScript

Restaurant Website Using HTML and CSS

 

Memory Game Using HTML, CSS, & JavaScript
Memory Game Using HTML, CSS, & JavaScript

 

Here is our updated output with html,css, and javascript. I hope you like the Memory Game. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Personal Portfolio Website Using HTML & CSS With Source Code

In this post, we learn how to Create a Memory Game with HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Thank You And Keep Learning!!!

Written by – Code With Random/Anki



Leave a Reply