Question

I’ve rendered a tile map and a tank on a screen in canvas:

http://www.exeneva.com/html5/movingTankExample/

However, you’ll notice that the tank’s animation movement (moving tracks) are regularly occurring. How would you change it so that the movement of the tank tracks occurs only when the tank is moved? Note that there is no physics at the moment.

Answer 1

your startUp function is calling drawScreen every 100 ms where the tank movement gets animated. You need to extract the animation logic from drawScreen into its own function, e.g. animateMovement and call it from your onkeydown handler.
Something like:

function animateMovement(){
    var int = setInterval(function(){
        // Tank tiles
          var tankSourceX = Math.floor(animationFrames[frameIndex] % tilesPerRow) * tileWidth;
          var tankSourceY = Math.floor(animationFrames[frameIndex] / tilesPerRow) * tileHeight;    
          // Draw the tank
          context.drawImage(tileSheet, tankSourceX, tankSourceY, tileWidth, tileHeight, tankX, tankY, tileWidth, tileHeight);
          // Animation frames
          frameIndex += 1;
          if (frameIndex == animationFrames.length) {
            frameIndex = 0;
          }
    },100);
    setTimeout(function(){clearInterval(int);}, 1000);
}

Put this just before your drawScreen function and call it from your document.onkeydown handler just after you call drawScreen. Obviously, you will also need to remove the animation code from your drawScreen function:

function drawScreen() {
  // Tile map
  for (var rowCtr = 0; rowCtr < mapRows; rowCtr += 1) {
    for (var colCtr = 0; colCtr < mapCols; colCtr += 1) {
      var tileId = tileMap[rowCtr][colCtr] + mapIndexOffset;
      var sourceX = Math.floor(tileId % tilesPerRow) * tileWidth;
      var sourceY = Math.floor(tileId / tilesPerRow) * tileHeight;

      context.drawImage(tileSheet, sourceX, sourceY, tileWidth, 
        tileHeight, colCtr * tileWidth, rowCtr * tileHeight, tileWidth, tileHeight);
    }
  }
  /*tank animation was here*/
} 
​