Simon Spiel in Javascript

Question

Dies ist ein Javascript-Problem. Also das habe ich gemacht. Ich habe 2 Arrays erstellt. 1 für den Computer und 1 für den Spieler. In der ComputerTurn-Funktion Der Computer erstellt eine Zufallszahl und platziert sie in einem Array. Es wird die Nummer aus dem Array ausgeben, die eine Taste spielen wird. Wenn der Zähler der Länge des Arrays entspricht, schaltet er auf den Spieler um. In der playerTurn-Funktion hat der Spieler 5 Sekunden Zeit, um den vom Computer gewählten Tasten zu folgen. Das Problem tritt nach der zweiten Runde auf, wenn zwei zufällige Elemente im Array vorhanden sind. Aus irgendeinem Grund löscht es nicht mein playerArray und fügt nur Zahlen hinzu. Was mache ich falsch?

Das Projekt finden Sie hier: https://codepen.io/roger1891/full/vmYqwx/

Ich nehme hier das Problem liegt:

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

Das Hauptproblem ist, dass Sie die Click-Handler innerhalb einer Funktion definieren sollten, die mehrere aufgerufen wird mal (playerTurn), da das anhäufen die Click-Handler, die mit einem einzigen Klick ausgeführt werden. Als eine Konsequenz gibt es eine zunehmende Zunahme der Länge von playerArray. Stattdessen definieren außerhalb dieser Funktion die Click-Handler, und wiederholen Sie den Zustand in diesem Click-Handler, wie Sie in playerTurn haben:

$(".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 

NB: Die Variable onGoingGame unnötig erscheint, da es immer mit dem Ausdruck entspricht currentPlayerTurn == "computer"