Добрый день!
Подскажите, а как добавить событие что при окончании игры кнопка становится активной?
<!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="stile.css">
<title>Game</title>
</head>
<body>
<div class="game-container">
<div class="game">
<div class="game-block" data-framework="1">
<div class="card-open"><p>1</p></div>
<div class="card-close"></div>
</div>
<div class="game-block" data-framework="1">
<div class="card-open"><p>1</p></div>
<div class="card-close"></div>
</div>
<div class="game-block" data-framework="2">
<div class="card-close"></div>
<div class="card-open"><p>2</p></div>
</div>
<div class="game-block" data-framework="2">
<div class="card-close"></div>
<div class="card-open"><p>2</p></div>
</div>
<div class="game-block" data-framework="3">
<div class="card-close"></div>
<div class="card-open"><p>3</p></div>
</div>
<div class="game-block" data-framework="3">
<div class="card-close"></div>
<div class="card-open"><p>3</p></div>
</div>
<div class="game-block" data-framework="4">
<div class="card-close"></div>
<div class="card-open"><p>4</p></div>
</div>
<div class="game-block" data-framework="4">
<div class="card-close"></div>
<div class="card-open"><p>4</p></div>
</div>
<div class="game-block" data-framework="5">
<div class="card-close"></div>
<div class="card-open"><p>5</p></div>
</div>
<div class="game-block" data-framework="5">
<div class="card-close"></div>
<div class="card-open"><p>5</p></div>
</div>
<div class="game-block" data-framework="6">
<div class="card-close"></div>
<div class="card-open"><p>6</p></div>
</div>
<div class="game-block" data-framework="6">
<div class="card-close"></div>
<div class="card-open"><p>6</p></div>
</div>
<div class="game-block" data-framework="7">
<div class="card-close"></div>
<div class="card-open"><p>7</p></div>
</div>
<div class="game-block" data-framework="7">
<div class="card-close"></div>
<div class="card-open"><p>7</p></div>
</div>
<div class="game-block" data-framework="8">
<div class="card-close"></div>
<div class="card-open"><p>8</p></div>
</div>
<div class="game-block" data-framework="8">
<div class="card-close"></div>
<div class="card-open"><p>8</p></div>
</div>
</div>
<button class="btn btn-hiden">Сыграть еще раз</button>
</div>
<script src="main.js"></script>
</body>
</html>
const cards = document.querySelectorAll('.game-block');
let buttonReset = document.querySelector(".btn");
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
let cardsAray = [];
cardsAray = cards;
function flipCard() {
if(this.classList.contains('flip')) return;
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
if (firstCard.dataset.framework === secondCard.dataset.framework) {
disableCards();
return;
}
unflipCards();
}
function disableCards() {
resetBoard()
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
buttonReset.document.classList.add("btn-activ");
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
function shuffle() {
cards.forEach(card => {
let ramdomPos = Math.floor(Math.random() * 16);
card.classList.remove('flip');
card.style.order = ramdomPos;
});
}
shuffle();
cards.forEach(card => card.addEventListener('click', flipCard));
document.querySelector('btn-activ').addEventListener('click', shuffle)