Javascript roll dice animation -
hello made roll dice function small animation @ end have problem cuz animation doent go 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 have die(1-6).png witch uses show witch number generated , have anim(1-8).png witch use animation.
so inside interval generate random number between 1-8 , change diece1 , diece2 src attribute animation witch generated goes should @ end of animation ones "num" reach 60 want set diece1 , diece2 src 1 of d1 or d2 witch random generated 1-6 , call result image
but @ end got last anime image , not result image more clear got anime(1-8).png instead of die(1-6).png , mentioned before anime pngs animate , die pngs result , last generated anime png ones interval stops tried change src outside of interval result same
although you've cleared interval, still finish last run, result in dice having animation-image again.
the thing you'll have do, add else if-statement, 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 helps
Comments
Post a Comment