Simple HTML Matching Game: Create Your Own Memory Game
<!DOCTYPE html>
<html>
<head>
<title>Matching Game</title>
<style>
#game {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.card {
background-color: #e6e6e6;
padding: 20px;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<h1>Matching Game</h1>
<div id='game'>
<div class='card' data-name='apple'>
<p>Apple</p>
</div>
<div class='card' data-name='apple'>
<p>Apple</p>
</div>
<div class='card' data-name='banana'>
<p>Banana</p>
</div>
<div class='card' data-name='banana'>
<p>Banana</p>
</div>
</div>
<script>
const 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/lmcx 著作权归作者所有。请勿转载和采集!