Есть игра "Найди пару" (искать одинаковые картинки)
Помогите написать функцию которая определит окончание игры и выведет ("You win!!")
Я так понимаю окончание игры должно быть когда найдены все пары...как можно это реализовать?
JS
var cards = document.querySelectorAll('.card');
let FlippCard = false;
let lockBoard = false;
let firstCard, secondCard;
//переворот карт
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!FlippCard) {
FlippCard = true;
firstCard = this;
return;
}
secondCard = this;
check();
}
//проверка совпадения двух карт
function check() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflip();
}
//при совпадении оставлять карты
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
reset();
}
//обратный переворот карт
function unflip() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
reset();
}, 1250);
}
//обновление карт после выбора
function reset() {
[FlippCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
//Перемешивание карт
(function mixing() {
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 8);
card.style.order = randomPos;
});
})();
cards.forEach(card => card.addEventListener('click', flipCard));
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Memory</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h5>Game: "Memory"</h5>
<button class="button">Start</button>
<section class="contGame">
<div class="card" data-framework="1">
<img class="front" src="img/1.png" alt="1" />
<img class="back" src="img/background.jpg" alt="background" />
</div>
<div class="card" data-framework="1">
<img class="front" src="img/1.png" alt="1" />
<img class="back" src="img/background.jpg" alt="background" />
</div>
<div class="card" data-framework="2">
<img class="front" src="img/2.png" alt="2" />
<img class="back" src="img/background.jpg" alt="background" />
</div>
<div class="card" data-framework="2">
<img class="front" src="img/2.png" alt="2" />
<img class="back" src="img/background.jpg" alt="background" />
</div>
<div class="card" data-framework="3">
<img class="front" src="img/3.png" alt="3" />
<img class="back" src="img/background.jpg" alt="background" />
</div>
<div class="card" data-framework="3">
<img class="front" src="img/3.png" alt="3" />
<img class="back" src="img/background.jpg" alt="background" />
</div>
<div class="card" data-framework="4">
<img class="front" src="img/4.png" alt="4" />
<img class="back" src="img/background.jpg" alt="background" />
</div>
<div class="card" data-framework="4">
<img class="front" src="img/4.png" alt="4" />
<img class="back" src="img/background.jpg" alt="background" />
</div>
</section>
<script src="js/script.js"></script>
</body>
</html>
