JavaScript Memory Card Game | electro4u
Memory Card Game in JavaScript
Create a memory card matching game where users need to match pairs of cards within a time limit. This game is a great way to test your memory and concentration skills.
To create this game, you will need to:
- Create an HTML file with a grid to display the cards.
- Create a CSS file to style the cards and the grid.
- Create a JavaScript file to add the game logic.
HTML
The following HTML code will create a grid with 16 cards:
<!DOCTYPE html>
<html>
<head>
<title>Memory Card Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid">
<div class="card" data-card="1"></div>
<div class="card" data-card="2"></div>
...
<div class="card" data-card="16"></div>
</div>
</body>
</html>CSS
The following CSS code will style the cards and the grid:
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.card {
width: 50px;
height: 50px;
background-color: gray;
margin: 5px;
}
.card.flipped {
background-color: white;
}
.card.matched {
background-color: green;
}JavaScript
The following JavaScript code will add the game logic:
const cards = document.querySelectorAll(".card");
let firstCard, secondCard;
let lockBoard = false;
let score = 0;
// Shuffle the cards
function shuffleCards() {
cards.forEach((card) => {
card.style.order = Math.floor(Math.random() * 16);
});
}
// Flip a card
function flipCard(card) {
if (!lockBoard && !card.classList.contains("matched")) {
card.classList.add("flipped");
if (!firstCard) {
firstCard = card;
} else {
secondCard = card;
// Check if the cards match
if (firstCard.dataset.card === secondCard.dataset.card) {
firstCard.classList.add("matched");
secondCard.classList.add("matched");
score++;
} else {
setTimeout(() => {
firstCard.classList.remove("flipped");
secondCard.classList.remove("flipped");
}, 1000);
}
firstCard = null;
secondCard = null;
lockBoard = false;
}
}
}
// Start the game
shuffleCards();
// Add event listeners to the cards
cards.forEach((card) => {
card.addEventListener("click", () => flipCard(card));
});
This is just a basic memory card game in JavaScript. You can customize it to add more features, such as different difficulty levels, a timer, and sound effects.
Top Resources Now:
- Mozilla Developer Network
- JavaScript.info
- freeCodeCamp
- W3Schools JavaScript
- Eloquent JavaScript
- JavaScript MDN Web Docs
Enroll Now:
[JavaScript 2023-2024: From Scratch to Advanced] "Start Supercharging Your Productivity!"
Contact Us:
- For any inquiries, please email us at [[email protected]].
- Follow us on insta [ electro4u_offical_ ] for updates and tips.
Note: If you encounter any issues or specific errors when running this program, please let me know and I'll be happy to help debug them!