我将如何使这些动画在不同的时间动画化

我正在制作一款打地鼠游戏，这就是我迄今为止所做的，我知道这很草率，可能不是最简单/最聪明的方法。我需要知道的是如何让我的动画在不同的时间设置动画。这个当前的代码可以动画化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>

生成0和开始时间变化之间的9个随机数。决定动画之间所需的最大距离，并将随机数缩放到该时间帧。然后，从现在起将9个计时器设置为这些时间，这样每个计时器都会启动一个动画。

如果你想让动画在500毫秒以上开始，你可以这样做：

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

现在，您有9个分布在500毫秒内的随机时间，您可以使用这些值和setTimeout在随机时间启动每个动画。

以这种方式复制/粘贴函数确实很草率！

你需要设置一个标志：

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

现在，当鼹鼠超时或被锤子击中时，将该标志设置为假！

相关内容

最新更新

热门标签：