Simon Game in javascript

Question

这是一个JavaScript问题。 所以这就是我所做的。我创建了2个数组。 1个用于电脑，另一个用于播放器。在computerTurn函数中计算机创建一个随机数并将其放入数组中。它会从阵列中输出将播放按钮的数字。如果计数器等于阵列的长度，那么它将切换到玩家轮流。在playerTurn功能中，播放器有5秒钟可以按照电脑选择的按钮。当数组中有2个随机元素时，问题发生在第二轮之后。由于某些原因，它不能清除我的playerArray，只是将数字加起来。 我在做什么错？

该项目可以在这里找到： https://codepen.io/roger1891/full/vmYqwx/

我认为问题就出在这里：

var playerTurn = function() { 
    if(currentPlayerTurn == "human" && onGoingGame == false) { 
    playerArray = []; 
    $(".my-btn").click(function(){ 
     var $input = $(this); 
     var attrString = $input.attr("id"); 
     //only get number from id attribute 
     var strNum = attrString.replace(/^\D+/g, ''); 
     //convert theNumber from string to number 
     var theNum = parseInt(strNum); 
     playerArray.push(theNum); 
     console.log("this is the num the player picked " + theNum); 
     console.log(playerArray); 
    }); 


    setTimeout(function() { 
     var is_same = playerArray.length == sequenceArray.length && playerArray.every(function(element, index) { 
      return element === sequenceArray[index]; 
     }); 
     is_same; 
     console.log(is_same); 
     if(is_same == true) { 
      onGoingGame = true; 
      currentPlayerTurn = "computer"; 
      computerTurn(); 

     } 

    }, 5000); 

    } 
} 
    setTimeout(function() { 
      var is_same = playerArray.length == sequenceArray.length && playerArray.every(function(element, index) { 
       return element === sequenceArray[index]; 
      }); 
      is_same; 
      console.log(is_same); 
      if(is_same == true) { 
       onGoingGame = true; 
       currentPlayerTurn = "computer"; 
       computerTurn(); 

      } 

     }, 5000); 

     } 
     } 

Answer 1

的主要问题是，你不应该在被调用几个函数中定义的点击处理程序次（playerTurn），因为这会累积点击处理程序，只需点击一次即可执行。因此，playerArray的长度增加。相反定义功能外单击处理程序，并重复上述条件在click处理程序就像你在playerTurn：

$(".my-btn").click(function(){ 
    if(currentPlayerTurn != "human" || onGoingGame) return; // exit 
    // rest of the click handler... 
}); 

var playerTurn = function() { 
    if(currentPlayerTurn != "human" || onGoingGame) return; // exit 
    playerArray = []; 
    setTimeout(function() { 
     // etc.... 
    }, 5000); 
} 

// ... etc 

注：该变量onGoingGame似乎是不必要的，因为它总是对应于表达currentPlayerTurn == "computer"