如何让这些动画在不同的时间呈现动画效果？

我正在做一个捶打鼹鼠游戏，这是我迄今为止，我知道这是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

如何让这些动画在不同的时间呈现动画效果？

回答

相关问题