Streichholzspiel

So funktioniert das Script

Das Script besteht aus vier Teilen: Es baut die Streichholzreihe auf (initHolz), zählt eure Auswahl (GetClickedElement), entfernt die angehakten Hölzer (RemoveSelected) und lässt anschließend den Computer ziehen (AI). Ein paar Variablen halten dabei den Spielstand fest: mc ist die Zahl der noch liegenden Hölzer, mc1 die Zahl vom Spielbeginn (sie bleibt gleich, weil die Schleifen über alle jemals erzeugten Hölzer laufen müssen), user_sel und cpu_sel sind die Züge der beiden Seiten. Weil das ganze Script in einer sofort ausgeführten Funktion steckt, bleiben diese Namen im Script und stören andere Scripts auf der Seite nicht.

for (let i = 0; i < mc; i++) {
  const spalte = document.createElement("div");
  const holz = document.createElement("div");
  holz.id = "im" + i;
  const kasten = document.createElement("input");
  kasten.type = "checkbox";
  kasten.id = "ch" + i;
  kasten.addEventListener("click", GetClickedElement);
  ...
}

So entsteht das Spielfeld. Für jedes Streichholz erzeugt die Schleife zwei Elemente: das Holz selbst (ein schmales, hohes div mit einem roten Köpfchen darin) und darunter ein Kontrollkästchen. Beide bekommen eine durchnummerierte id — im0, im1, im2 … für die Hölzer und ch0, ch1, ch2 … für die Kästchen. Über diese Nummern findet das Script später jedes einzelne Holz wieder. Im Original wurde die Reihe noch mit document.write als Tabelle in die Seite geschrieben; das funktioniert in heutigen Browsern nur noch während des Ladens und ist hier durch createElement ersetzt.

function RemoveElementByNum(num) {
  document.getElementById("ch" + num).style.display = "none";
  document.getElementById("im" + num).style.display = "none";
}

Ein Holz „verschwindet“, indem sein div und sein Kästchen auf display: none gesetzt werden. Es bleibt also im Dokument stehen, wird nur nicht mehr angezeigt. Genau das nutzt das Script an mehreren Stellen als Gedächtnis: Wo style.display nicht "none" ist, liegt noch ein Holz.

let total = 0;
for (let i = 0; i < mc1; i++) {
  const ename = document.getElementById("ch" + i);
  if ((ename.style.display !== "none") && (ename.checked)) {
    total++;
  }
}

Bei jedem Klick auf ein Kästchen läuft GetClickedElement über alle Kästchen und zählt, wie viele davon noch sichtbar und angehakt sind. Das Ergebnis landet in total_sel und user_sel. Sind es mehr als drei, erscheint sofort ein Hinweis in der Anzeige — im Original war das noch ein alert()-Fenster, das man wegklicken musste.

if ((mc % 4) !== 1) {
  ost = (mc - user_sel) % 4;
  if (ost === 0) { ost = 4; }
  if (ost > 1) { cpu_sel = ost - 1; }
  else { cpu_sel = Math.floor(3 * Math.random()); cpu_sel++; }
}
else { cpu_sel = 4 - user_sel; }

Das ist die gesamte Spielstärke des Computers. Der Operator % heißt Modulo und liefert den Rest einer Division: 23 % 4 ergibt 3. Das Ziel des Computers ist, euch eine Anzahl zu hinterlassen, die den Rest 1 hat. Nach eurem Zug liegen mc - user_sel Hölzer; mit ost - 1 nimmt er genau so viele weg, dass wieder ein Rest von 1 übrig bleibt.

Der else-Zweig ist der Fall, in dem der Computer selbst schon auf einer Zahl mit Rest 1 sitzt — dann kann er bei fehlerfreiem Spiel nicht mehr gewinnen. Er antwortet dann mit 4 - user_sel, ergänzt euren Zug also auf vier und hält die Lage stabil, bis ihr euch verrechnet. Und wenn ost gleich 1 ist, greift er zu Math.random(): Math.floor(3 * Math.random()) liefert 0, 1 oder 2, das anschließende cpu_sel++ macht daraus 1, 2 oder 3 — ein reiner Zufallszug als letzte Hoffnung.

if ((mc - user_sel) === 1) {
  win = true;
  game = false;
}

Bleibt nach eurem Zug genau ein Holz liegen, muss der Computer es nehmen — ihr habt gewonnen. Das merkt sich win. Sobald mc auf 1 oder darunter fällt, ist die Partie vorbei: Die beiden Anzeigezeilen werden ausgeblendet und in der Ergebnisfläche steht, wer gewonnen hat.

Zum Anpassen: Die Farben der Hölzer stehen in initHolz als #C0C077 (Holz) und #FF3300 (Kopf), die Höhe von 70 Pixeln gleich daneben. Die Grenzen 7 und 50 für die Anzahl könnt ihr ebenfalls dort ändern — dann aber auch im min- und max-Attribut des Eingabefeldes. Die Regel „höchstens drei Hölzer“ steckt an mehreren Stellen (total > 3, total_sel < 4, % 4): Wer sie ändert, muss auch die Strategie des Computers neu durchdenken, denn die Vier ist genau „drei plus eins“.