Memory Game Using HTML, CSS, & JavaScript
.png "Memory Game Html | 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
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
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
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
