Fatal编程技术网
  • javascript/
  • Javascript JS记忆卡游戏-如何防止用户翻转超过2张卡在同一时间

Javascript JS记忆卡游戏-如何防止用户翻转超过2张卡在同一时间

javascript

Javascript JS记忆卡游戏-如何防止用户翻转超过2张卡在同一时间,javascript,Javascript,如何防止用户同时翻动超过2张卡，当用户进行错误匹配时，我使用设置超时，在设置超时期间，如果他快速单击，他可以翻动超过2张卡。我怎样才能预防它 我试图使var isProcessing=true 当用户进行错误匹配时，请编写以下代码： if (isProcessing ) { return; } 但它不起作用 game.html <!doctype html> <html lang="en"> <head> <meta charset="u

如何防止用户同时翻动超过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;
            }

        }

    }

}

var-elPreviousCard=null；
var FlippedCoupledScont=0；
var总对数=3；
var audioWin=新音频（'sound/win.mp3'）；
var rightMatch=新音频（'sound/right.mp3'）；
var错误匹配=新音频（'sound/error.mp3'）；
var playAgainBtn=document.getElementById（'playAgainBtn'）；
var timerStart=0；
var startTime=null；
var bestScoreParagation=document.getElementById（'bestScore'）；
if（localStorage.getItem（'bestScore'）！=null）{
BestScoreParagation.innerHTML=`最佳分数为：${localStorage.getItem（'bestScore'）}`；
}
函数shuffleBoard（）{
var board=document.querySelector（“.board”）；
对于（var i=board.childrence.length；i>=0；i--）{
board.appendChild（board.childs[Math.random（）*i|0]）；
}
}
函数playreach（）{
var cards=document.getElementsByClassName（'card'）；
对于（变量i=0；iseconds）{
setItem（'bestScore'，秒）；
BestScoreParagation.innerHTML=`最佳分数为：${seconds}`；
}
FlippedCoupledScont=0；
}
}
}
}
如何解决这个问题？

我认为你的
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; }