Würfel Simulator

Würfeln

---

2 Würfel

Würfeln

---

1 Würfel

Anleitung zum nachbauen des Würfel Simulators

Wollt Ihr euren eigenen Würfel-Simulator programmieren, dann könnt Ihr folgende Codeausschnitte als Vorlage verwenden.

Für die Programmierung werden nur die 3 Standard Web-Programmiersprachen HTML5, CSS3 und JavaScript benötigt.

Der HTML Code für den Würfelsimulator lautet:

                    
<div id="einWuerfel" class="row">
    <div class="col-sm-12" style="padding-top:40px">   
        <p><button class="btn btn-primary" onclick="wuerfeln()">Würfeln</button></p> 
            <img id="bild" src="img/wuerfel.jpg" alt="Würfel" style="width:150px;margin-top:30px;margin-left:30px;">
            <hr>
            <button class="btn btn-primary" onclick="einWuerfel()">2 Würfel</button>
    </div> 
</div> 
                    
                

Der CSS Code lautet:

                    
<style>
    .rotated-image {
         -webkit-transform: rotate(30deg);
         transform: rotate(30deg);
    }
    .rotated-image1 {
        -webkit-transform: rotate(100deg);
        transform: rotate(100deg);
    }
    .rotated-image2 {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
</style>
                    
                

Der JavaScript Code lautet:

                    

<script type="text/javascript">
    function warten(){
        var img = document.getElementById("bild");
        img.src= "img/wuerfel.jpg";
            setTimeout(function(){
                img.setAttribute("class", "rotated-image");
            }, 500);
           warten2();
    }
    function warten2(){
        var img = document.getElementById("bild");
            setTimeout(function(){
                img.setAttribute("class", "rotated-image1");
            }, 1000);
            warten3();
    }
    function warten3(){
        var img = document.getElementById("bild");
        img.setAttribute("class", "rotated-image2");
    }
    function wuerfeln(){
       zahl = Math.floor(Math.random() * 6 +1); 
       
       
        switch (zahl) {
            case 1:
                warten()
                setTimeout(function(){
                    document.getElementById("bild").setAttribute("class", "rotated-image2");
                    document.getElementById("bild").src = "img/eins.jpg";
                }, 2000);       
            break;
            case 2:
                warten();
                setTimeout(function(){
                    document.getElementById("bild").setAttribute("class", "rotated-image2");
                document.getElementById("bild").src = "img/zwei.jpg";
            }, 2000);
            break;
            case 3:
                warten();
                setTimeout(function(){
                    document.getElementById("bild").setAttribute("class", "rotated-image2");
                document.getElementById("bild").src = "img/drei.jpg";
            }, 2000);
            break;
            case 4:
                warten();
                setTimeout(function(){
                    document.getElementById("bild").setAttribute("class", "rotated-image2");
                document.getElementById("bild").src = "img/vier.jpg";
            }, 2000);
            break;
            case 5:
                warten();
                setTimeout(function(){
                    document.getElementById("bild").setAttribute("class", "rotated-image2");
                document.getElementById("bild").src = "img/fuenf.jpg";
            }, 2000);
            break;
            case 6:
                warten();
                setTimeout(function(){
                    document.getElementById("bild").setAttribute("class", "rotated-image2");
                document.getElementById("bild").src = "img/sechs.jpg";
            }, 2000);
            break;
        }
    }
</script>