TomWalbridge,
<!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">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
background: gray;
}
.memory-game {
width: 500px;
height: 500px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
margin: 5px;
position: relative;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
}
.front-face,
.back-face {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
background: #1C7CCC;
backface-visibility: hidden;
}
.memory-card:active {
transform: scale(0.97);
transition: transform .2s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.front-face {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<button id="btn">Запустить заново!</button>
<section class="memory-game">
<div class="memory-card" data-icon='icon1'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=1" alt="icon1">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon1'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=1" alt="icon1">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon2'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=2" alt="2">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon2'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=2" alt="2">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon3'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=3" alt="icon3">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon3'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=3" alt="icon3">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon4'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=4" alt="4">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon4'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=4" alt="4">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon5'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=5" alt="5">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon5'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=5" alt="5">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon6'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=6" alt="6">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon6'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=6" alt="6">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon7'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=7" alt="7">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon7'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=7" alt="7">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon8'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=8" alt="8">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
<div class="memory-card" data-icon='icon8'>
<img class="front-face" src="https://via.placeholder.com/150/0000FF/808080?text=8" alt="8">
<img class="back-face" src="https://appmedia.jp/wp-content/uploads/2018/06/194.jpg" alt="Memory Card">
</div>
</section>
<button id="btn-mix"></button>
<script>
const cards = document.querySelectorAll('.memory-card');
function flipCard() {
this.classList.add('flip');
}
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
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.icon === secondCard.dataset.icon) {
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() {
hasFlippedCard = false;
lockBoard = false;
cards.forEach(card => {
let ramdomPos = Math.floor(Math.random() * 12);
card.classList.remove('flip');
card.style.order = ramdomPos;
});
};
shuffle()
cards.forEach(card => card.addEventListener('click', flipCard))
document.querySelector('#btn').addEventListener('click', shuffle)
</script>
</body>
</html>