Die erste Hälfte des Spiels

Dieses ist der Quellcode auf den Seiten 174 und 175 des Buches. Wenn du auf den Button „Spielen“ klickst, erscheinen alle drei Sekunden die sechs blauen Kästen auf der grauen Spielfläche und verschwinden dann wieder. Am Ende erscheint ein Alert auf dem Bildschirm. Aktualisiere die Webseite (mit F5), wenn du das Spiel wieder neu starten willst.

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>Sicherheitsspiel</title>

   <style>
     #spielFeld {
       border: 1px solid black;
       background-color: gray;
       height: 350px;
       width: 650px;
    }
     .person {
       background-color: lightblue;
       width: 120px;
       height: 120px;
       padding: 10px;
       margin: 10px;
       float: left;
    }
     .versteckt {
       display: none;
    }
     .sichtbar {
       display: block;
    }
   </style>
</head>
<body>
   <input type="button" value="Spielen" onclick="startSpiel()";/>
   <div id="spielFeld">
     <div class="person">1</div>
     <div class="person">2</div>
     <div class="person">3</div>
     <div class="person">4</div>
     <div class="person">5</div>
     <div class="person">6</div>
   </div>
   <script>
     function startSpiel() {
       spielSchleife();
    }
     var zähler = 0;
     var personenSichtbar = false;
     function spielSchleife() {
       personenSichtbar = !personenSichtbar; 
       zeigePersonen();
       zähler++;
       if(zähler < 12) {
         setTimeout(spielSchleife, 3000);
      }
       else {
         alert("Spiel vorbei!");
      }
    }
     function zeigePersonen() {
       var spielFeld = document.getElementById("spielFeld");
       var zuSetzendeKlasse = personenSichtbar ? "person sichtbar" : "person versteckt";
       for(var index = 0; index < 6; index ++) {
         spielFeld.children[index].className = zuSetzendeKlasse;
      }
    }
   </script>
</body>
</html>

Beispiel ansehen

Zurück zur Mission