yahoo5000 yahoo5000 - 5 months ago 51
Javascript Question

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

Answer

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