HTML5 Canvas, 2nd Edition

Creating an Animation Array

Next we are going to create an array to hold the tiles for the animation. There are two tanks on the tile sheet: one is green and one is blue. Tiles 1‒8 are a series that—when played in succession—will make it appear as though the green tank’s treads are moving.

Note

Remember, the tile sheet starts at tile 0, but we want to start with the first tank image at tile number 1.

We will store the tile IDs that we want to play for the tank in an array:

var animationFrames = [1,2,3,4,5,6,7,8];

We will use a counter to keep track of the current index of this array:

var frameIndex = 0;