Free Coding Ebook 👉 Get Now
Memory Game using HTML, CSS & JavaScript
Introduction
Hello everyone. Welcome to today’s tutorial on Codewithrandom. We’ll learn how to make Memory Game in which we have different animals and we have to pair them by remembering their place in a grid. This project will is good for beginners and help them to build their front-end development skills. In Today’s session, We will use HTML, CSS, and JavaScript to complete this Memory Game Project.
Project Description
Step 1
The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements to make Memory Game Project.
Step 2
Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment in the Memory Game Project.
ADVERTISEMENT
Step 3
At last we will use JS (JavaScript) which will add a logic to make the Memory Game Project responsive from the user end.
I hope you have got an idea about the project.
HTML Code for Memory Game
First we’ll start with creating the structure of the Memory Game project for that as you can see the above code we have used all the necessary elements & attributes to setup the structure. Let us know code the CSS part to add styling and aligned the tags.
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Memory Game</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" /> <!-- Stylesheet --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="wrapper"> <div class="stats-container"> <div id="moves-count"></div> <div id="time"></div> </div> <div class="game-container"></div> <button id="stop" class="hide">Stop Game</button> </div> <div class="controls-container"> <p id="result"></p> <button id="start">Start Game</button> </div> <!-- Script --> <script src="script.js"></script> </body> </html>
10+ Javascript Projects For Beginners With Source Code
CSS Code for Memory Game
Second comes the CSS code in which we have styled for the structure we have padded as well as aligned the Memory Game project so that it is properly situated and doesn’t get messy with suitable CSS elements. Now lets code the JavaScript part to make responsive.
* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #f4c531; } .wrapper { box-sizing: content-box; width: 26.87em; padding: 2.5em 3em; background-color: #ffffff; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 0.6em; box-shadow: 0 0.9em 2.8em rgba(86, 66, 0, 0.2); } .game-container { position: relative; width: 100%; display: grid; gap: 0.6em; } .stats-container { text-align: right; margin-bottom: 1.2em; } .stats-container span { font-weight: 600; } .card-container { position: relative; width: 6.25em; height: 6.25em; cursor: pointer; } .card-before, .card-after { position: absolute; border-radius: 5px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border: 4px solid #000000; transition: transform 0.7s ease-out; backface-visibility: hidden; } .card-before { background-color: #f4c531; font-size: 2.8em; font-weight: 600; } .card-after { background-color: #ffffff; transform: rotateY(180deg); } .card-container.flipped .card-before { transform: rotateY(180deg); } .card-container.flipped .card-after { transform: rotateY(0deg); } .controls-container { position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; background-color: #f4c531; top: 0; } button { border: none; border-radius: 0.3em; padding: 1em 1.5em; cursor: pointer; } #stop { font-size: 1.1em; display: block; margin: 1.1em auto 0 auto; background-color: #000000; color: #ffffff; } .controls-container button { font-size: 1.3em; box-shadow: 0 0.6em 2em rgba(86, 66, 0, 0.2); } .hide { display: none; } #result { text-align: center; } #result h2 { font-size: 2.5em; } #result h4 { font-size: 1.8em; margin: 0.6em 0 1em 0; }
Portfolio Website using HTML and CSS (Source Code)
JavaScript Code for Memory Game
Last stage of the project the JavaScript in which we have added the logical and coded as per the requirement with some conditions. Let us see the Final Output of the project Memory Game using HTML, CSS & JavaScript (Source Code).
JOIN TELEGRAM FOR IMAGE AND SOURCE CODE – CLICK HERE
const moves = document.getElementById("moves-count"); const timeValue = document.getElementById("time"); const startButton = document.getElementById("start"); const stopButton = document.getElementById("stop"); const gameContainer = document.querySelector(".game-container"); const result = document.getElementById("result"); const controls = document.querySelector(".controls-container"); let cards; let interval; let firstCard = false; let secondCard = false; //Items array const items = [ { name: "bee", image: "bee.png" }, { name: "crocodile", image: "crocodile.png" }, { name: "macaw", image: "macaw.png" }, { name: "gorilla", image: "gorilla.png" }, { name: "tiger", image: "tiger.png" }, { name: "monkey", image: "monkey.png" }, { name: "chameleon", image: "chameleon.png" }, { name: "piranha", image: "piranha.png" }, { name: "anaconda", image: "anaconda.png" }, { name: "sloth", image: "sloth.png" }, { name: "cockatoo", image: "cockatoo.png" }, { name: "toucan", image: "toucan.png" }, ]; //Initial Time let seconds = 0, minutes = 0; //Initial moves and win count let movesCount = 0, winCount = 0; //For timer const timeGenerator = () => { seconds += 1; //minutes logic if (seconds >= 60) { minutes += 1; seconds = 0; } //format time before displaying let secondsValue = seconds < 10 ? `0${seconds}` : seconds; let minutesValue = minutes < 10 ? `0${minutes}` : minutes; timeValue.innerHTML = `<span>Time:</span>${minutesValue}:${secondsValue}`; }; //For calculating moves const movesCounter = () => { movesCount += 1; moves.innerHTML = `<span>Moves:</span>${movesCount}`; }; //Pick random objects from the items array const generateRandom = (size = 4) => { //temporary array let tempArray = [...items]; //initializes cardValues array let cardValues = []; //size should be double (4*4 matrix)/2 since pairs of objects would exist size = (size * size) / 2; //Random object selection for (let i = 0; i < size; i++) { const randomIndex = Math.floor(Math.random() * tempArray.length); cardValues.push(tempArray[randomIndex]); //once selected remove the object from temp array tempArray.splice(randomIndex, 1); } return cardValues; }; const matrixGenerator = (cardValues, size = 4) => { gameContainer.innerHTML = ""; cardValues = [...cardValues, ...cardValues]; //simple shuffle cardValues.sort(() => Math.random() - 0.5); for (let i = 0; i < size * size; i++) { /* Create Cards before => front side (contains question mark) after => back side (contains actual image); data-card-values is a custom attribute which stores the names of the cards to match later */ gameContainer.innerHTML += ` <div class="card-container" data-card-value="${cardValues[i].name}"> <div class="card-before">?</div> <div class="card-after"> <img src="${cardValues[i].image}" class="image"/></div> </div> `; } //Grid gameContainer.style.gridTemplateColumns = `repeat(${size},auto)`; //Cards cards = document.querySelectorAll(".card-container"); cards.forEach((card) => { card.addEventListener("click", () => { //If selected card is not matched yet then only run (i.e already matched card when clicked would be ignored) if (!card.classList.contains("matched")) { //flip the cliked card card.classList.add("flipped"); //if it is the firstcard (!firstCard since firstCard is initially false) if (!firstCard) { //so current card will become firstCard firstCard = card; //current cards value becomes firstCardValue firstCardValue = card.getAttribute("data-card-value"); } else { //increment moves since user selected second card movesCounter(); //secondCard and value secondCard = card; let secondCardValue = card.getAttribute("data-card-value"); if (firstCardValue == secondCardValue) { //if both cards match add matched class so these cards would beignored next time firstCard.classList.add("matched"); secondCard.classList.add("matched"); //set firstCard to false since next card would be first now firstCard = false; //winCount increment as user found a correct match winCount += 1; //check if winCount ==half of cardValues if (winCount == Math.floor(cardValues.length / 2)) { result.innerHTML = `<h2>You Won</h2> <h4>Moves: ${movesCount}</h4>`; stopGame(); } } else { //if the cards dont match //flip the cards back to normal let [tempFirst, tempSecond] = [firstCard, secondCard]; firstCard = false; secondCard = false; let delay = setTimeout(() => { tempFirst.classList.remove("flipped"); tempSecond.classList.remove("flipped"); }, 900); } } } }); }); }; //Start game startButton.addEventListener("click", () => { movesCount = 0; seconds = 0; minutes = 0; //controls amd buttons visibility controls.classList.add("hide"); stopButton.classList.remove("hide"); startButton.classList.add("hide"); //Start timer interval = setInterval(timeGenerator, 1000); //initial moves moves.innerHTML = `<span>Moves:</span> ${movesCount}`; initializer(); }); //Stop game stopButton.addEventListener( "click", (stopGame = () => { controls.classList.remove("hide"); stopButton.classList.add("hide"); startButton.classList.remove("hide"); clearInterval(interval); }) ); //Initialize values and func calls const initializer = () => { result.innerText = ""; winCount = 0; let cardValues = generateRandom(); console.log(cardValues); matrixGenerator(cardValues); };
50+ HTML, CSS & JavaScript Projects With Source Code
Final Output
We have Successfully created our Memory Game using HTML, CSS & JavaScript (Source Code). You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Code Idea – codingartist
Written By – Harsh Sawant
Code By – @harshh9