Blu Mania

So funktioniert das Script

Das Script hat vier Aufgaben: Es baut das Spielbrett aus 100 Bildern auf, führt den Zug des Spielers aus, prüft nach jedem Zug, ob der Level geschafft ist, und lässt den Computer die Vorgabe für den nächsten Level würfeln. Der Spielzustand steckt in zwei einfachen Zahlenlisten, und alles zusammen liegt in einer sofort ausgeführten Funktion, damit die vielen Variablennamen nicht mit anderen Scripts kollidieren.

Das Spielbrett

for (let i = 0; i <= 99; i++) {
  const stein = new Image(20, 20);
  stein.id = "bm-b" + i;
  stein.src = bilderpfad + "blau.jpg";
  stein.addEventListener("click", function () { Zug(i); });
  brett.appendChild(stein);
  steine[i] = stein;
}

Die 100 Steine werden nicht ins HTML geschrieben, sondern in einer Schleife erzeugt und in den Behälter bm-brett gehängt. Der bekommt im Stylesheet display: grid mit zehn Spalten zu 20 Pixeln — damit ordnen sich die Bilder von allein zu einem 10 × 10-Raster. Früher stand hier eine verschachtelte Tabelle mit document.write; das Ergebnis ist dasselbe, der Weg dorthin nur deutlich kürzer.

Wichtig ist die Zeile mit addEventListener: Jeder Stein bekommt seine eigene kleine Klickfunktion, und weil i mit let deklariert ist, merkt sich jede dieser Funktionen ihren eigenen Wert. Mit var hätten am Ende alle 100 Steine die Nummer 100 gemeldet — ein Klassiker unter den JavaScript-Stolperfallen.

Der Zug

const a = Math.floor(z / 10);   // Reihe
const b = z % 10;               // Spalte
for (let i = 0; i <= 9; i++) {
  const wert = 10 * a + i;
  Feld[wert] = -Feld[wert];
  malen(wert);
}

Die Steine sind von 0 bis 99 durchnummeriert. Aus der Nummer lassen sich Reihe und Spalte direkt ausrechnen: Math.floor(z / 10) ist die Zehnerstelle, z % 10 die Einerstelle. Der Restwert-Operator % liefert den Rest einer Division — 47 geteilt durch 10 ergibt 4 Rest 7, also Reihe 4, Spalte 7.

Der Zustand jedes Steins steht in der Liste Feld, und zwar als 1 für Rot und −1 für Blau. Das ist der eigentliche Kniff des Scripts: Umschalten heißt dann einfach Vorzeichen wechseln, Feld[wert] = -Feld[wert]. Eine zweite, fast gleiche Schleife erledigt danach die Spalte; die Bedingung if (a !== i) verhindert, dass der angeklickte Stein selbst zweimal gedreht wird — er gehört ja zu Reihe und Spalte zugleich.

Ist der Level geschafft?

function Auswertung() {
  gebraucht++;
  Zuege--;
  for (let i = 0; i <= 99; i++) {
    if (Feld[i] === -1) {
      feldVorrat.value = Zuege;
      ani = 0;
      return;
    }
  }
  Punkte++;
  ...
}

Nach jedem Zug läuft das Script einmal über alle 100 Felder. Findet es auch nur eine −1, ist noch mindestens ein Stein blau: Der Zugvorrat wird aktualisiert, das Brett per ani = 0 wieder freigegeben, und return beendet die Funktion sofort. Erst wenn die Schleife komplett durchläuft, ohne fündig zu werden, ist alles rot und ein Punkt verdient.

ani ist eine Sperre: Solange sie auf 1 steht, ignoriert Zug() jeden Klick. Das verhindert, dass man während der Startanimation oder in der Sekunde zwischen zwei Leveln dazwischenfunkt.

Die Vorgabe des Computers

Anz++;
wieoft = Math.floor(Math.sqrt(Anz));
for (let ii = 1; ii <= wieoft; ii++) {
  do {
    neu = 0;
    a = Math.floor(Math.random() * 10);
    b = Math.floor(Math.random() * 10);
    for (let j = 1; j <= ii; j++) {
      if (a + 10 * b === merker[j]) { neu = 1; }
    }
  } while (neu === 1);
  merker[ii] = a + 10 * b;
  ...
}

Der Schwierigkeitsgrad steckt in einer einzigen Zeile: Math.floor(Math.sqrt(Anz)). Die Wurzel aus der Levelnummer, abgerundet — daher die Sprünge bei 4, 9, 16, 25 und so weiter, genau wie in der Anleitung beschrieben. Wer das Spiel schneller schwer machen möchte, ersetzt die Wurzel zum Beispiel durch Math.floor(Anz / 3) + 1.

Math.random() liefert eine Zufallszahl zwischen 0 und knapp 1; mal 10 genommen und abgerundet ergibt das eine Zahl von 0 bis 9. Die do … while-Schleife würfelt so lange weiter, bis ein Zug herauskommt, der in dieser Vorgabe noch nicht vorkam — sonst würden sich zwei gleiche Züge gegenseitig aufheben und der Level wäre zu leicht. Zum Schluss merkt sich Feldalt den fertigen Ausgangszustand, damit die Taste z ihn jederzeit wiederherstellen kann.

Tastatur und Bestwert

function TasteGedrueckt(Ereignis) {
  const ziel = Ereignis.target;
  if (ziel && (ziel.tagName === "INPUT" || ziel.tagName === "TEXTAREA")) { return; }
  const taste = (Ereignis.key || "").toLowerCase();
  if (taste === "z") { zuruecksetzen(); }
  if (taste === "s") { neuesSpiel(); }
  if (taste === "a") { hilfe(); }
}

Früher wurden hier Tastencodes verglichen — 83 für „S“, 115 für „s“ und so weiter. Heute liefert Ereignis.key das Zeichen direkt; toLowerCase() macht Groß- und Kleinschreibung gleichwertig. Die erste Zeile ist neu hinzugekommen: Sie sorgt dafür, dass das Spiel nicht reagiert, wenn ihr gerade in einem Eingabefeld tippt.

try { localStorage.setItem("BM", String(Punkte)); } catch (e) {}

Der persönliche Bestwert lag ursprünglich in einem Cookie mit zehn Jahren Laufzeit. Cookies werden bei jedem Seitenaufruf mitgeschickt — für eine Punktzahl völlig unnötig. localStorage bleibt dagegen im Browser. Das try … catch darum ist Absicht: In manchen Browsereinstellungen ist der Speicher gesperrt und wirft einen Fehler; so läuft das Spiel dann eben ohne Bestwert weiter, statt stehenzubleiben.