Glücks Klick

So funktioniert das Script

Das Script besteht aus zwei Funktionen: starten() mischt die sechzehn Symbole und legt sie in einer Liste ab, klick() deckt ein Feld auf und verrechnet die Punkte. Die Felder selbst stehen fertig im HTML — das Script füllt sie nur.

let punkte = 0;
let felder = [];
const knoepfe = document.querySelectorAll("#gk-feld .gk-knopf");

felder ist ein Array, also eine nummerierte Liste: An Position 0 steht das Symbol des ersten Feldes, an Position 15 das des letzten. querySelectorAll holt alle sechzehn Knöpfe auf einen Schlag und legt sie ebenfalls als nummerierte Liste ab. Weil beide Listen dieselbe Reihenfolge haben, gehört knoepfe[7] immer zu felder[7] — das ist der ganze Zusammenhalt des Spiels.

const a = 1 + Math.floor(Math.random() * 6);
switch (a) {
  case 1:
    b = "$";
    break;
  ...
}

Hier wird gewürfelt. Math.random() liefert eine Kommazahl zwischen 0 und knapp unter 1, mal 6 ergibt das den Bereich 0 bis knapp 6, Math.floor schneidet die Nachkommastellen ab, und das + 1 verschiebt das Ergebnis auf 1 bis 6 — jede Zahl gleich wahrscheinlich. Die switch-Anweisung übersetzt sie dann in ein Symbol. switch ist die übersichtliche Schreibweise für viele if-Abfragen auf denselben Wert; das break hinter jedem Fall ist Pflicht, sonst laufen die folgenden Fälle mit.

do {
  knoepfe[i].value = " ";
  ...
  felder[i] = b;
  i++;
}
while (i !== 16);

Eine do…while-Schleife läuft die sechzehn Felder durch: Sie leert die Aufschrift des Knopfes und legt daneben das ausgewürfelte Symbol in der Liste ab. Der Unterschied zur gewöhnlichen while-Schleife ist, dass der Rumpf hier mindestens einmal ausgeführt wird, bevor geprüft wird — bei sechzehn festen Durchläufen macht das keinen Unterschied.

if (knoepfe[zahl].value === " ") {
  const aktuell = felder[zahl];
  ...
  knoepfe[zahl].value = aktuell;
  anzeige.value = punkte;
}

Beim Klick wird zuerst geprüft, ob das Feld noch zugedeckt ist — daran erkennt man es, dass auf dem Knopf nur ein Leerzeichen steht. Nur dann gibt es Punkte. Anschließend bekommt der Knopf das Symbol als Aufschrift und ist damit automatisch für weitere Klicks gesperrt: Beim nächsten Mal steht dort kein Leerzeichen mehr, und die Bedingung ist nicht mehr erfüllt. Ein eigener Merker, welche Felder schon offen sind, wird so gar nicht gebraucht.

for (let i = 0; i < knoepfe.length; i++) {
  knoepfe[i].addEventListener("click", function () {
    klick(i);
  });
}

Zum Schluss bekommt jeder Knopf seinen Zuhörer. Die kleine Funktion darin merkt sich die Nummer i aus dem Schleifendurchlauf und reicht sie beim Klick weiter — das funktioniert nur, weil i mit let deklariert ist und damit für jeden Durchlauf neu existiert. Mit dem alten var hätten alle sechzehn Knöpfe dieselbe Nummer gemeldet, nämlich die 16.

Zum Anpassen: Die Punktwerte stehen im switch von klick() und lassen sich beliebig ändern — vergesst dann nicht die Tabelle im HTML. Wollt ihr mehr oder weniger Felder, ändert ihr die Zahl der Knöpfe im Markup, die 16 in der Schleifenbedingung und die Spaltenzahl in grid-template-columns. Für andere Symbole tauscht ihr einfach die Zeichen in beiden switch-Blöcken aus.