tagari,
<!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>
<style type="text/css">
.game {
display: flex;
}
.game-block {
width: 50px;
height: 50px;
border: 1px solid red;
text-align: center;
}
.flip {
background-color: #228B22;
}
.btn-hiden {
display: none;
}
.game-block>.card-open {
display: none;
color: #FFFFFF;
}
.game-block.flip>.card-open {
display: block;
}
</style>
</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>
const cards = document.querySelectorAll('.game-block');
let len = cards.length;
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) {
let toggle = len !== document.querySelectorAll('.flip').length;
buttonReset.classList.toggle("btn-hiden", toggle);
disableCards();
return;
}
unflipCards();
}
function disableCards() {
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() * 16);
card.classList.remove('flip');
card.style.order = ramdomPos;
});
buttonReset.classList.add("btn-hiden");
}
shuffle();
cards.forEach(card => card.addEventListener('click', flipCard));
document.querySelector('.btn-hiden').addEventListener('click', shuffle)
</script>
</body>
</html>