JS记忆卡游戏-如何防止用户同时翻转2张以上的卡片
JS记忆卡游戏-如何防止用户同时翻转2张以上的卡片
提问于 2019-05-24 06:28:13
如何防止用户同时翻转2张以上的卡片，当用户错误匹配时，我使用设置超时，在设置的超时期间，如果他快速点击，他可以翻转2张以上的卡片。我怎样才能防止它呢？
我尝试使var isProcessing = true，当用户进行错误匹配时，编写以下代码：
if (isProcessing ) {
return;
}但它不起作用
game.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<link rel="stylesheet" href="css/game.css" />
</head>
<body>
<div class="header">
<img src="img/layout/logo.png">
<h1>Memory Monsters</h1>
</div>
<div class="board">
<div class="card" data-card="1" onclick="cardClicked(this)">
<img src="img/cards/1.png">
<img class="back" src="img/cards/back.png">
</div>
<div class="card" data-card="7" onclick="cardClicked(this)">
<img src="img/cards/7.png">
<img class="back" src="img/cards/back.png">
</div>
<div class="card" data-card="1" onclick="cardClicked(this)">
<img src="img/cards/1.png">
<img class="back" src="img/cards/back.png">
</div>
<div class="card" data-card="7" onclick="cardClicked(this)">
<img src="img/cards/7.png">
<img class="back" src="img/cards/back.png">
</div>
<div class="card" data-card="5" onclick="cardClicked(this)">
<img src="img/cards/5.png">
<img class="back" src="img/cards/back.png">
</div>
<div class="card" data-card="5" onclick="cardClicked(this)">
<img src="img/cards/5.png">
<img class="back" src="img/cards/back.png">
</div>
</div>
<div class="homepage">
<h2>Go back to homepage</h2>
<a href="index.html">Homepage</a>
<br>
<br>
<button onclick="playAgain()" id="playAgainBtn">Play Again</button>
<br>
<p id="bestScore">Best score is :</p>
</div>
<script src="js/game.js"></script>
</body>
</html>game.js
var elPreviousCard = null;
var flippedCouplesCount = 0;
var TOTAL_COUPLES_COUNT = 3;
var audioWin = new Audio('sound/win.mp3');
var rightMatch = new Audio('sound/right.mp3');
var wrongMatch = new Audio('sound/wrong.mp3');
var playAgainBtn = document.getElementById('playAgainBtn');
var timerStart = 0;
var startTime = null;
var bestScoreParagraph = document.getElementById('bestScore');
if (localStorage.getItem('bestScore') !== null) {
bestScoreParagraph.innerHTML = `Best score is : ${localStorage.getItem('bestScore')}`;
}
function shuffleBoard() {
var board = document.querySelector('.board');
for (var i = board.children.length; i >= 0; i--) {
board.appendChild(board.children[Math.random() * i | 0]);
}
}
function playAgain() {
var cards = document.getElementsByClassName('card');
for (var i = 0; i < cards.length; i++) {
cards[i].classList.remove('flipped');
}
playAgainBtn.style.display = 'none';
timerStart = 0;
startTime = null;
shuffleBoard();
}
function cardClicked(elCard) {
timerStart += 1;
if (timerStart === 1) {
startTime = new Date();
}
if (elCard.classList.contains('flipped')) {
return;
}
// Flip it
elCard.classList.add('flipped');
if (elPreviousCard === null) {
elPreviousCard = elCard;
} else {
var card1 = elPreviousCard.getAttribute('data-card');
var card2 = elCard.getAttribute('data-card');
if (card1 !== card2) {
setTimeout(function () {
wrongMatch.play();
elCard.classList.remove('flipped');
elPreviousCard.classList.remove('flipped');
elPreviousCard = null;
}, 1000)
} else {
rightMatch.play();
flippedCouplesCount++;
elPreviousCard = null;
if (TOTAL_COUPLES_COUNT === flippedCouplesCount) {
var endTime = new Date();
var diff = endTime.getTime() - startTime.getTime();
var seconds = Math.floor(diff / (1000));
audioWin.play();
playAgainBtn.style.display = 'block';
if (localStorage.getItem('bestScore') === null) {
localStorage.setItem('bestScore', seconds);
bestScoreParagraph.innerHTML = `Best score is : ${seconds}`;
}
if (localStorage.getItem('bestScore') > seconds) {
localStorage.setItem('bestScore', seconds);
bestScoreParagraph.innerHTML = `Best score is : ${seconds}`;
}
flippedCouplesCount = 0;
}
}
}
}如何解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-24 06:43:42
我认为你的isProcessing想法是一个很好的解决方案。你需要把它放在这里：
// No match, schedule to flip them back in 1 second
if (card1 !== card2) {
isProcessing = true; // SET IS PROCESSING BEFORE TIMER
setTimeout(function () {
wrongMatch.play();
elCard.classList.remove('flipped');
elPreviousCard.classList.remove('flipped');
elPreviousCard = null;
isProcessing = false; // SET IS NOT PROCESSING AFTER TIME
}, 1000)在你的点击函数中：
function cardClicked(elCard) {
if (isProcessing) { return; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56283681
复制相关文章
相似问题