Kreise und Kreuze hinzufügen

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>

Beispiel ansehen

Zurück zur Mission