Javascript Tic Tac Toe

Question

Ich versuche, ein Tic Tac Toe Spiel zu bauen, aber es funktioniert nicht, was ich damit meine, wenn ich auf das Spielbrett klicke, möchte ich das Spiel starten und habe meine Funktionen entsprechend. Jetzt ist das Problem, ich möchte, dass dieses Spiel Mensch gegen Maschine ist und der Maschinenteil (Funktion AI()) nicht richtig funktioniert.

Hier ist der Link codepen

Ich habe alle meine Funktionen im „Spiel“ -Funktion (Spiel()), die ausgeführt werden sollen, wenn ein Benutzer klickt auf dem Spiel-Brett, das am Ende der JS-Datei ist.

Versuchen Sie einfach, das Spiel zu spielen und Sie werden verstehen, worüber ich spreche - seltsames Verhalten und ich kratze mir die Augen aus und immer noch stecke ich fest.

Ich würde es wirklich schätzen, wenn mir jemand helfen könnte. Vielen Dank.

Answer 1

AI() Funktion funktioniert (mehr oder weniger). Es ist eigentlich nur die KI, die das Spiel spielt. Spieler bewegt funktionieren nicht, weil Sie nicht über die symbDisp() Funktion sagen, die quadratisch angeklickt wurde (‚this‘ bezieht sich auf das Dokument, nicht die Quadrate)

Sie die Eventhandler ändern könnte bilden

$('.square').on('click', function() { 
    game($(this)); 
}); 

Innerhalb dieser anonymen Funktion bezieht sich dies auf das Quadrat, da dies das Element ist, an das der Ereignishandler gebunden war.

Jetzt müssen Sie dieses quadratische Element auch ein wenig weitergeben, indem Sie die Funktionen game() und symbDisp() so ändern, dass das Element als Argumente verwendet wird und innerhalb von symbDisp() verwendet wird.

zum Beispiel:

function game(elem){ 
    symbDisp(elem); 
    //more stuff 

function symbDisp(elem) { 
    if(elem.text()==='') { 
    //more stuff 

Es gibt auch andere Fehler in Ihrem Spiel, aber ich werde die für Sie bewältigen lassen.

Answer 2

Erste symbDisp empfängt window als this anstelle der korrekten td.

Änderungslinie 10 bis

$('.square').on('click', function() { game(this) }); 

wegen der Änderung, die Sie this den Unterfunktionen passieren müssen. So stellen Sie die folgenden Änderungen:

124: function game(ths){ 
125:  
126: symbDisp(ths); 

und dann symbDisp ändern:

function symbDisp (ths) { 
    if($(ths).text()==='') { 
    $(ths).text(pTurn); 
     if(pTurn == player){ 
     pTurn =comp; 
     }else{ 
     pTurn=player; 
     } 
    } 
} 

Es gibt einen weiteren Fehler: pTurn nicht definiert ist, wenn es zuerst symbDisp Funktion erreicht. Also ändere userIcon zu:

sehe, dass ich pTurn eingestellt habe, wenn der Spieler eingestellt ist.

Das ist es. Es sollte jetzt funktionieren.Ich gegabelt eine funktionierende Version hier:

http://codepen.io/anon/pen/oxPyej

Hoffe, dass es