2
안녕하세요 난 작은 애니메이션 롤 주사위 기능을 만들었지 만 마지막에 내가 애니메이션 doent 사촌 문제는 끝으로 이동이 있습니다 자바 스크립트 롤 주사위 애니메이션
<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-8 사이의 임의의 숫자를 생성 한 다음 diece1과 diece2 src 속성을 애니메이션 마녀로 변경합니다. 모든 애니메이션이 끝날 때마다 잘 자릅니다. "num"reach 60 want diece1 및 diece2 src를 d1 또는 d2 중 하나에 설정하려면 마녀가 임의로 1-6으로 생성 된 다음 결과 이미지를 호출하십시오.
마지막으로 애니메이션 이미지가 더 명확하고 결과 이미지가 더 명확하지 않습니다. 다이 (1-6) .png 대신에 다이 (1-6) .png가 있고 애니메이션 전에 png가 언급되었습니다. 애니메이트를 위해 png가 죽었고 png가 결과를 얻었고 마지막으로 애니메이션을 생성했습니다 png 것들 간격을 변경하려고했습니다. src를 변경하려고했습니다. 간격의 바깥 쪽에서 결과는 같음
바이올린을 추가 할 수 있습니까? – Dwza
그러면 저장 장치에 이미지를 업로드하십시오. – yahoo5000
은 '
'입니다. :) 그리고 '110x110'에 '100x100'과 같은 숫자를 넣으십시오. –
Dwza