"Hey! In this project, we will be creating a popular memory game using JavaScript. This game is a challenge to memory and concentration skills, where players must find matching pairs of face-down cards. We will use our JavaScript skills to create a distinct and supportive user interface for this exciting game." Let's start learning how to build this game and make it a fun and motivating experience for everyone!"
How To Crate Memory Game Javascript Project.[Source Code]
To create this website, you'll need two files: an HTML file and a CSS file. Start by crafting an HTML file named index.html. Remember to ensure that the file has a .html extension.
<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>
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);
};
</script>
</body>
CSS adds style to an HTML page, making it visually appealing. To enhance the attractiveness of your page, generate a CSS file named style.css. Ensure that the file has a .css extension.
We trust that you'll appreciate this captivating How To Crate Memory Game Javascript Project.
How To Crate Memory Game Javascript Project, please feel free to reach out to us. You can either contact us directly or leave a comment, and we will do our best to assist you promptly.
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser. The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
