Checkbox Spiel

So funktioniert das Script

Das Script hat vier Aufgaben: Es baut die 100 Kästchen auf, zählt die Klicks, lässt eine Uhr rückwärts laufen und kommentiert nebenbei den Spielstand. Für jede Aufgabe gibt es eine eigene Funktion. Interessant ist, dass hier zwei Zeitgeber gleichzeitig laufen — einer im Sekundentakt für die Uhr, einer im Zehntelsekundentakt für die Meldungen.

for (let i = 0; i < 100; i++) {
  const kasten = document.createElement("input");
  kasten.type = "checkbox";
  kasten.id = "myCheckboxGame" + i;
  spielfeld.appendChild(kasten);
}

Hundert Kästchen von Hand ins HTML zu schreiben wäre mühsam, deshalb erzeugt eine Schleife sie: document.createElement baut ein neues Element, die drei Zuweisungen machen ein Ankreuzfeld mit fortlaufender id daraus, und appendChild hängt es in den Container. Die Zehnerreihen entstehen nicht im Script, sondern im CSS — grid-template-columns: repeat(10, 1.5rem) sorgt dafür, dass nach jedem zehnten Kästchen umgebrochen wird.

if (!play) {
  play = true;
  startTime = now.getTime();
  start = "ja";
  clock();
  command();
}

Die Uhr startet nicht beim Laden der Seite, sondern beim ersten Klick. Der Merker play sorgt dafür, dass dieser Block nur ein einziges Mal ausgeführt wird — sonst würde jeder weitere Klick eine zweite Uhr starten. now.getTime() liefert die aktuelle Zeit in Millisekunden seit dem 1. Januar 1970; dieser Startzeitpunkt wird gemerkt, um später die verstrichene Zeit auszurechnen.

if (now.getTime() - startTime > Number(zeit) * 1000) {
  element.checked = !element.checked;
  return;
}

Das ist die Schlusskontrolle: Liegt der Klick mehr als 30 Sekunden (also 30 × 1000 Millisekunden) nach dem Start, wird er rückgängig gemacht. !element.checked kehrt den Zustand um — war das Kästchen gerade angehakt worden, ist es danach wieder leer. return verlässt die Funktion sofort, sodass der Punktestand unverändert bleibt.

function clock() {
  if (start !== "nein") {
    restzeit = restzeit - 1;
    feldZeit.value = restzeit;
    if (restzeit !== 0) {
      window.setTimeout(clock, 1000);
    }
  }
}

Die Uhr ruft sich selbst auf: Sie zieht eine Sekunde ab, schreibt den Rest ins Anzeigefeld und meldet sich mit setTimeout in 1000 Millisekunden erneut — solange, bis die Null erreicht ist. Ein Druck auf „neustart" setzt start auf "nein"; die nächste Runde der alten Uhr findet dann die Abbruchbedingung vor und läuft nicht weiter.

if (punkt === 1) {
  text = "Na endlich fängst du an...";
} else if (punkt === 100) {
  text = "Wow, du hast alle angeklickt...";
}

command() ist der Kommentator. Zehnmal pro Sekunde schaut die Funktion auf Restzeit und Punktestand und wählt daraus einen Text aus. Die Meldungen sind der Teil, an dem sich am leichtesten schrauben lässt: Ihr könnt die Sprüche austauschen oder bei anderen Punktzahlen einen eigenen Kommentar einbauen. Auch die Spieldauer ist schnell geändert — ganz oben steht const zeit = "30";, und die Halbzeitmeldung rechnet sich ihren Zeitpunkt daraus selbst aus.

kasten.addEventListener("click", function () {
  display(kasten);
});

Jedes der 100 Kästchen bekommt beim Erzeugen seinen eigenen Zuhörer. Die kleine Funktion darin merkt sich, zu welchem Kästchen sie gehört, und reicht es an display() weiter — dort wird gezählt. Das ist der moderne Ersatz für das früher übliche onclick-Attribut direkt im HTML: Markup und Verhalten bleiben so sauber getrennt.