Kreise und Kreuze hinzufügen

Code skill

Definiere eine Variable für den aktuellen Spieler und setze die Eigenschaft innerText, um in den Kästchen des Spielfelds Symbole (O oder X) anzuzeigen. Mit einer if-else-Anweisung entscheidest du, ob ein Kreis oder ein Kreuz in das angeklickte Kästchen gesetzt wird.

<!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 onclick="setze(this)"></div>
               <div onclick="setze(this)"></div>
               <div onclick="setze(this)"></div>
          </div>
          <div class="zeile">
               <div onclick="setze(this)"></div>
               <div onclick="setze(this)"></div>
               <div onclick="setze(this)"></div>
          </div>
          <div class="zeile">
               <div onclick="setze(this)"></div>
               <div onclick="setze(this)"></div>
               <div onclick="setze(this)"></div>
          </div>
       </div>
       <script>
          var aktuellerSpieler = "O";
          function setze(kästchen) {
             kästchen.innerText = aktuellerSpieler;
             if(aktuellerSpieler == "O") {
                  aktuellerSpieler = "X";
             }
             else {
                 aktuellerSpieler = "O";
             }
          }
       </script>
    </body>
</html>

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