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
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
Share Improve this question edited Jul 6, 2016 at 10:38 SaiKiran 6,50412 gold badges47 silver badges77 bronze badges asked Jul 6, 2016 at 10:34 yahoo5000yahoo5000 4586 silver badges18 bronze badges 3- could you may add a fiddle ? – Dwza Commented Jul 6, 2016 at 10:36
- will do so just upload an images to storage – yahoo5000 Commented Jul 6, 2016 at 10:37
-
use
<img src="http://placehold.it/100x100">:) and add numbers like100x100to110x110– Dwza Commented Jul 6, 2016 at 10:39
3 Answers
Reset to default 3Although 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
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.
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?
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745368165a4624677.html
评论列表（0条）