"Würfelspiel" - Brauche Hilfe

[xXAznrulzXx]

Guten Tag,
In unserem Informatik-Kurs der 10. Jahrgangsstufe haben wir heute ein Würfelspiel programmiert.
Eigentlich handelt es sich um 6 Bilder, die jeweils eine Seite eines Würfels repräsentieren soll.
Nach Zufall sollen dann die Bilder gezeigt werden. Das sieht dann so aus:


Diesen Teil habe ich auch schon verstanden. Nun sollen wir es so programmieren, dass an auf einem Knopfdruck auch mehrmals würfeln kann, sodass man nicht 100 mal auf den Button klicken muss.
Ich hab mal spekuliert und spontan die "For-Schleife" angewendet, wenn sie hier überhaupt anzuwenden ist.
Der normale Code ohne Schleife sieht so aus:
Würfel vorher - Pastebin.com
Mit meiner Idee würde es so aussehen:
Würfel nachher - Pastebin.com

Nur jetzt ist mein Problem Folgendes:
Ich weiß nicht, ob er wirklich 10x würfelt, denn optisch sieht es immer noch so aus, als würde er 1x würfeln. Oder stimmt das komplett gar nicht? Wenn nein, könntet ihr mir sicher sagen, wie man das machen würde oder?
Aber falls es doch stimmen würde, würde ich gerne wissen, wie man nach jedem Wurf vielleicht ca 1 Sekunde Pause machen kann, sodass man es auch sieht, dass er mehrmals würfelt

Danke im Voraus!!​

 

[Sempervivum]

Zu deiner eigentlichen Frage: Nein, er würfelt nicht mehrmals, weil Du dies

    var x = Math.round(5*Math.random())+1;
    var y = Math.round(5*Math.random())+1;
    var w = Math.round(5*Math.random())+1;
    var a = Math.round(5*Math.random())+1;
    var b = Math.round(5*Math.random())+1;
    var c = Math.round(5*Math.random())+1;

vor die Schleife geschrieben hast. Das muss in die Schleife. Ich sehe den Sinn nicht ganz, mehrmals würfeln zu lassen. Aber wenn es denn so sein soll: Schau dir mal setInterval an:
SELFHTML: JavaScript / Objektreferenz / window
Damit kannst Du eine Anweisung mehrfach ausführen, wobei dazwischen eine Pause liegt.
Im übrigen: Du hast das extrem umständlich programmiert. Lege doch die Bilder als Array an
SELFHTML: JavaScript / Objektreferenz / Array
dann kannst Du das Würfeln so vereinfachen:

var x = Math.floor(6*Math.random());
window.document.images[0].src=bilder[x].src;

Auch die image-Elemente bilden ein Array, das Du mit einer for-Schleife bearbeiten kannst:

for (i = 0; i < 6; i++)
{
  var x = Math.floor(6*Math.random());
  window.document.images[i].src=bilder[x].src;
}

Dann hast Du den ganzen Würfelvorgang auf zwei Zeilen reduziert.
Ich habe mal die Berechnung des Zufallswertes geändert, weil ich mir bei deinem Algorithmus nicht sicher bin, ob alle Zahlen gleich wahrscheinlich sind.
Viele Grüße - Ulrich

 

[xXAznrulzXx]

Danke für deine Antwort! Sie hat mir sehr weitergeholfen. Ich versuche das gerade mit den Arrays, aber irgendwie scheitere ich. Bin ich einfach zu blöd dafür?
Die Funktion, die würfeln soll, sieht nun so aus:

<script type = "text/javascript">
bild[0] = new Image();
bild[0].src="null.gif";
bild[1] = new Image();
bild[1].src="eins.gif";
bild[2] = new Image();
bild[2].src="zwei.gif";
bild[3] = new Image();
bild[3].src="drei.gif";
bild[4] = new Image();
bild[4].src="vier.gif";
bild[5] = new Image();
bild[5].src="fuenf.gif";
bild[6] = new Image();
bild[6].src="sechs.gif";


function los()
{
for(i = 0; i < 6; i++)
{
var x = Math.round(5*Math.Random())+1; 
window.document.images[i].src=bild[x].src;
}
}


</script>

Wenn ich jetzt allerdings auf den Button drücke (Der ruft die Funktion "los()" auf), passiert einfach nichts.
Könntest du mir einen Tip geben, was ich falsch gemacht habe? Sag aber bitte nicht gleich die Lösung. Ich will ja auch nachdenken :)

LG -xXAznrulzXx
Dankeschön!

 

[Sempervivum]

Ich weiß zwar nicht genau, ob es unbedingt erforderlich ist, aber definiere das Array erstmal, bevor Du ihm die Bilder zuweist:

var Bild = new Array(6);

Und da der Feldindex von 0 bis 5 läuft, ist das "+1" hier überflüssig. Außerdem bin ich immer noch der Meinung, dass der Algorithmus für die Ermittlung der Zufallszahl nicht richtig ist. Benutze lieber Math.floor(Math.random*6)). Und wenn es dann immer noch nicht funktioniert, schau dir mal die Fehlerkonsole an. Im Firefox unter Extras - Webentwickler - Fehlerkonsole.
Viel Erfolg und viele Grüße - Ulrich

 

[Tronjer]

Meinst du so etwas in der Art?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<title>Shuffle Array</title>
<style type="text/css">
#box {
    width: 49px;
    position: relative;
    top: 100px;
    left: 100px;
}
</style>
</head>
<body>
    <p>
        <input type="button" value="KlickMich"/>
    <p>
    <div id="box"></div> 
    
    <script>
    $('input').click(function() {
        rollDice();
    });
    
    function rollDice() {
        Array.prototype.shuffle = function() {
         for (var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
            return this;
        };
    
        var images = ['eins.jpg', 'zwei.jpg', 'drei.jpg', 'vier.jpg', 'fuenf.jpg'];
        
        images.shuffle();
        
        for (var i = 0; i < images.length; i++) {
            $('#box').append('<img src="' + images[i] + '" alt="" />')
        }
    }
    </script>
</body>
</html>

Wir haben hier ein Funktion zum shuffeln, ein Array mit den Bildnamen, und eine Schleife, die analog zur Anzahl der Elemente im Bilder-Array die dazugehörigen <img /> Tags erzeugt. Wenn du das 10x hintereinander ausführen willst, muss rollDice() noch mit einer for-Schleife und setTimeout() kombiniert werden.

 

[xXAznrulzXx]

Guten morgen!
Danke für eure Hilfe erstmal. Ich hab total vergessen, den Array zu definieren :/
Hab das eben mal gemacht und siehe da: Es funktioniert!

var Bilder = new Array(6);
Bilder[0] = new Image();
Bilder[0].src="null.gif";
Bilder[1] = new Image();
Bilder[1].src="eins.gif";
Bilder[2] = new Image();
Bilder[2].src="zwei.gif";
Bilder[3] = new Image();
Bilder[3].src="drei.gif";
Bilder[4] = new Image();
Bilder[4].src="vier.gif";
Bilder[5] = new Image();
Bilder[5].src="fuenf.gif";
Bilder[6] = new Image();
Bilder[6].src="sechs.gif";



function wurf()
{
for(bildID = 0; bildID < 6; bildID++)
{
var x = Math.round(5*Math.random())+1;
window.document.images[bildID].src=Bilder[x].src;
}
}

Jetzt versuch ich noch mit Hilfe der setInterval() Funktion, mehrmals zu würfeln
Übrigens: Mit Math.floor hat es leider nicht funktioniert. Deshalb habe ich weiterhin die Math.round Funktion verwendet :)
LG -xXAznrulzXx

 

[Tronjer]

... und ich wollte es dir mit meinem Code vereinfachen. ^^

Du brauchst das Array nicht explizit zu definieren, es reichen die eckigen Klammern, damit es von Jacascript als solches erkannt wird: var foo = ['...', '...', '...']. Außerdem würde ich die Länge des Arrays nicht begrenzen, und ein for (var i = 0; i < foo.length; i++) {} ist flexibel, im Gegensatz zur fixen Zahl (6) als Abbruchbedingung für die Schleife.