Lights Out

So funktioniert das Script

Das Script besteht aus vier überschaubaren Teilen: dem Umschalten der Nachbarfelder nach einem Klick, der Prüfung auf einen gelösten Zustand, den fünf fest eingebauten Ausgangsstellungen und der Verdrahtung von Kästchen und Knöpfen mit diesen Funktionen. Eine eigene Datenstruktur für das Spielfeld braucht es nicht — der Spielstand steckt schlicht in den 25 Ankreuzfeldern selbst.

const formular = document.getElementById("lo-form");
const felder = formular.elements;   // 0-24 sind die Spielfelder, 25 ist das Auffangfeld

Jedes Formular kennt seine eigenen Bedienelemente unter elements, und zwar in der Reihenfolge, in der sie im HTML stehen. felder[0] ist damit das Kästchen links oben, felder[24] das rechts unten. So kann das Script über die Feldnummer rechnen, statt 25 einzelne Namen zu vergeben — genau darauf beruht die ganze Nachbarschaftslogik.

const row = Math.floor(v / q) + w;
let a = v + q;   // Feld darunter
let b = v - q;   // Feld darüber
let c = v + w;   // Feld rechts
let d = v - w;   // Feld links

Das Brett ist in Wahrheit eine einzige lange Reihe aus 25 Feldern, die nur optisch in fünf Zeilen umgebrochen wird. Deshalb liegt der Nachbar unterhalb eines Feldes genau fünf Positionen weiter (q ist die Zeilenbreite 5), der Nachbar oberhalb fünf Positionen zurück. Links und rechts ist es jeweils eine Position. row merkt sich zusätzlich, in welcher Zeile das angeklickte Feld liegt.

if (a < 0 || a > 24) { a = 25; }
if (Math.floor(c / q) + w !== row) { c = 25; }

Am Rand des Bretts gibt es diese Nachbarn gar nicht. Statt jeden Fall einzeln abzufangen, benutzt das Script einen Trick: Alle ungültigen Nachbarn bekommen die Nummer 25 — und auf Position 25 sitzt ein unsichtbares Auffangfeld, das im HTML gleich hinter dem Brett steht. Umschaltungen, die ins Leere gehen sollen, landen dort und richten keinen Schaden an. Die zweite Zeile fängt den Fall ab, dass der rechte Nachbar rechnerisch zwar existiert, aber schon in der nächsten Zeile liegt: Stimmt seine Zeilennummer nicht mit row überein, wandert auch er ins Auffangfeld.

felder[a].checked = !felder[a].checked;

Das eigentliche Umschalten ist ein Einzeiler. Das Ausrufezeichen dreht einen Wahrheitswert um: Aus true wird false und umgekehrt. Das angeklickte Feld selbst schaltet übrigens der Browser um, denn genau das macht ein Ankreuzfeld beim Anklicken von sich aus — das Script kümmert sich nur um die vier Nachbarn.

let win = true;
for (let i = 0; i < 24; i++) {
  if (felder[i].checked) { win = false; }
}

Nach jedem Zug läuft die Siegprüfung über das Brett. Findet sie auch nur ein angekreuztes Kästchen, ist die Runde noch nicht vorbei. Eine kleine Eigenheit des Originals haben wir dabei bewusst so gelassen: Die Schleife läuft nur bis 23, das letzte Feld unten rechts wird also nicht mitgezählt. Wollt ihr das ändern, ersetzt ihr die 24 in dieser Schleife durch 25.

function level1() { clearall(); setzen([10, 12, 14], true); }

Die fünf Level sind schlicht Listen von Feldnummern. clearall() räumt das Brett leer, danach schaltet setzen() die genannten Felder ein. Level 3 macht es andersherum: Erst wird alles eingeschaltet, dann werden einzelne Felder wieder gelöscht. Eigene Aufgaben baut ihr euch also, indem ihr in diesen Listen andere Feldnummern eintragt — 0 ist links oben, 24 rechts unten.