Schleifen verwenden

Setze for-Schleifen ein, um die Zeilen und Spalten deines Spielfelds zu prüfen, bis ein Spieler drei Kreise oder Kreuze in einer Reihe hat. Verwende if-Anweisungen, um die Diagonalen zu prüfen. Wenn waagrecht, senkrecht oder diagonal drei gleiche Symbole gesetzt worden sind, erscheint ein Alert-Fenster mit einer Gewinnmeldung.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>Tic-Tac-Toe</title>
      <style> 
        .zeile div {
          padding: 10px;
          border: 1px solid black;
          height: 30px;
          width: 30px;
	  float: left;
        }
        .zeile {
         clear: both;
        }
      </style>
    </head>
    <body>
       Klicke hier, um Tic-Tac-Toe zu spielen!<br/>
       <div>
          <div class="zeile">
               <div id="0_0" onclick="setze(this)"></div>
               <div id="1_0" onclick="setze(this)"></div>
               <div id="2_0" onclick="setze(this)"></div>
          </div>
          <div class="zeile">
               <div id="0_1" onclick="setze(this)"></div>
               <div id="1_1" onclick="setze(this)"></div>
               <div id="2_1" onclick="setze(this)"></div>
          </div>
          <div class="zeile">
               <div id="0_2" onclick="setze(this)"></div>
               <div id="1_2" onclick="setze(this)"></div>
               <div id="2_2" onclick="setze(this)"></div>
          </div>
       </div>
       <script>
          var aktuellerSpieler = "O";
          function setze(kästchen) {
             if(kästchen.innerText != "") return; 
             kästchen.innerText = aktuellerSpieler;
             aktuellerSpieler == "O" ? aktuellerSpieler = "X" : aktuellerSpieler = "O";
             prüfeSpielfeld();
          }
          function prüfeSpielfeld() {
             for(var i = 0; i <= 2; i++){
                var erstes = document.getElementById("0_" + i).innerText;
                var zweites = document.getElementById("1_" + i).innerText;
                var drittes = document.getElementById("2_" + i).innerText;
                if(erstes == "") continue;
                if(erstes == zweites && erstes == drittes) {
                    alert("Gewonnen!!");
                }
              }
              for(var i = 0; i <= 2; i++){
                var erstes = document.getElementById(i + "_0").innerText;
                var zweites = document.getElementById(i + "_1").innerText;
                var drittes = document.getElementById(i + "_2").innerText;
                if(erstes == "") continue;
                if(erstes == zweites && erstes == drittes) {
                    alert("Gewonnen!!");
                }
              }

              var erstesD1 = document.getElementById("0_0").innerText; 
              var zweitesD1 = document.getElementById("1_1").innerText; 
              var drittesD1 = document.getElementById("2_2").innerText;
              if(erstesD1 != "" && erstesD1 == zweitesD1 && erstesD1 == drittesD1) {
                    alert("Gewonnen!"); 
              }

              var erstesD2 = document.getElementById("0_2").innerText; 
              var zweitesD2 = document.getElementById("1_1").innerText; 
              var drittesD2 = document.getElementById("2_0").innerText;
              if(erstesD2 != "" && erstesD2 == zweitesD2 && erstesD2 == drittesD2) {
                     alert("Gewonnen!"); 
              }
            }

       </script>
    </body>
</html>

Beispiel ansehen

Zurück zur Mission