Glücksbuttons

So funktioniert das Script

Das Script hat vier Aufgaben: Es baut die Knöpfe, wertet jeden Klick aus, hält die beiden Zähler aktuell und verwaltet die Highscore-Liste. Weil alle Knöpfe dasselbe tun, reicht dafür eine einzige Funktion — zufall() —, an die jeder Knopf angehängt wird.

const spielvorbei = 20;   // nach wie vielen Versuchen das Spiel vorbei sein soll
let knopfAnzahl = 20;     // wie viele Knöpfe zu sehen sein sollen
const knopfText = " * ";  // Beschriftung der Knöpfe

Der Autor hat die drei Stellschrauben des Spiels ganz nach oben gestellt — das ist guter Stil, weil man dann nicht im Code herumsuchen muss. Wollt ihr ein längeres Spiel, erhöht ihr spielvorbei; wollt ihr ein größeres Knopffeld, erhöht ihr knopfAnzahl; und statt des Sternchens darf in knopfText jedes beliebige Zeichen stehen.

let abc = 0;
window.setInterval(function () { abc++; }, 1);

Hier steckt der eigentliche Trick des Spiels. setInterval ruft eine Funktion immer wieder in einem festen Abstand auf — hier alle 1 Millisekunde, also so schnell der Browser eben mag. Der Zähler abc rast dadurch im Hintergrund nach oben, und niemand kann vorhersagen, bei welchem Wert er gerade steht, wenn ihr klickt. Das Script benutzt ihn als zweite, versteckte Zufallsquelle neben Math.random().

versuche++;
const math = Math.random();
const jon = Math.round(math);
if (jon === 1 && abc % 3 !== 0) { punkte++; }
if (jon === 0 && abc % 3 !== 0) { punkte--; }
if (abc % 3 === 0) { punkte += 2; }

Das ist die komplette Spielregel. Math.random() liefert eine Kommazahl zwischen 0 und 1, Math.round() rundet sie auf 0 oder 1 — eine Münze also. Ist der Millisekundenzähler nicht durch 3 teilbar (abc % 3 !== 0, der Rest der Division ist ungleich null), entscheidet die Münze: 1 gibt einen Punkt, 0 kostet einen. Ist er dagegen glatt durch 3 teilbar, wird die Münze ignoriert und es gibt zwei Punkte geschenkt. Statistisch passiert das bei jedem dritten Klick.

if (versuche === spielvorbei) {
  feldAusgabe.textContent = "SPIEL VORBEI! Du hast insgesamt " + punkte + " Punkt(e) erreicht.";
}

Die Abbruchbedingung steht ganz vorne in zufall(): Sind die 20 Versuche verbraucht, wird gar nicht mehr gerechnet, sondern nur noch die Schlussmeldung angezeigt. Im Original stand hier ein alert()-Kasten; die Meldung erscheint jetzt ruhiger direkt in der Ergebnisfläche.

const knopf = document.createElement("button");
knopf.textContent = knopfText;
knopf.addEventListener("click", zufall);
feld.appendChild(knopf);

So entstehen die zwanzig Knöpfe. createElement baut ein neues Element im Speicher, textContent gibt ihm seine Beschriftung, addEventListener verbindet ihn mit der Spielfunktion, und appendChild hängt ihn schließlich sichtbar ins Knopffeld. Das Original hat die Knöpfe stattdessen als HTML-Text zusammengesetzt — der moderne Weg ist sicherer, weil man das Klickverhalten direkt am fertigen Element festmacht.

highscore[i] = punkte + " Punkte: " + name;
highscore.sort(Numsort);
highscore.reverse();

Bei der Highscore hat sich der Autor eine Falle gestellt, die man gut daran studieren kann: Ein Eintrag ist ein Text wie "7 Punkte: Max", die Sortierfunktion Numsort rechnet aber mit a - b, also mit Zahlen. Aus zwei Texten lässt sich nichts subtrahieren, das Ergebnis ist NaN („keine Zahl“), und die Reihenfolge bleibt deshalb unverändert. Durch das anschließende reverse(), das die Liste umdreht, steht am Ende schlicht der jüngste Eintrag oben. Wer wirklich nach Punkten sortieren will, muss die Punktzahl getrennt vom Namen speichern — etwa in kleinen Objekten wie { punkte: 7, name: "Max" } — und dann a.punkte - b.punkte vergleichen.