ASCII Minesweeper

So funktioniert das Script

Das Script kommt mit erstaunlich wenig Bauteilen aus: zwei Listen (in JavaScript heißen sie Arrays) für den Zustand der 16 Felder, eine Funktion neu(), die die Minen verteilt, und eine Funktion klick(), die ein Feld aufdeckt. Ein Spielfeld im eigentlichen Sinn gibt es gar nicht — nur 16 <span>-Elemente mit den Nummern feld0 bis feld15, deren Inhalt ausgetauscht wird.

let a = 1 + 6 * (Math.random());
a = Math.round(a);
if (a === 6 && minen !== 0 || a === 2 && minen !== 0) {
  verdeckt[i] = "mine";
  minen1 += 1;
}

So wird gemischt: Für jedes der 16 Felder wird eine Zufallszahl gezogen und auf eine ganze Zahl gerundet. Fällt dabei eine 2 oder eine 6, liegt dort eine Mine. Das trifft ungefähr jedes dritte Feld — die Variable minen sieht zwar nach einer festen Minenzahl aus, wird aber nie heruntergezählt und hat deshalb keine Wirkung. Wollt ihr weniger Minen, streicht eine der beiden Bedingungen (dann liegt nur noch unter jedem sechsten Feld eine); für mehr Minen nehmt ihr eine dritte Ziffer dazu. minen1 zählt mit, wie viele es tatsächlich geworden sind — diese Zahl braucht später die Gewinnprüfung.

Zwei Listen führen dabei Buch: verdeckt weiß, wo die Minen liegen, und bleibt unverändert. aufgedeckt merkt sich, welche Felder der Spieler schon angeklickt hat — ein aufgedecktes Feld bekommt dort den Leerstring.

if (verdeckt[feld] === "mine") {
  verloren = true;
  document.getElementById(checken).innerHTML = '(<span class="ms-mine">*</span>)';
  document.getElementById("smiley").innerHTML = '<span class="ms-tot">:(</span>';
}

Der erste Blick beim Klick gilt der Mine. Liegt eine unter dem Feld, wird ein rotes Sternchen eingesetzt und der Smiley auf :( umgestellt. Der Merker verloren steht danach auf true, und weil klick() ganz oben if (verloren === false) prüft, tut ein weiterer Klick auf irgendein Feld schlicht nichts mehr. Erst neu() setzt alles zurück — deshalb liegt auf dem Smiley der Klick für die neue Runde.

if (verdeckt[feld - 4] === "mine") {
  ausgabe += 1;
}
if (verdeckt[feld + 4] === "mine") {
  ausgabe += 1;
}

Ist keine Mine im Spiel, wird gezählt. Weil die 16 Felder in vier Vierergruppen angezeigt werden, liegt das Feld direkt darüber genau vier Nummern früher (feld - 4) und das darunter vier später (feld + 4). Liegt die gesuchte Nummer außerhalb der Liste, liefert das Array undefined — der Vergleich mit "mine" geht dann einfach nicht auf, ganz ohne Fehlermeldung. Für links und rechts gibt es zwei weitere, deutlich verschlungenere Abfragen mit feld - 1 und feld + 1. Sie sollen verhindern, dass am Zeilenrand über die Kante hinweg gezählt wird, tun das aber nur teilweise: An manchen Stellen wird ein Nachbar doppelt gezählt. Wir haben die Zeilen bewusst so gelassen, wie der Einsender sie geschrieben hat — wer mag, kann hier üben und die Randprüfung sauber nachbauen.

let test = 0;
for (let i = 0; i < 16; i++) {
  if (aufgedeckt[i] === "") { test += 1; }
  if (test === 16 - minen1) { meldung.textContent = "Sie haben gewonnen."; }
}

Nach jedem erfolgreichen Klick wird durchgezählt, wie viele Felder schon aufgedeckt sind. Sind es genau so viele, wie es minenfreie Felder gibt (16 - minen1), ist die Runde gewonnen. Die Meldung erscheint in der Ergebnisfläche unter dem Spielfeld; im Original stand hier ein alert()-Fenster, das man erst wegklicken musste.

document.getElementById("feld" + i).addEventListener("click", function () {
  klick(nummer);
});

Zum Schluss werden die 16 Felder mit der Funktion verbunden. Früher stand dafür an jedem <span> ein onclick="klick(0)" im HTML. Heute übernimmt das eine Schleife: Sie holt sich der Reihe nach jedes Feld und hängt einen Klick-Zuhörer daran, der die passende Feldnummer weitergibt. Vorteil: Das HTML bleibt sauber, und wollt ihr das Spielfeld vergrößern, ändert ihr nur die Zahl 16 an den drei Stellen im Script und ergänzt die <span>-Elemente.