Würfel

So funktioniert das Script

Das Script hat drei Aufgaben: Es lädt beim Start die sechs Würfelbilder vor, es zieht bei jedem Klick eine Zufallszahl zwischen 1 und 6, und es tauscht das angezeigte Bild gegen das passende aus. Zusammen sind das keine zwanzig Zeilen.

const seiten = [];
for (let i = 0; i < 6; i++) {
  seiten[i] = new Image();
  seiten[i].src = "wuerfel" + (i + 1) + ".jpg";
}

Das ist das Vorladen. new Image() erzeugt ein Bildobjekt, das gar nicht auf der Seite steht; sobald man ihm eine src zuweist, holt der Browser die Datei trotzdem und legt sie in seinem Zwischenspeicher ab. Die Schleife zählt i von 0 bis 5 und setzt die Dateinamen aus dem Wort "wuerfel", der Zahl i + 1 und der Endung zusammen — heraus kommen wuerfel1.jpg bis wuerfel6.jpg. Das + 1 ist nötig, weil Listen in JavaScript ab null gezählt werden, die Würfelbilder aber ab eins nummeriert sind.

const augen = Math.ceil(Math.random() * 6);

Das ist der Würfelwurf. Math.random() liefert eine Zufallszahl zwischen 0 und 1, die 1 selbst nie erreicht — etwa 0,4172. Mal 6 genommen ergibt das eine Zahl zwischen 0 und knapp 6, hier 2,503. Math.ceil rundet auf zur nächsten ganzen Zahl, also auf 3. So entstehen die Augenzahlen 1 bis 6, und zwar alle gleich wahrscheinlich. Wollt ihr einen zwanzigseitigen Würfel, ersetzt die 6 durch eine 20 — und legt entsprechend viele Bilder bereit.

bild.src = seiten[augen - 1].src;
bild.alt = "Würfel zeigt " + augen;

Die gewürfelte Augenzahl wird in einen Listenplatz umgerechnet: Augenzahl 1 liegt an Platz 0, Augenzahl 6 an Platz 5 — daher das - 1. Dann bekommt das sichtbare Bild auf der Seite die src des vorgeladenen Bildes, und der Browser zeigt es sofort an. Die zweite Zeile hält den Alternativtext aktuell, damit auch Vorleseprogramme und Suchmaschinen wissen, was gerade zu sehen ist.

Nebenbei: An genau dieser Stelle hatte das ursprüngliche Script einen Fehler. Es griff mit der Augenzahl direkt auf die Liste zu, also face[6] bei einer Sechs — diesen Platz gibt es aber nicht, und das Bild für die Eins wurde nie angezeigt. Die Verschiebung um eins räumt das aus.

document.getElementById("wuerfel-knopf").addEventListener("click", wuerfeln);

Zum Schluss wird der Knopf mit der Funktion verbunden. addEventListener("click", …) ist die heute übliche Art, auf Klicks zu reagieren; das alte onclick-Attribut im HTML entfällt dadurch. Das Script steht deshalb unter dem Markup — so gibt es Knopf und Bild bereits, wenn es ausgeführt wird.

Zum Anpassen: Andere Würfelbilder braucht ihr nur gleich zu benennen (wuerfel1.jpg bis wuerfel6.jpg) und die Angaben width und height im <img>-Tag auf eure Bildgröße zu setzen. Wer zwei Würfel gleichzeitig werfen will, baut ein zweites Bild mit eigener id ein und lässt wuerfeln() beide setzen.