CODEWITHSUNDEEP
javascript
yahoo5000
yahoo5000

Reputation: 458

Javascript roll dice animation

Hello i made roll dice function with a small animation but at the end i have a problem cuz animation doent go to the end :

  <body>
      <img id="die1" src="die1.png" width="48" height="48">
      <img id="die2" src="die1.png" width="48" height="48">
      <button onclick="rolldice()">roll dice</button>
      <p id="result"></p>
  </body>
    <script>
        function rolldice(){
            var diece1 = document.getElementById("die1");
            var diece2 = document.getElementById("die2");
            var result = document.getElementById("result");
            var d1 = Math.floor(Math.random() * 6) +1;
            var d2 = Math.floor(Math.random() * 6) +1;
            var total = d1 + d2;
            var num = 0;
            var interval = setInterval(function(){
                num +=1;
                var num1 = Math.floor(Math.random() * 8) +1;
                var num2 = Math.floor(Math.random() * 8) +1;
                if(num == 60){
                    diece1.src = "die" + d1 + ".png";
                    diece2.src = "die" + d2 + ".png";
                    clearInterval(interval);
                }
                    diece1.src = "anim" + num1 + ".png";
                    diece2.src = "anim" + num2 + ".png";
            }, 75);

        }
    </script>

So i have die(1-6).png witch uses to show witch number was generated and i have anim(1-8).png witch i use for animation.

so inside interval i generate random number between 1-8 and then change diece1 and diece2 src attribute to the animation witch was generated everything goes well as it should but at the end of the animation ones "num" reach 60 i want to set diece1 and diece2 src to the one of d1 or d2 witch was random generated to 1-6 and then call a result image

But at the end i got the last anime image and not result image to be more clear i got anime(1-8).png instead of die(1-6).png and i was mentioned before anime pngs is for animate and die pngs is for result and i get last generated anime png ones interval stops i tried to change src outside of the interval but the result was same

Upvotes: 2

Views: 4131

Answers (3)

Leroy Thompson
Leroy Thompson

Reputation: 480

if(num < 60){//Rolling dice
    diece1.src = "anim" + num1 + ".png";
    diece2.src = "anim" + num2 + ".png";
} else {  //Results pair up?
    diece1.src = "die" + d1 + ".png";
    diece2.src = "die" + d2 + ".png";
    diece1.src = "anim" + num1 + ".png";
    diece2.src = "anim" + num2 + ".png";
    clearInterval(interval);
}

How about that?

Upvotes: 0

Jack Bliss
Jack Bliss

Reputation: 114

change 

if(num == 60){
    diece1.src = "die" + d1 + ".png";
    diece2.src = "die" + d2 + ".png";
    clearInterval(interval);
}
    diece1.src = "anim" + num1 + ".png";
    diece2.src = "anim" + num2 + ".png";

to

if(num == 60){
    diece1.src = "die" + d1 + ".png";
    diece2.src = "die" + d2 + ".png";
    clearInterval(interval);
} else {
    diece1.src = "anim" + num1 + ".png";
    diece2.src = "anim" + num2 + ".png";
}

currently the last two lines overwrite the final output stage.

Upvotes: 2

Gust van de Wal
Gust van de Wal

Reputation: 5291

Although you've cleared the interval, it will still finish its last run, which will result in your dice having an animation-image again.

The only thing you'll have to do, is add an else to your if-statement, like this:

if(num == 60){
    diece1.src = "die" + d1 + ".png";
    diece2.src = "die" + d2 + ".png";
    clearInterval(interval);
}else{
    diece1.src = "anim" + num1 + ".png";
    diece2.src = "anim" + num2 + ".png";
}

Hope this helps

Upvotes: 3

Related Questions