Noob: help with simple sprite animation

[raenset]

Hello, I am working on a simple animation of a sprite in a little game, a mosquito that is changing state while flying towards right. These states correspond to two different images in my tile sheet. 

So far I have been doing this, but the animation is very irregular:
 

for (var i = 0; i < mosquitos.length; i++){   var mosquito = mosquitos[i];            setInterval (updateAnimation, 500);   mosquito.update(); //rest of code non-relevant to animation here...

and then, later:
 

function updateAnimation ()    {    next();   function next()       {           mosquito.state = mosquito.FLYINGRIGHT1;           setTimeout (previous, 500);           function previous()                  {                       mosquito.state = mosquito.FLYINGRIGHT;                   }       }   }

The two states are of course FLYINGRIGHT and FLYINGRIGHT1...
problem is that mosquito starts animating very quickly and very irregularly. I would like it to change state, i.e. every half of a second. I tried with different time periods but it is always the same effect.

I can produce a jsfiddle of the whole thing, if what I am missing is not so obvious. 

Thank you for any help and insights.

[OadT]

Please make a jsfiddle of the whole thing I see there can be many different problems:

 

1) I think in setInterval the right time is 1000 instead of 500 (twice as much as in setTimeout in updateAnimation)

2) I think the variable mosquito in you updateAnimation function reference to the wrong object (I think it reference to the last mosquito of your array)

 

Anyway, for me it's a odd style. I would suggest to simply get the current time and get the state by the time

if(Date.now() % 1000 < 500) {    //state 1} else {    //state 2}

This is also not the best style, but for your problem it's a easy solution. If you want to create more advanced animations later read some articles

[raenset]

At this point I'll publish it on my website as soon as I have time, rather than doing a jsfiddle since there are too many resources to upload... including sounds, etc. there is just one mosquito for the time being, so I don't think that the problem is the mosquito itself,

I'd rather say that I am making bad use of setTimeout and setInterval... and how they interact. I'll try the method you suggested, but I'd rather not work with Date, it's something that I didn't use in this game... there should be a good "Date-independent" solution. The whole game is "Date-independent"... Thank you for your answer. Back soon with the whole thing online. 

 

[raenset]

Here is the link... the "game" is intended as a working exercise for the time being, and it's some sort of improvement to the "Hedgehog Apocalypse" platform game from chapter 11 of Rex Van Der Spuy's excellent book "Foundation Game Design with HTML5 & Javascript".

There are 5 levels. To end each level, first of all, you have 60 seconds to "defuse" the bomb (a reasonably long amount of time...) just collide with it. Then you have to jump on the three hedgehogs (if they hit you while you are not jumping on them, you are lost... like in the 1985 Mario game). You "embrace" the dog (just collide with it), and "smash" the mosquito (collide with it), and then reach the door on the upper right, and you're done.

So, as stated before, I would like to implement some sort of simple but regular animation of the mosquito, I have tried different methods but am still uncertain on what is best. I'd rather not work with "Date", the entire game is "Date-independent". 

On another note, I see that sometimes, after the collision with the girl, the dog "re-appears" for a small fraction of a second after the heart, and it's a bit strange since its the same function that there is for the collision with other sprites (they don't re-appear...)

Let me know what you think, any comment and suggestion is most welcome, thanks. 

Here's the link:

http://www.retroinvaders.net/laurasworld/src/laurasTriviaLevels.html

 

PS You move with left and right arrow keys, and jump with spacebar...

 

PPS For some reason the link has a final %C2% to the original link i put... please remove it.

[raenset]

Update: I just achieved some sort of animation with the following code:

 

In the loadHandler() function:

 

  setInterval (updateAnimation, 300);

In the playGame() function:

 

findWaitTime = function (){	waitTime = Math.ceil(Math.random() * 6);}updateAnimation = function (){	findWaitTime();	if (waitTime >3)		{			mosquito.state = mosquito.FLYINGRIGHT;		}	else		{			mosquito.state = mosquito.FLYINGRIGHT1;		}}

This is a random animation, of course, I am sure that it can be improved and that there are better and more elegant solutions...