Javascript掷骰子动画

Javascript roll dice animation

本文关键字：动画 掷骰子 Javascript      更新时间：2023-09-26

你好，我用一个小动画制作了掷骰子功能，但最后我有一个问题，因为动画做最后：

  <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>

所以我有die（1-6）.png女巫用来显示女巫编号的生成，我有anim（1-8）.png我用于动画的女巫。

所以在间隔内，我生成 1-8 之间的随机数，然后将 diece1 和 diece2 src 属性更改为动画女巫，一切都很顺利，但在动画结束时，"num"达到 60 我想将 diece1 和 diece2 src 设置为 D1 或 D2 中的一个 女巫被随机生成为 1-6，然后调用结果图像

但是最后我得到了最后一个动漫图像

，而不是结果图像 为了更清楚，我得到了动漫（1-8）.png而不是 die（1-6）.png 之前有人提到过我 动漫 PNG 用于动画和死亡 PNG 用于结果，我得到了最后生成的动漫 png 间隔停止，我试图在间隔之外更改 src，但结果是一样的

尽管您已经清除了间隔，但它仍将完成最后一次运行，这将导致您的骰子再次具有动画图像。

您唯一需要做的就是在 if 语句中添加一个else，如下所示：

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";
}

希望这有帮助

更改 

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";

自

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";
}

目前，最后两行覆盖最终输出级。

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);
}

怎么样？

相关文章：