Wie man das Skript pausiert, bis die Benutzereingabe passiert

Question

Ich mache eine Verbindung vier Spiel. Wenn ein menschlicher Spieler das Spiel spielt, möchte ich, dass er auf die Spalte klicken kann, in der er sich bewegen möchte.

Ich struggeling mit dem Hinzufügen von Ereignissen zu den Spalten, die legal sind, um einen Zug zu machen in. Der folgende Code soll einen Gegenstand von legalMoves zurückgeben, basierend auf welcher Spalte der Spieler klickt. Solange kein Klick auf eine legale Spalte erfolgt, sollte der Code pausieren und warten.

Gerade jetzt scheint es, als ob die Zeilen mit addEventListeners einfach ignoriert werden, der Code läuft einfach weiter und wartet nicht auf menschliche Eingaben.

// array of legal moves, eg.[0,1,3,5,6] 
let legalMoves = game.getLegalMoves(); 

// initialization with -1 to check if it changes 
let humanMove = -1; 

//column nodes 
let node = document.getElementsByClassName("column"); 

// my try of getting at least the first column to work 
node[0].addEventListener("click", function() { 
        humanMove = 0; 
}); 
/* pseudo code: 
while(humanmove===-1){ 
wait here until one event listener fires 
}*/ 
// returns -1 every time :'(
return humanMove; 

Answer 1

Obwohl ich lieber gewesen wäre, wenn die OP das HTML für „Spiel“ zur Verfügung gestellt hatte und die Methode getLegalMoves() definiert, modifizierte ich den Code, eine besonders wichtige Änderung. Ich bin mir nicht sicher, warum das OP "let" verwendet, um Variablen im globalen Bereich zu definieren, wenn sie nicht in einem Codeblock enthalten sind, d. H. Mit geschweiften Klammern definiert sind. Das heißt, hier ist eine modifizierte Version, die funktioniert. Die kritische Änderung bestand darin, die return-Anweisung loszuwerden, da JavaScript nur die Rückgabe eines Wertes aus einer Funktion oder Methode erlaubt.

HTML:

<div id="game"> 
<div class="column"> 
<button>Test</button> 
</div> 
</div> 

CSS:

.column { 
    color:blue; 
} 

JS:

// array of legal moves, eg.[0,1,3,5,6] 
//let legalMoves = game.getLegalMoves(); 

// initialization with -1 to check if it changes 
let humanMove = -1; 

//column nodes 
var node = document.getElementsByClassName("column"); 
node[0].addEventListener("click", function() { 
    humanMove = 0; 
    console.log(humanMove); 
}); 

Arbeitsbeispiel here