0

I am creating an HTML5 canvas game for the first time. Its a tower defence game, so basically I have an array of enemy objects from class "Enemy" which fly in using a path. Then I also have an array of tower objects from a class "Tower" which kill them when they come in proximity.

For both these operations of moving multiple enemies and firing from towers I am using setInterval as below to change their states and firing animations independent of each other by using the set intervall in the instance of the respective classes. _thatTower.attackInterval = setInterval(function () ...fire code here... },50);

Difficulty I am facing is these setIntervals tend to mix up with the other instances and on few occasions combine together and play all enemy responses as one but not independent..

I want these to work independently. I have two view about this - 1. Either there is a better way to use setintetval for same class diffrent instance that i am not using. 2. OR may be setinterval is not the right thing to use at these places.. please let me know how we move many thing independently like in my case on Canvas ??

Thanks in advance

Ashu khemka
  • 1

1 Answers1

0

You should store a value that stores the last time an animation changed. In your game loop, iterate over your game objects (this value will be attached to each of them) and update their animation state accordingly. This is the traditional approach taken for any other language and is a bit more explicitly than many timers.

Vaughan Hilts
  • 2,839
  • 1
  • 20
  • 39
  • Well, I can store the animation states. thats right. But how do I change the states after regular intervals for different objects(which i am doing by timers now) For Example - A tower is firing at an enemy which is in range after regular intervals. This interval is different and independent of FPS of the game. P.S. every tower will have a different timings but on regular intervals. – Ashu khemka Aug 08 '12 at 05:46