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"