javascript - How would I make these animations animate at different times? -
i'm making whack-a-mole game , have far, i'm aware sloppy , isn't easiest/smartest way this. need know how animations animate @ separate times. current code works animate 9 different moles coming out of holes need them animate @ different times(so none of them come @ same time, or within few milliseconds of eachother) current code
<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> - 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) { // make onclick when have 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) { // make onclick when have 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) { // make onclick when have 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) { // make onclick when have 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) { // make onclick when have 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) { // make onclick when have 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) { // make onclick when have 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) { // make onclick when have 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) { // make onclick when have 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 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>
generate 9 random numbers between 0 , start time variation. decide max distance want between animations , scale random numbers time frame. then, set 9 timers times each timer starts animation.
if wanted animations start on 500 milliseconds, you'd this:
var randomtimes = [9]; (var = 0; < 9; i++) { randomtimes[i] = math.floor(math.random() * 501); } now have 9 random times spread out on 500 milliseconds , can use values settimeout start each animation @ random time.
Comments
Post a Comment