Würfelspiel (Wer kommt an die 50?)

So funktioniert das Script

Das Script verwaltet einen kleinen Spielzustand: zwei Punktestände, die Angabe, wer gerade dran ist, und zwei Merker dafür, ob ein Spieler schon aufgehört hat. Drum herum liegen vier Funktionen — würfeln, prüfen, ob sich jemand überworfen hat, die Schlussabrechnung und die Anzeige des Spielendes. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf der Seite kollidieren.

let aufgeben_sp1 = false;
let aufgeben_sp2 = false;
let spieler = 1;
let wuerfelanzahl1 = 0;
let wuerfelanzahl2 = 0;

Das ist der komplette Spielzustand. spieler merkt sich, wer am Zug ist (1 oder 2), die beiden wuerfelanzahl-Variablen sammeln die Augen, und die aufgeben_sp-Merker sind Wahrheitswerte: Sie können nur true oder false sein. Mehr braucht ein Spiel wie dieses nicht — jeder Klick ändert nur diese fünf Werte und schreibt sie anschließend auf den Bildschirm.

while (zahl > 6 || zahl < 1) {
  zahl = Math.round(Math.random() / (1 / 6));
}

Das ist der Würfel. Math.random() liefert eine Kommazahl zwischen 0 und knapp unter 1; die Division durch 1/6 streckt sie auf den Bereich 0 bis knapp 6, und Math.round rundet auf eine ganze Zahl. Dabei kann auch eine 0 herauskommen — deshalb die while-Schleife: Sie würfelt so lange neu, bis eine Zahl von 1 bis 6 dasteht. Wer es gleichmäßiger mag, ersetzt die drei Zeilen durch zahl = Math.floor(Math.random() * 6) + 1; — dann ist jede Augenzahl exakt gleich wahrscheinlich, und die Schleife entfällt.

dran.textContent = "Spieler 2 ist dran.";
if (aufgeben_sp2) {} else { spieler = 2; }
fErreicht();
zahl = 0;

Nach dem Wurf wird weitergegeben. Der Wechsel geschieht aber nur, wenn der andere Spieler noch im Spiel ist — hat er bereits aufgehört, bleibt spieler stehen, und derselbe Mensch darf gleich noch einmal werfen. Zum Schluss wird zahl wieder auf 0 gesetzt, denn sonst würde die while-Schleife beim nächsten Wurf gar nicht erst starten: Sie läuft ja nur, solange zahl außerhalb von 1 bis 6 liegt.

function fErreicht() {
  if (wuerfelanzahl1 > 50) {
    spielEnde("Spieler 2 hat gewonnen — super gemacht, Spieler 2!");
  }
  ...
}

Nach jedem Wurf prüft fErreicht(), ob sich jemand überworfen hat. Wer über 50 kommt, verliert — deshalb steht im Text der andere Spieler als Gewinner. Die Funktion spielEnde() blendet danach alle Knöpfe aus und schreibt das Ergebnis in die Anzeige, damit niemand nach dem Spielende weiterwürfelt.

if ((50 - wuerfelanzahl1) < (50 - wuerfelanzahl2)) {
  spielEnde("Spieler 1 hat gewonnen …");
}

Haben beide aufgehört, entscheidet der Abstand zur 50. 50 - wuerfelanzahl1 ist der Rest, der Spieler 1 noch fehlt; wessen Rest kleiner ist, liegt näher dran und gewinnt. Ein dritter Vergleich fängt den Gleichstand ab und meldet ein Unentschieden.

knopfAufgeben1.addEventListener("click", function () {
  knopfAufgeben1.style.display = "none";
  aufgeben_sp1 = true;
  spieler = 2;
  bAufgegeben();
});

Die Aussteigen-Knöpfe hängen an addEventListener. Der Knopf blendet sich selbst aus, setzt den Merker, gibt den Zug an den anderen Spieler weiter und ruft die Schlussabrechnung auf — die aber nur dann etwas tut, wenn beide Merker gesetzt sind. Das Script steht unter dem Markup, damit alle Knöpfe schon existieren, wenn es läuft.

Zum Anpassen: Die Zielzahl 50 steckt an vier Stellen im Code (einmal je Spieler in fErreicht(), zweimal in bAufgegeben()) — wer auf 100 spielen will, ändert sie überall. Die Farbe des zuletzt geworfenen Würfels legt "#FF0000" fest, und die Größe der Augenzahl steuert font-size in der Regel .ws50-wuerfel.