Den Gewinner ermitteln

Code skill

Gib jedem Kästchen des Spielfelds ein id-Attribut und setze es auf einen Wert, der die Position des Kästchens auf dem Spielfeld beschreibt. Verwende die Methode getElementById und zwei neue if-Anweisungen, um herauszufinden, ob ein Spieler drei gleiche Symbole in einer Linie setzen konnte.

<!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() {
              var erstes = document.getElementById("0_0").innerText;
              var zweites = document.getElementById("1_0").innerText;
              var drittes = document.getElementById("2_0").innerText;
              if(erstes == "") return;
              if(erstes == zweites && erstes == drittes) {
                    alert("Gewonnen!!");
              }
          }
       </script>
    </body>
</html>

Zurück zur Mission
Copyright © 2008 Walker Books Ltd
Illustrations © Duncan Beedie
All rights reserved.