Kleiner JavaScript Kurs

Grafik (Würfel 2 und Würfel 2a)

Auf unserer HTML Seite befindet sich unter der Schaltfläche jetzt eine Grafik (das Bild w0.gif) mit der id "Bildwuerfel":


<input type="submit" value="Würfeln" onclick="Wuerfel_2();">
<br> <br>
<img src="w0.gif" id="Bildwuerfel" alt="" border="0" width="33" height="31">

Um einen grafischen Würfel zu bauen, ermitteln wir zunächst eine Zufallszahl zwischen 1 und 6 (wie im Beispiel Würfel_1).
Dann tauschen wir das Bild gegen das Bild mit dem Würfelergebnis aus.
Im Array "Bild[ ]" haben wir die Bilder "w0.gif","w1.gif",....,"w6.gif" für die 6 verschiedenen Würfel-Ergebnisse gespeichert
var Bild=["w0.gif", "w1.gif", "w2.gif", "w3.gif", "w4.gif", "w5.gif", "w6.gif"];
Die einzelnen Strings der Feldvariablen kann man mit Bild[0] bis Bild[6] verwenden.
Um das Bild mit JavaScript anzusprechen definieren wir die Variable "Ausgabebild" und tauschen das Bild dann mit "Ausgabebild.src=" aus


  var Ausgabebild=document.getElementById('Bildwuerfel');
  Ausgabebild.src=Bild[Zufallszahl];

So könnte es aussehen: JS_Kurs_B09.html

Hier die HTML-Seite mit dem kompletten Programm
(zur leichteren Fehlereingrenzung wird das Würfelergebnis zusätzlich ganz klein unter dem Bild als Zahl ausgegeben. 


<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title>JavaScript Kurs; Arrays (Würfel_2)</title>
        <script type="text/javascript">
            function Wuerfel_2(){
             var Zufallszahl;
             var Ausgabe=document.getElementById('meinAusgabefeld');
             var Ausgabebild=document.getElementById('Bildwuerfel');
             Zufallszahl=Math.random();
             Zufallszahl=Math.ceil(Zufallszahl*6);
             Ausgabe.innerHTML = Zufallszahl;
             var Bild=["w0.gif", "w1.gif","w2.gif","w3.gif","w4.gif","w5.gif","w6.gif"];
             Ausgabebild.src=Bild[Zufallszahl];
            }
        </script>
</head>
<body>
        <h1>JavaScript Kurs; Arrays (Würfel_2)</h1>
        <h2></h2>
        <!-- Schaltfläche auf HTML Seite; onclick Ereignis startet JavaScript  -->
        <input type="button" value="Würfeln" onclick="Wuerfel_2();">
        <br> <br>
        <img src="w0.gif" id="Bildwuerfel" alt="" border="0" width="33" height="31">
        <font color="#0000FF"><h6 id="meinAusgabefeld"></h6></font>
</body>
</html>

Mit diesen Grundlagen lässt sich das Würfelspiel leicht erweitern (z.B. mit 5 Würfeln für ein Kniffel-Spiel, o.ä.)

So könnte es aussehen: JS_Kurs_B09a.html