Игра "пары" на Java Script
Есть игра "пары" на JS, но когда все пары отгаданы ничего не происходит. Подскажите, как реализовать алерт "игра окончена" и чтобы игра начиналась сначала
const cards = document.querySelectorAll('.memory-card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
let ramdomPos = Math.floor(Math.random() * 12);
card.style.order = ramdomPos;
});
})();
cards.forEach(card => card.addEventListener('click', flipCard));<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css" type="text/css">
<script src="scripts/script.js" defer></script>
<title>Document</title>
</head>
<body>
<section class="memory-game">
<div class="memory-card" data-framework="1">
<img class="front-face" src="img/1.svg" alt="1">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="1">
<img class="front-face" src="img/1.svg" alt="1">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="3">
<img class="front-face" src="img/3.svg" alt="3">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="3">
<img class="front-face" src="img/3.svg" alt="3">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="4">
<img class="front-face" src="img/4.svg" alt="4">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="4">
<img class="front-face" src="img/4.svg" alt="4">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="5">
<img class="front-face" src="img/5.svg" alt="5">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="5">
<img class="front-face" src="img/5.svg" alt="5">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="6">
<img class="front-face" src="img/6.svg" alt="6">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="6">
<img class="front-face" src="img/6.svg" alt="6">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="7">
<img class="front-face" src="img/7.svg" alt="7">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="7">
<img class="front-face" src="img/7.svg" alt="7">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
</section>
</body>
</html>Ответы (1 шт):
Автор решения: Igor
→ Ссылка
const cards = document.querySelectorAll('.memory-card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
if (document.querySelectorAll('.memory-card').length == document.querySelectorAll('.memory-card.flip').length) {
console.log("game over");
document.querySelectorAll('.memory-card.flip').forEach(c => c.classList.remove('flip'));
}
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
let ramdomPos = Math.floor(Math.random() * 12);
card.style.order = ramdomPos;
});
})();
cards.forEach(card => card.addEventListener('click', flipCard));.flip {
border: 1px solid black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css" type="text/css">
<script src="scripts/script.js" defer></script>
<title>Document</title>
</head>
<body>
<section class="memory-game">
<div class="memory-card" data-framework="1">
<img class="front-face" src="img/1.svg" alt="1">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="1">
<img class="front-face" src="img/1.svg" alt="1">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="3">
<img class="front-face" src="img/3.svg" alt="3">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="3">
<img class="front-face" src="img/3.svg" alt="3">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="4">
<img class="front-face" src="img/4.svg" alt="4">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="4">
<img class="front-face" src="img/4.svg" alt="4">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="5">
<img class="front-face" src="img/5.svg" alt="5">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="5">
<img class="front-face" src="img/5.svg" alt="5">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="6">
<img class="front-face" src="img/6.svg" alt="6">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="6">
<img class="front-face" src="img/6.svg" alt="6">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="7">
<img class="front-face" src="img/7.svg" alt="7">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
<div class="memory-card" data-framework="7">
<img class="front-face" src="img/7.svg" alt="7">
<img class="back-face" src="img/card-game.svg" alt="card-game">
</div>
</section>
</body>
</html>