如何讓這些動畫在不同的時間呈現動畫效果？

我正在做一個捶打鼴鼠遊戲，這是我迄今爲止，我知道這是sl and，可能不是最簡單/最聰明的方式來做到這一點。我需要知道的是如何讓我的動畫在不同的時間進行動畫製作。這個當前的代碼可以動畫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

兩者都很少，ahahah..Idk，我只是認爲這將是一個很好的，困難的JavaScript開始項目。：P – Steven

這是要在IE瀏覽器下載哈哈 –

很高興我使用Firefox。 :) – Steven

這樣複製/粘貼一個函數確實是草率的！

您需要設置一個標誌：

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

現在設置標誌設置爲false時，摩爾超時或它通過錘子來襲！

來源

2011-07-02 05:25:18 philVigneault

嗯，我不明白我會如何將其整合到當前函數中。（我是一個使用javascript：P的noob）它是有道理的，但我不明白如何實現它..你能告訴我如何將它實現到我的函數或你認爲合適的任何函數嗎？哈哈，謝謝。 – Steven

在0和您的開始時間變化之間生成9個隨機數。決定動畫之間所需的最大距離，並將隨機數縮放到該時間範圍。然後，從現在開始設置9個定時器，以便每個定時器啓動一個動畫。

如果你想要的動畫開始超過500毫秒，你會做這樣的事情：

var randomTimes = [9]; 

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

現在你有超過9周500毫秒攤開隨機時間，你可以使用這些值與setTimeout的到隨機時間開始每個動畫。

來源

2011-07-02 05:47:07 jfriend00

我明白你的意思了，但它不是.gif動畫，我將幀保存爲.gifs，因爲其他格式缺乏對透明背景的支持。實際上我使用了一個url數組，其中有兩個框架用於動畫。雖然如果我只有一個框架（一個.gif動畫），這會很好，但我有兩個框架。 – Steven

好吧，從技術上說，你已經分散了超過499毫秒，但我不會爲此停靠;） –

@Steven。好的，無論動畫如何工作，您都可以使用隨機數字在不同的時間開始每個動畫。您可能最終會想要使用更多的隨機數來控制/管理您的動畫（可變時間上/下，然後多長時間直到它重複）。 – jfriend00

如何讓這些動畫在不同的時間呈現動畫效果？

回答

相關問題