Javascript 我将如何使这些动画在不同的时间动画?
我正在做一个打鼹鼠的游戏,这是我到目前为止所做的,我知道这是草率的,可能不是最简单/最聪明的方法。我需要知道的是如何让我的动画在不同的时间动画。这个当前代码可以为9个不同的鼹鼠从洞里出来制作动画,但是我需要它们在不同的时间制作动画(所以它们不会在同一时间出现,或者在几毫秒之内出现)。我当前的代码是Javascript 我将如何使这些动画在不同的时间动画?,javascript,html,Javascript,Html,我正在做一个打鼹鼠的游戏,这是我到目前为止所做的,我知道这是草率的,可能不是最简单/最聪明的方法。我需要知道的是如何让我的动画在不同的时间动画。这个当前代码可以为9个不同的鼹鼠从洞里出来制作动画,但是我需要它们在不同的时间制作动画(所以它们不会在同一时间出现,或者在几毫秒之内出现)。我当前的代码是 <html> <body> <style type="text/css"> body, a, a:hover {cursor: url(http://cur.cur
<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>
body,a,a:hover{cursor:url(http://cur.cursors-4u.net/others/oth-5/oth438.cur),
进展;}
0
打鼹鼠-史蒂文
var-url;
功能动画0(pos){
pos%=url.length;
var animation0=document.getElementById('animation0');
var counter=document.getElementById('counter');
animation0.src=url[pos];
如果(pos==1){//只有在有特定图像时才进行onclick
animation0.onclick=function(){
counter.innerHTML=parseInt(counter.innerHTML)+1;
}
}
否则{
animation0.onclick=function(){
//无所事事
}
}
setTimeout(函数(){
动画0(++pos);
},(Math.random()*500)+1000);
}
函数1(pos){
pos%=url.length;
var animation1=document.getElementById('animation1');
var counter=document.getElementById('counter');
animation1.src=url[pos];
如果(pos==1){//只有在有特定图像时才进行onclick
animation1.onclick=function(){
counter.innerHTML=parseInt(counter.innerHTML)+1;
}
}
否则{
animation1.onclick=function(){
//无所事事
}
}
setTimeout(函数(){
动画1(++pos);
},(Math.random()*500)+1000);
}
函数2(pos){
pos%=url.length;
var animation2=document.getElementById('animation2');
var counter=document.getElementById('counter');
animation2.src=url[pos];
如果(pos==1){//只有在有特定图像时才进行onclick
animation2.onclick=function(){
counter.innerHTML=parseInt(counter.innerHTML)+1;
}
}
否则{
animation2.onclick=function(){
//无所事事
}
}
setTimeout(函数(){
动画2(++pos);
},(Math.random()*500)+1000);
}
功能动画3(pos){
pos%=url.length;
var animation3=document.getElementById('animation3');
var counter=document.getElementById('counter');
animation3.src=url[pos];
如果(pos==1){//只有在有特定图像时才进行onclick
animation3.onclick=function(){
counter.innerHTML=parseInt(counter.innerHTML)+1;
}
}
否则{
animation3.onclick=function(){
//无所事事
}
}
setTimeout(函数(){
动画3(++pos);
},(Math.random()*500)+1000);
}
函数4(pos){
pos%=url.length;
var animation4=document.getElementById('animation4');
var counter=document.getElementById('counter');
animation4.src=url[pos];
如果(pos==1){//只有在有特定图像时才进行onclick
animation4.onclick=function(){
counter.innerHTML=parseInt(counter.innerHTML)+1;
}
}
否则{
animation4.onclick=function(){
//无所事事
}
}
setTimeout(函数(){
动画4(++pos);
},(Math.random()*500)+1000);
}
功能5(pos){
pos%=url.length;
var animation5=document.getElementById('animation5');
var counter=document.getElementById('counter');
animation5.src=url[pos];
如果(pos==1){//只有在有特定图像时才进行onclick
animation5.onclick=function(){
counter.innerHTML=parseInt(counter.innerHTML)+1;
}
}
否则{
animation5.onclick=function(){
//不要再舔了
}
}
setTimeout(函数(){
动画5(++pos);
},(Math.random()*500)+1000);
}
功能6(pos){
pos%=url.length;
var animation6=document.getElementById('animation6');
var counter=document.getElementById('counter');
animation6.src=url[pos];
如果(pos==1){//只有在有特定图像时才进行onclick
animation6.onclick=function(){
counter.innerHTML=parseInt(counter.innerHTML)+1;
}
}
否则{
animation6.onclick=function(){
//无所事事
}
}
setTimeout(函数(){
动画6(++pos);
},(Math.random()*500)+1000);
}
功能动画7(pos){
pos%=url.length;
var animation7=document.getElementById('animation7');
var counter=document.getElementById('counter');
animation7.src=url[pos];
如果(pos==1){//只有在有特定图像时才进行onclick
animation7.onclick=function(){
counter.innerHTML=parseInt(counter.innerHTML)+1;
}
}
否则{
animation7.onclick=function(){
//无所事事
}
}
setTimeout(函数(){
动画7(++pos);
},(Math.random()*500)+1000);
}
功能动画8(pos){
pos%=url.length;
var animation8=document.getElementById('animation8');
var counter=document.getElementById('counter');
animation8.src=url[pos];
如果(pos==1){//只有在有特定图像时才进行onclick
animation8.onclick=function(){
counter.innerHTML=parseInt(counter.innerHTML)+1;
}
}
否则{
animation8.onclick=function(){
//无所事事
}
}
setTimeout(函数(){
动画8(++pos);
},(Math.random()*500)+1000);
}
window.onload=function(){//Frames在下面,用逗号格式=,“URL”)分隔;
URL=新数组(“http://i51.tinypic.com/sxheeo.gif", "http://i56.tinypic.com/2i3tyw.gif");
动画0(0);
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.
}
var randomTimes = [9];
for (var i = 0; i < 9; i++) {
randomTimes[i] = Math.floor(Math.random() * 501);
}