的Javascript擲骰子動畫

你好，我做擲骰子功能的小動畫，但在最後，我有動畫的Cuz一個doent問題去文末：的Javascript擲骰子動畫

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

所以我有模（1-6）。 png女巫用來顯示女巫號碼生成，我有anim（1-8）.png女巫我用於動畫。

所以裏面的間隔我產生1-8之間的隨機數，然後改變diece1和diece2 src屬性爲動畫女巫生成的一切順利，因爲它應該但在動畫結束時「num」達到60我想要將diece1和diece2 src設置爲d1或d2中的一個女巫隨機生成爲1-6，然後調用結果圖像

但是最後我得到了最後的動畫圖像，而不是結果圖像更清晰得到動漫（1-8）.png而不是死（1-6）.png，我之前提到動漫PNG是動畫和死亡PNG是結果，我得到最後生成動畫PNG的間隔停止我試圖改變SRC在區間之外但結果相同

來源

2016-07-06 yahoo5000

你可以添加小提琴嗎？ – Dwza

將這樣做只是上傳一個圖像到存儲 – yahoo5000

使用'' :)並添加數字像''100x100'到'110x110' – Dwza

儘管您已經清除了間隔，但它仍然會完成最後一次運行，這將導致您的骰子再次擁有動畫圖像。

你必須做的唯一的事情，就是增加一個else您if語句來，像這樣：

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

希望這有助於

來源

2016-07-06 10:41:47

是啊這工作tnx – yahoo5000

變化

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

當前最後兩行覆蓋最終輸出階段。

來源

2016-07-06 10:42:26

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

那怎麼樣？

來源

2016-07-06 10:51:34

的Javascript擲骰子動畫

回答

相關問題