HTML Memory Game: Play Online & Learn Code
<html>
<head>
<title>Memory Game</title>
</head>
<body>
<h1>Memory Game</h1>
<div>
<span class='card' data-name='card1'>
<img src='card1.png' alt='Card 1' />
</span>
<span class='card' data-name='card2'>
<img src='card2.png' alt='Card 2' />
</span>
<span class='card' data-name='card3'>
<img src='card3.png' alt='Card 3' />
</span>
<span class='card' data-name='card4'>
<img src='card4.png' alt='Card 4' />
</span>
</div>
<script type='text/javascript'>
let cards = document.querySelectorAll('.card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
<pre><code> 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.name === secondCard.dataset.name;
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 = false;
lockBoard = false;
firstCard = null;
secondCard = null;
}
(function shuffle() {
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 12);
card.style.order = randomPos;
});
})();
cards.forEach(card => card.addEventListener('click', flipCard));
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmbb 著作权归作者所有。请勿转载和采集!