javascript - 如何防止用户在不是他们的 'turn' 时激活 jquery 点击功能？

Question

我正在构建一款 Simon 游戏，该游戏以 90 年代(？)的旧掌上游戏为蓝本。我无法弄清楚如何防止用户在轮到他们时单击 4 个彩色按钮，并且基本上不按顺序破坏我的程序。我怎样才能阻止他们在“Simon”轮到他时激活下面的 mousedown jquery？我真的很感激任何帮助，谢谢。

Codepen 链接:http://codepen.io/MindfulBell/pen/ZbgQym

相关代码(我想，只编程了6个月)...

西蒙斯行动:

function simonSaysLv1(){   
    simonsMoves.push(Math.floor(Math.random() * (4-1+1)) + 1);
    doSimonMove(0);     
    playerTurn = true;    
    simonTurn = false;
  }

  function doSimonMove(index){ 

    if(index < simonsMoves.length){
      simonlightUp(simonsMoves[index]);
      setTimeout(function(){
        doSimonMove(index + 1);
      }, simonSpeed);
    }
  }

鼠标按下播放器 Action :

$('.sim-button').mousedown(function(){

    if (playerTurn && started && gameOn) {
    var playerPress = '#' + this.id
    switch(playerPress){
      case grn:
        grn1Audio.play();
        $(grn).css('background-color', '#00ff00')
        playerMoves.push(1)       
        break;
      case red:
        red2Audio.play();
        $(red).css('background-color', '#ff1a1a')
        playerMoves.push(2)         
        break;
      case yel:
        yel3Audio.play();
        $(yel).css('background-color', '#ffffb3')
        playerMoves.push(3)         
        break;
      default:
        blue4Audio.play();
        $(blue).css('background-color', '#b3d1ff')
        playerMoves.push(4)          
        break;
    }    
       }  
      })
  //letting go of click
  $('.sim-button').mouseup(function(){
    if (playerTurn && started && gameOn) {
    var playerPress = '#' + this.id
    switch(playerPress){
      case grn:        
        $(grn).css('background-color', 'green')               
        break;
      case red:        
        $(red).css('background-color', '#cc0000')                 
        break;
      case yel:        
        $(yel).css('background-color', '#e4e600')                
        break;
      default:        
        $(blue).css('background-color', '#0052cc')                 
        break;
    }

      if (playerMoves.length === 21) {
        alert('You Win!')
      }
      //fail on strict
      else if (checkLoss() && strict) {
        reset();
        setTimeout(simonSaysLv1, 1200);
        $('#strict').css('border-color', '#99ff66')
        $('#count-num').text(simonsMoves.length+1)
      }
      //fail on non strict
      else if (checkLoss()) {
        playerMoves = [];
        setTimeout(function() {
          doSimonMove(0)}, 1200)        
      }
      //back to simon for his turn
      else if (playerMoves.length === simonsMoves.length) {
        speedCheck(simonsMoves.length)
        setTimeout(simonSaysLv1, 1200);
        $('#count-num').text(simonsMoves.length+1); //score
        playerMoves = [];
        simonTurn = true;
        playerTurn = false;      
      }
    }
  }) 

Answer 1

主要问题是在返回传递给 setTimeout 的回调之前，playerTurn 将被设置为 true。 Javascript 代码异步执行。 setTimeout 回调将在当前调用堆栈执行完毕后调用，playerTurn 对 true 的赋值是当前调用堆栈的一部分。请注意，无论您的超时是 0 还是 100000，这都是正确的。

您需要在 setTimeout 回调中添加 turn bool 值，以确保当用户触发点击事件时 playerTurn 变量处于正确状态。对于此程序，这仅意味着您的点击回调中的任何内容都不会执行，因为 if-block 条件将失败。有几种方法可以做到这一点，但一个简单的方法是这样做:

function simonSaysLv1(){   
  simonsMoves.push(Math.floor(Math.random() * (4-1+1)) + 1);
  doSimonMove(0);     
}

function doSimonMove(index){ 

  if(index < simonsMoves.length){
    simonlightUp(simonsMoves[index]);
    setTimeout(function(){
      doSimonMove(index + 1);
      if (index + 1 === simonsMoves.length) {
        playerTurn = true;    
        simonTurn = false;
      }
    }, simonSpeed);
  }
}