Den Programmtext vereinfachen

Vereinfache den Programmtext, sodass er weniger Textwiederholungen enthält und kürzer wird. Ändere ihn so ab, dass er nur noch eine Schleife zum Prüfen der Zeilen und Spalten enthält. Dieses Vereinfachen ist ein normaler Schritt einer Programmentwicklung.

<!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++){
                 prüfeGewonnen(document.getElementById("0_" + i).innerText,
                               document.getElementById("1_" + i).innerText,
                               document.getElementById("2_" + i).innerText);
                 prüfeGewonnen(document.getElementById(i + "_0").innerText,
                               document.getElementById(i + "_1").innerText,
                               document.getElementById(i + "_2").innerText);
              }   
              prüfeGewonnen(document.getElementById("0_0").innerText, 
                            document.getElementById("1_1").innerText, 
                            document.getElementById("2_2").innerText);
              prüfeGewonnen(document.getElementById("0_2").innerText, 
                            document.getElementById("1_1").innerText, 
                            document.getElementById("2_0").innerText);
          }
             
          function prüfeGewonnen(erstes, zweites, drittes) { 
             if(erstes != "" && erstes == zweites && erstes == drittes) {
                   alert("Gewonnen!"); 
             } 
          }
       </script>
    </body>
</html>

Beispiel ansehen

Zurück zur Mission