[FRAGE] [HILFE] TicTacToe gewinner ermitteln

Blodyman · 30. Jan. 2015

Hi, ich hab für meine Seite nen kleines TicTacToe Spiel gesschrieben und hab das Problem, dass entweder die Performence zu schlecht ist oder ein Fehler sich eingeschlichen hat, den ich gerade nicht finde.
Ich hab das alles Manuel schon geschrieben und zum laufen gebracht. Jetzt wollte ich die schreibarbeit dem Script überlassen, nur der Browser möchte die Ausführung ständig stoppen.
Beide Codes sind Teil einer Funktion. Kurz: Ein Code führt die Funktion aus in der dieser Code stehen. Jedes mal, wenn auf ein Feld geklickt wird und in diesem entweder O oder X erscheint als PNG.
Falls jemand eine ein Beispiel haben möchte: www.markus-r.pytalhost.de/eigene-projekte.php

Der Code, der alles ersetzten soll:

Code:

var zaehler = 0, endtext = ""; winnercheck = 0, npczug = 0, test = "", npcstart = 0, schonaktiv = 0, feld = "", winnerMatch = false;      //31 length: 32 -4 = 28
            var gewinnComb = ["#f1", "#f2", "#f3", "lefttoright", "#f4", "#f5", "#f6", "lefttoright", "#f7", "#f8", "#f9", "lefttoright", "#f1", "#f4", "#f7", "uptodown", "#f2", "#f5", "#f8", "uptodown", "#f3", "#f6", "#f9", "uptodown", "#f1", "#f5", "#f9", "leftuptorightdown", "#f3", "#f5", "#f7", "rightuptoleftdown"];
            var gewinnZeichen = ["o", "x"];
            //npc initialisieren
            $("#Einstellungen").find("input:radio[name='spielerwahl']").click(function() {
            feldReset();
            var test = $("#Einstellungen").find("input:radio:checked").val();
            if(test == "npc"){
                npcstart = 1;
                //alert(test);
            }else{
                npcstart = 0;
            }
            });
            //Gewinnt einer der Beiden
            function gewinner(){
                if(winnercheck == 0){
                    for(var i = 0, i2 = 0, z = 0; i2 < 2; i+4){
                        if($(gewinnComb[i]).hasClass(gewinnZeichen[z]) && $(gewinnComb[i+1]).hasClass(gewinnZeichen[z]) && $(gewinnComb[i+2]).hasClass(gewinnZeichen[z])){
                            winnerMatch = true;
                        }
                        if(i == 28 && i2 == 0){
                            i = 0;
                            z++;
                            i2++;
                        }
                    }
                    if(winnerMatch == true){
                            for(var i3 = 0; i3 < 3; i3++){
                                $(gewinnComb[i+i3]).html('<img src="Bilder/' + gewinnComb[i+3] + gewinnZeichen[z] + '.png" />');
                            }
                            alert("O Gewinnt!");
                            winnercheck++;
                    }
                    zaehler = 9;
                }
            }

Der 1. Code soll diesen hier ersetzten:

Code:

if($("#f1").hasClass("o") && $("#f2").hasClass("o") && $("#f3").hasClass("o")){
                    if(winnercheck == 0){
                        $("#f1").html('<img src="Bilder/lefttorighto.png"  />');
                        $("#f2").html('<img src="Bilder/lefttorighto.png"  />');
                        $("#f3").html('<img src="Bilder/lefttorighto.png"  />');
                        alert("O Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f4").hasClass("o") && $("#f5").hasClass("o") && $("#f6").hasClass("o")){
                    if(winnercheck == 0){
                        $("#f4").html('<img src="Bilder/lefttorighto.png"  />');
                        $("#f5").html('<img src="Bilder/lefttorighto.png"  />');
                        $("#f6").html('<img src="Bilder/lefttorighto.png"  />');
                        alert("O Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f7").hasClass("o") && $("#f8").hasClass("o") && $("#f9").hasClass("o")){
                    if(winnercheck == 0){
                        $("#f7").html('<img src="Bilder/lefttorighto.png"  />');
                        $("#f8").html('<img src="Bilder/lefttorighto.png"  />');
                        $("#f9").html('<img src="Bilder/lefttorighto.png"  />');
                        alert("O Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f1").hasClass("o") && $("#f4").hasClass("o") && $("#f7").hasClass("o")){
                    if(winnercheck == 0){
                        $("#f1").html('<img src="Bilder/uptodowno.png"  />');
                        $("#f4").html('<img src="Bilder/uptodowno.png"  />');
                        $("#f7").html('<img src="Bilder/uptodowno.png"  />');
                        alert("O Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f1").hasClass("o") && $("#f5").hasClass("o") && $("#f9").hasClass("o")){
                    if(winnercheck == 0){
                        $("#f1").html('<img src="Bilder/leftuptorightdowno.png"  />');
                        $("#f5").html('<img src="Bilder/leftuptorightdowno.png"  />');
                        $("#f9").html('<img src="Bilder/leftuptorightdowno.png"  />');
                        alert("O Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f3").hasClass("o") && $("#f5").hasClass("o") && $("#f7").hasClass("o")){
                    if(winnercheck == 0){
                        $("#f3").html('<img src="Bilder/rightuptoleftdowno.png"  />');
                        $("#f5").html('<img src="Bilder/rightuptoleftdowno.png"  />');
                        $("#f7").html('<img src="Bilder/rightuptoleftdowno.png"  />');
                        alert("O Gewinnt!");
                         winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f2").hasClass("o") && $("#f5").hasClass("o") && $("#f8").hasClass("o")){
                    if(winnercheck == 0){
                        $("#f2").html('<img src="Bilder/uptodowno.png"  />');
                        $("#f5").html('<img src="Bilder/uptodowno.png"  />');
                        $("#f8").html('<img src="Bilder/uptodowno.png"  />');
                        alert("O Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f3").hasClass("o") && $("#f6").hasClass("o") && $("#f9").hasClass("o")){
                    if(winnercheck == 0){
                        $("#f3").html('<img src="Bilder/uptodowno.png"  />');
                        $("#f6").html('<img src="Bilder/uptodowno.png"  />');
                        $("#f9").html('<img src="Bilder/uptodowno.png"  />');
                        alert("O Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f1").hasClass("x") && $("#f2").hasClass("x") && $("#f3").hasClass("x")){
                    if(winnercheck == 0){
                        $("#f1").html('<img src="Bilder/lefttorightx.png"  />');
                        $("#f2").html('<img src="Bilder/lefttorightx.png"  />');
                        $("#f3").html('<img src="Bilder/lefttorightx.png"  />');
                        alert("X Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f4").hasClass("x") && $("#f5").hasClass("x") && $("#f6").hasClass("x")){
                    if(winnercheck == 0){
                        $("#f4").html('<img src="Bilder/lefttorightx.png"  />');
                        $("#f5").html('<img src="Bilder/lefttorightx.png"  />');
                        $("#f6").html('<img src="Bilder/lefttorightx.png"  />');
                        alert("X Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f7").hasClass("x") && $("#f8").hasClass("x") && $("#f9").hasClass("x")){
                    if(winnercheck == 0){
                        $("#f7").html('<img src="Bilder/lefttorightx.png"  />');
                        $("#f8").html('<img src="Bilder/lefttorightx.png"  />');
                        $("#f9").html('<img src="Bilder/lefttorightx.png"  />');
                        alert("X Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f1").hasClass("x") && $("#f4").hasClass("x") && $("#f7").hasClass("x")){
                    if(winnercheck == 0){
                        $("#f1").html('<img src="Bilder/uptodownx.png"  />');
                        $("#f4").html('<img src="Bilder/uptodownx.png"  />');
                        $("#f7").html('<img src="Bilder/uptodownx.png"  />');
                        alert("X Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f1").hasClass("x") && $("#f5").hasClass("x") && $("#f9").hasClass("x")){
                    if(winnercheck == 0){
                        $("#f1").html('<img src="Bilder/leftuptorightdownx.png"  />');
                        $("#f5").html('<img src="Bilder/leftuptorightdownx.png"  />');
                        $("#f9").html('<img src="Bilder/leftuptorightdownx.png"  />');
                        alert("X Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f3").hasClass("x") && $("#f5").hasClass("x") && $("#f7").hasClass("x")){
                    if(winnercheck == 0){
                        $("#f3").html('<img src="Bilder/rightuptoleftdownx.png"  />');
                        $("#f5").html('<img src="Bilder/rightuptoleftdownx.png"  />');
                        $("#f7").html('<img src="Bilder/rightuptoleftdownx.png"  />');
                        alert("X Gewinnt!");
                        winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f2").hasClass("x") && $("#f5").hasClass("x") && $("#f8").hasClass("x")){
                    if(winnercheck == 0){
                       $("#f2").html('<img src="Bilder/uptodownx.png"  />');
                       $("#f5").html('<img src="Bilder/uptodownx.png"  />');
                       $("#f8").html('<img src="Bilder/uptodownx.png"  />');
                       alert("X Gewinnt!");
                       winnercheck++;
                   }
                   zaehler = 9;
                }
                if($("#f3").hasClass("x") && $("#f6").hasClass("x") && $("#f9").hasClass("x")){
                   if(winnercheck == 0){
                       $("#f3").html('<img src="Bilder/uptodownx.png"  />');
                       $("#f6").html('<img src="Bilder/uptodownx.png"  />');
                       $("#f9").html('<img src="Bilder/uptodownx.png"  />');
                       alert("X Gewinnt!");
                       winnercheck++;
                   }
                   zaehler = 9;
                }
             }

xorg1990 · 31. Jan. 2015

Hi, Du hast in deiner for schleife ein, 2 Flüchtigkeitsfehler drinnen:

Code:

 for(var i = 0, i2 = 0, z = 0; i2 < 2; i+4){
                        if($(gewinnComb[i]).hasClass(gewinnZeichen[z]) && $(gewinnComb[i+1]).hasClass(gewinnZeichen[z]) && $(gewinnComb[i+2]).hasClass(gewinnZeichen[z])){
                            winnerMatch = true;
                        }
                        if(i == 28 && i2 == 0){
                            i = 0;
                            z++;
                            i2++;
                        }
                    }

i+=4; sollte es heißen.
Dann ist die if Bedingung noch falsch i ==28 true und i2 ==0 true, gehe rein beim ersten durchlauf, beim 2 durchlauf ist i2 = 1 somit ist i2==0 false gehe nicht mehr rein i wird nicht mehr zurückstellt und i2 nicht mehr erhöht == Endlosschleife.

Bei so vielen Zählrevariblen nehme ich gern eine while, ist Geschmacksache.

Blodyman · 31. Jan. 2015

Danke, ich glaub ich hätte gestern die 3 Bier weglassen sollen

Bin aber auch noch Anfänger

Danke jedenfalls, soweit funktioniert die Funktion, nur 1ne sache irgendwie nicht.
Er soll nachdem ein Gewinner fest steht den zaehler auf 9 setzen, den winnercheck um 1 erhöhen und einen alert ausgeben. Die 3 Dinge tut er aber leider nicht. Ich hoffe mir kann da noch jemand weiterhelfen

Hab als Kommentar daneben geschrieben was nicht Funktioniert

hier erstmal das komplette Script:

Code:

function tictactoe(){
        document.getElementById("projectframe").innerHTML=''
            + '<div id="interface">'
            + '<form id="Einstellungen">'
            + '<input type="radio" name="spielerwahl" value="npc" />Spieler vs. PC<br />'
            + '<input type="radio" name="spielerwahl" value="player" checked />Spieler vs. Spieler <br/>'
            + '<input type="button" id="tictactoereset" value="Reset tictactoe" />'
            + '</form>'
            + '</div>'
            + '<div id="tictactoefeld">'
            + '<div class="feld" id="f1"></div><div class="feld" id="f2"></div><div class="feld" id="f3"></div>'
            + '<div class="feld" id="f4"></div><div class="feld" id="f5"></div><div class="feld" id="f6"></div>'
            + '<div class="feld" id="f7"></div><div class="feld" id="f8"></div><div class="feld" id="f9"></div>'
            + '</div>';

            function feldReset(){
                zaehler = 0;
                $(".feld").html("");
                $(".feld").removeClass("aktiv x o");
                winnercheck = 0;
                winnerMatch = false;
            }
            //X und O zuweisung
            var zaehler = 0, endtext = ""; winnercheck = 0, npczug = 0, test = "", npcstart = 0, schonaktiv = 0, feld = "", winnerMatch = false;      //31 length: 32 -4 = 28
            var gewinnComb = ["#f1", "#f2", "#f3", "lefttoright", "#f4", "#f5", "#f6", "lefttoright", "#f7", "#f8", "#f9", "lefttoright", "#f1", "#f4", "#f7", "uptodown", "#f2", "#f5", "#f8", "uptodown", "#f3", "#f6", "#f9", "uptodown", "#f1", "#f5", "#f9", "leftuptorightdown", "#f3", "#f5", "#f7", "rightuptoleftdown"];
            var gewinnZeichen = ["o", "x"];
            //npc initialisieren
            $("#Einstellungen").find("input:radio[name='spielerwahl']").click(function() {
            feldReset();
            var test = $("#Einstellungen").find("input:radio:checked").val();
            if(test == "npc"){
                npcstart = 1;
                //alert(test);
            }else{
                npcstart = 0;
            }
            });
            //Gewinnt einer der Beiden
            function gewinner(){
                if(winnercheck == 0){
                    for(var i = 0, i2 = 0, z = 0; i2 < 2; i+=4){
                        if($(gewinnComb[i]).hasClass(gewinnZeichen[z]) && $(gewinnComb[i+1]).hasClass(gewinnZeichen[z]) && $(gewinnComb[i+2]).hasClass(gewinnZeichen[z])){
                            winnerMatch = true;
                        }
                        if(i == 28 && i2 < 2){
                            i = 0;
                            z++;
                            i2++;
                        }
                        if(winnerMatch == true){
                            for(var i3 = 0; i3 < 3; i3++){
                                $(gewinnComb[i+i3]).html('<img src="Bilder/' + gewinnComb[i+3] + gewinnZeichen[z] + '.png" />');
                            }
                            alert(gewinnerZeichen + " Gewinnt!"); // Wird nicht ausgeführt
                            winnercheck++;                              // Wird nicht ausgeführt
                            zaehler = 9;                                   // Wird nicht ausgeführt
                        }
                    }

                }
            }
            //npc
            function npc(){
                if(zaehler <= 8){
                    //Hier der npczug
                    do{
                        npczug = parseInt(Math.random() * 10);
                        feld = "#f" + npczug.toString();
                        if($(feld).hasClass("aktiv")){
                              schonaktiv = 1;
                        }else{
                              schonaktiv = 0;
                        }
                        if(schonaktiv != 1 && npczug != 0){
                            zaehler++;
                            $(feld).html('<img src="Bilder/x.png" width="100%" height="100%" />');
                            $(feld).addClass("x");
                            $(feld).addClass("aktiv");
                            gewinner();
                        }
                        //alert(zaehler);
                    }while (npczug == 0 || schonaktiv == 1);
                }
             }
             //Wenn auf ein Feld geklickt wird
             $(".feld").click(function() {
                        if($(this).hasClass("aktiv")){
                            //Do nothing
                        }else{
                            if(zaehler >= 9){
                                alert("Das Spiel ist beendet, beginnen Sie ein neues Spiel!");
                            }else{
                                zaehler++;
                                $(this).addClass("aktiv");
                                if(zaehler % 2 == 0 && npcstart == 0){
                                    this.innerHTML='<img src="Bilder/x.png" width="100%" height="100%" />';
                                    $(this).addClass("x");
                                }else{
                                    this.innerHTML='<img src="Bilder/o.png" width="100%" height="100%" />';
                                    $(this).addClass("o");
                                    gewinner();
                                    if(npcstart == 1){
                                        npc();
                                    }
                                }
                            }
                        }
             });
            $("#tictactoereset").click(function() {
                feldReset();
             });
}

xorg1990 · 31. Jan. 2015

Die Variable "gewinnerZeichen" ist nicht definiert.

steht auch alles in der Fehlerkontrolle:
Chrome F12 und FF strg+shift+J. IE kein Plan.

Blodyman · 31. Jan. 2015

Danke nochmals, jetzt funktioniert alles. Hab noch nen break nach den drei Anweisungen gemacht um Ressourcen zu sparen.

Hast du das gesamte Script in die Konstole gehaun? Ich guck immer nach den einzelnen Variablen und Codezeilen/funktionen im Livebeispiel. Aber bei manchen sagt er, dass diese nicht definiert sind, obwohl ich sie Global geschrieben habe.

xorg1990 · 31. Jan. 2015

Blodyman schrieb:
Hast du das gesamte Script in die Konstole gehaun?

Ich habe ganz normal deinen link aufgerufen und bin in die Konsole gegangen. Da steht was von undefied das habe ich gelesen aber ich möchte ja nicht den komplette Seite debuggen.
Das Endlosschleifen Problem habe ich auf Anhieb gesehen, das 2 Problem wurde dann geloggt als ich einmal in ein Spielfeld geklickt habe und dann ist ja eig. alles klar.

Blodyman schrieb:
Ich guck immer nach den einzelnen Variablen und Codezeilen/funktionen im Livebeispiel.

Was ist den das livebeispiel??

Blodyman · 31. Jan. 2015

Okay, bei mir ist die Konsole immer leer beim Seitenaufruf. Ich könnte halt nur nen Script mit ausführen und müsste im Quelltext gucken wegen dem Script. Aber ich wette, dass ich da nur was falsch mache

Ich hab im Dezember erst angefangen mit webdesign und programmierung und bin daher auch noch sehr unerfahren.

Naja halt das laufende Script auf der Seite, die ich gepostet hab. Ich lad das immer hoch und probier das dann aus. Sprich ich hab nen Feld angeklickt und geguckt auf was die und die Variable steht. Ich guck halt immer nach den Variablen bei denen ich glaube, dass die ein Fehler verursachen oder ne Schleife nicht macht was ich mir vorstelle.

xorg1990 · 31. Jan. 2015

Blodyman schrieb:
Okay, bei mir ist die Konsole immer leer beim Seitenaufruf.

Nee also irgendwo ist da der wurm drinnen.
Uncaught TypeError: Cannot read property 'neuer_eintrag' of undefined, eigene-projekte.js Zeile: 195

Ich hab im Dezember erst angefangen mit webdesign und programmierung und bin daher auch noch sehr unerfahren.

Dafür schaut's doch gut aus ganz gut aus.

Blodyman · 31. Jan. 2015

neuer_eintrag ist Teil meines kleinen pseudolivechats. Ich lass die Seite öfter reloaden und mein Script trägt die bereits eingegebenen Zeichen wieder ins Eingabefeld ein. Ich sollte mal alles so auslagern, sodass nur Scripts geladen werden, die man zu diesem Zeitpunkt braucht. neuer_eintrag existiert halt erst nachm anmelden im Chat

Danke

Wenn das auch mal die Unternehmen so sehen würden, bei denen ich mich um eine Ausbildung bewerbe

[FRAGE] [HILFE] TicTacToe gewinner ermitteln

Blodyman

New member

xorg1990

New member

Blodyman

New member

xorg1990

New member

Blodyman

New member

xorg1990

New member

Blodyman

New member

xorg1990

New member

Blodyman

New member