이 애니메이션을 다른 시간에 애니메이션으로 만들려면 어떻게해야합니까?

나는 두더지 게임을 만들고 있는데 이것은 내가 지금까지 가지고있는 것인데, 나는 이것이 좀 거칠다는 것을 알고 있으며 아마도 이것을하는 가장 쉽고/똑똑한 방법은 아닐 것이다. 내가 알아야 할 것은 애니메이션을 별도의 시간에 애니메이트하는 방법입니다. 이 현재 코드는 구멍에서 나오는 9 개의 다른 두더지에 애니메이션을 적용하지만 서로 다른 시간에 애니메이션을 적용해야합니다 (동일한 시간에 또는 둘 중 몇 밀리 초 내에 아무 것도 나타나지 않습니다). 현재 코드는이 애니메이션을 다른 시간에 애니메이션으로 만들려면 어떻게해야합니까?

입니다.

<html> 
<body> 
<style type="text/css"> 
body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur), 
progress;} 
</style> 
<body background = "http://i52.tinypic.com/34e9ekj.jpg"> 
<b><center><font size="5"><div id='counter'>0</div></font></center><b> 
<b><center><i>Whack-A-Mole</i> - by Steven</center></b> 
<div 
    style=" 
     top: 37; 
     left: 350; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<center><img id='animation0' src ='http://i51.tinypic.com/sxheeo.gif'/></center> 
</div> 
<div 
    style=" 
     top: 37; 
     left: 33; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<left><img id='animation1' src ='http://i51.tinypic.com/sxheeo.gif'/></left> 
</div> 

<div 
    style=" 
     top: 37; 
     left: 700; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<right><img id='animation2' src ='http://i51.tinypic.com/sxheeo.gif'/></right> 
</div> 
<div 
    style=" 
     top: 200; 
     left: 352; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation3' src ='http://i51.tinypic.com/sxheeo.gif'/> 
</div> 
<div 
    style=" 
     top: 200; 
     left: 33; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation4' src ='http://i51.tinypic.com/sxheeo.gif'/> 
</div> 
<div 
    style=" 
     top: 200; 
     left: 700; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation5' src ='http://i51.tinypic.com/sxheeo.gif'/> 
</div> 
<div 
    style=" 
     top: 350; 
     left: 700; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation6' src ='http://i51.tinypic.com/sxheeo.gif'/> 
</div> 
<div 
    style=" 
     top: 350; 
     left: 33; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation7' src ='http://i51.tinypic.com/sxheeo.gif'/> 

</div> 
<div 
    style=" 
     top: 350; 
     left: 352; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation8' src ='http://i51.tinypic.com/sxheeo.gif'/> 
</div> 
</body> 
<head> 
<script type="text/javascript"> 
var urls; 

function animate0(pos) { 
    pos %= urls.length; 
    var animation0 = document.getElementById('animation0'); 
    var counter = document.getElementById('counter'); 
    animation0.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation0.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation0.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate0(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate1(pos) { 
    pos %= urls.length; 
    var animation1 = document.getElementById('animation1'); 
    var counter = document.getElementById('counter'); 
    animation1.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation1.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation1.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate1(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate2(pos) { 
    pos %= urls.length; 
    var animation2 = document.getElementById('animation2'); 
    var counter = document.getElementById('counter'); 
    animation2.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation2.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation2.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate2(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate3(pos) { 
    pos %= urls.length; 
    var animation3 = document.getElementById('animation3'); 
    var counter = document.getElementById('counter'); 
    animation3.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation3.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation3.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate3(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate4(pos) { 
    pos %= urls.length; 
    var animation4 = document.getElementById('animation4'); 
    var counter = document.getElementById('counter'); 
    animation4.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation4.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation4.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate4(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate5(pos) { 
    pos %= urls.length; 
    var animation5 = document.getElementById('animation5'); 
    var counter = document.getElementById('counter'); 
    animation5.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation5.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation5.onclick = function() { 
      //do nothing onclick 
     } 
    } 
    setTimeout(function() { 
     animate5(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate6(pos) { 
    pos %= urls.length; 
    var animation6 = document.getElementById('animation6'); 
    var counter = document.getElementById('counter'); 
    animation6.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation6.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation6.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate6(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate7(pos) { 
    pos %= urls.length; 
    var animation7 = document.getElementById('animation7'); 
    var counter = document.getElementById('counter'); 
    animation7.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation7.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation7.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate7(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate8(pos) { 
    pos %= urls.length; 
    var animation8 = document.getElementById('animation8'); 
    var counter = document.getElementById('counter'); 
    animation8.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation8.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation8.onclick = function() { 
      //do nothing 
     } 
    } 
     setTimeout(function() { 
     animate8(++pos); 
    }, (Math.random()*500) + 1000); 
} 
window.onload = function() { //Frames go below, seperated by commas format= , "URL"); 
    urls = new Array("http://i51.tinypic.com/sxheeo.gif", "http://i56.tinypic.com/2i3tyw.gif"); 
    animate0(0); 
    animate1(0); 
    animate2(0); 
    animate3(0); 
    animate4(0); 
    animate5(0); 
    animate6(0); 
    animate7(0); 
    animate8(0); 
} 
</script> 
</head> 
</html>

출처

2011-07-02 Steven

리틀 중 하나, 아하 .. 아이크, 난 그냥 자바 스크립트를위한 좋은, 어려운 시작 프로젝트 것이라고 생각. : P – Steven

이것은 IE haha에서 asplode 할 것입니다 –

다행 파이어 폭스를 사용합니다. :) – Steven

이 방법으로 복사/붙여 넣기가 실제로 엉망입니다! 몰 시간이 밖으로거나 망치로 공격 false로

var isMole = false;//at first there is no mole 
if(!isMole){  
    //there is no mole, you can show one here  
    isMole = true;//there is a mole now! 
}else{ 
    //there is a mole, we wait. 
}

이제 플래그를 설정 :

당신은 설정에 플래그를 필요로한다!

출처

2011-07-02 05:25:18 philVigneault

흠, 내가 어떻게 현재의 기능에 이것을 통합 할 수 있을지 모르겠다. (나는 자바 스크립트가있는 멍청한 녀석이다 : P) 그것은 이해할 만하다. 그러나 나는 그것을 구현하는 방법을 보지 못했다. 내 기능에 맞게 구현하는 법을 보여 주시겠습니까? 아, 고마워. – Steven

0과 시작 시간 변형 사이에 9 개의 난수를 생성하십시오. 애니메이션 사이의 원하는 최대 거리를 결정하고 난수를 해당 시간 프레임으로 조정하십시오. 그런 다음 각 타이머가 애니메이션을 시작하도록 지금부터 9 번 타이머를 설정하십시오.

당신이 500 밀리 초를 시작하는 애니메이션을 원한다면, 당신은 같은 것을 할 거라고 : 당신이 경우 setTimeout으로 그 값을 사용할 수 있습니다 지금

var randomTimes = [9]; 

for (var i = 0; i < 9; i++) { 
    randomTimes[i] = Math.floor(Math.random() * 501); 
}

당신이 500 밀리 초에 흩어져 9 임의의 시간을 가지며을 임의의 시간에 각 애니메이션을 시작하십시오.

출처

2011-07-02 05:47:07 jfriend00

나는 당신의 말을 알고 있지만 .gif 애니메이션이 아니기 때문에 프레임을 .gif 형식으로 저장하는 이유는 다른 형식이 투명 배경을 지원하지 않기 때문입니다. 실제로 애니메이션을위한 두 개의 프레임이있는 url 배열을 사용합니다. 하나의 프레임 (.gif 애니메이션) 만 있으면 이렇게하면 좋겠지 만 두 프레임이 있습니다. – Steven

글쎄, 기술적으로 당신은 499 밀리 초 이상으로 퍼지고 있지만, 나는 그걸 당신을 도킹하지 않을 것이다;) –

@ 스터 벤. 좋아요, 그러나 애니메이션이 작동하면 난수를 사용하여 서로 다른 시간에 각 애니메이션을 시작할 수 있습니다. 애니메이션을 제어/관리하기 위해 더 많은 임의의 숫자를 사용하기를 원할 것입니다 (반복되는 위/아래 가변 시간 및 반복 될 때까지의 시간). – jfriend00

이 애니메이션을 다른 시간에 애니메이션으로 만들려면 어떻게해야합니까?

답변

관련 문제