Triff das Pünktchen

So funktioniert das Script

Das Script besteht aus vier Bereichen: dem Aufbau des Spielfelds, dem Spielzustand (läuft gerade eine Runde? wo sitzt das Pünktchen? wie viele Punkte?), der Uhr, die sich sekundenweise selbst aufruft, und der Auswertung eines Klicks. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablen des Spiels für sich bleiben.

let playing = false;   // läuft gerade eine Runde?
let currentpos = -1;   // wo sitzt das Pünktchen gerade?
let totalhits = 0;     // Punktestand

Das ist der komplette Spielzustand. Fast jedes Spiel hat so einen kleinen Satz Variablen, in dem alles Wichtige steht — hier reichen drei. currentpos startet mit -1, einem Wert, den es als Feldnummer gar nicht gibt; das heißt so viel wie „noch nirgends“.

for (let k = 0; k < numholes; k++) {
  const loch = document.createElement("input");
  loch.type = "radio";
  loch.addEventListener("click", function () { hithead(k); });
  feld.appendChild(loch);
  loecher.push(loch);
}

Das Spielfeld wird nicht von Hand ins HTML geschrieben, sondern in einer Schleife erzeugt: 60 Radioknöpfe, jeder mit seinem eigenen Klick-Empfänger. Wichtig ist die Zeile mit hithead(k) — die kleine Funktion darin merkt sich ihr k, sodass jeder Punkt später weiß, welche Nummer er hat. Zusätzlich landen alle 60 Elemente im Array loecher, damit das Script sie über ihre Nummer erreichen kann, ohne sie erneut im Dokument suchen zu müssen. Angeordnet werden sie mit ein paar Zeilen CSS zu einem Raster aus 10 Spalten — dass daraus 6 Reihen werden, ergibt sich von selbst.

function random() {
  return Math.floor(Math.random() * 100 % numholes);
}

So sucht sich das Spiel das nächste Feld aus. Math.random() * 100 ergibt eine Zahl zwischen 0 und 100, % numholes nimmt den Rest bei der Division durch 60, und Math.floor schneidet die Nachkommastellen ab. Kurios daran: Weil 100 nicht glatt durch 60 teilbar ist, kommen die Felder 0 bis 39 doppelt so häufig vor wie die Felder 40 bis 59 — der Zufall ist also schief. Wir haben das so gelassen, wie es der Autor geschrieben hat; wer es gleichmäßig haben möchte, schreibt einfach Math.floor(Math.random() * numholes).

function launch() {
  let launched = false;
  while (!launched) {
    const mynum = random();
    if (mynum !== currentpos) {
      loecher[mynum].checked = true;
      currentpos = mynum;
      launched = true;
    }
  }
}

launch() setzt das Pünktchen an eine neue Stelle. Die while-Schleife würfelt so lange weiter, bis eine Zahl herauskommt, die nicht der aktuellen Position entspricht — sonst könnte das Pünktchen scheinbar stehen bleiben. Erst dann wird der Radioknopf gefüllt, die neue Position gemerkt und die Schleife über launched = true verlassen.

if (currentpos !== id) {
  totalhits += -1;
  loecher[id].checked = false;
} else {
  totalhits += 1;
  launch();
  loecher[id].checked = false;
}

Die Auswertung eines Klicks ist eine einzige Verzweigung: Stimmt die angeklickte Nummer nicht mit currentpos überein, war es ein Fehlgriff und es gibt einen Minuspunkt. Stimmt sie, gibt es einen Pluspunkt, und launch() setzt sofort ein neues Ziel. In beiden Fällen wird der angeklickte Knopf wieder geleert — schließlich soll nur das Ziel gefüllt aussehen.

timerID = setTimeout(function () { showtime(remtime - 1); }, 1000);

Die Uhr ist elegant gelöst: showtime zeigt die Restzeit an und beauftragt dann setTimeout, sich selbst eine Sekunde später mit einem um eins kleineren Wert erneut aufzurufen. Eine Funktion, die sich selbst aufruft, nennt man rekursiv. Bei 0 ist Schluss, dann übernimmt stopgame(). Der Rückgabewert von setTimeout landet in timerID — nur mit dieser Nummer lässt sich der laufende Countdown später über clearTimeout abbrechen, wenn ihr das Spiel vorzeitig stoppt.

Zum Anpassen: gamelength ganz oben steuert die Spieldauer in Sekunden, numholes die Größe des Spielfelds. Ändert ihr numholes, passt am besten auch die Zahl der Spalten im CSS (repeat(10, 1fr)) dazu an.