javascript - 将动画帧更改为仅当坦克移动时

Question

我在 Canvas 的屏幕上渲染了一张瓦片 map 和一辆坦克:

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

但是，您会注意到坦克的动画运动(移动轨迹)有规律地发生。你会如何改变它，使坦克履带仅在坦克移动时发生移动？请注意，目前没有物理学。

Answer 1

您的 startUp 函数每 100 毫秒调用一次 drawScreen，此时坦克的运动会被动画化。您需要将 drawScreen 中的动画逻辑提取到它自己的函数中，例如animateMovement 并从您的 onkeydown 处理程序调用它。像这样的东西:

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);
}

将它放在您的 drawScreen 函数之前，并在您调用 drawScreen 之后从您的 document.onkeydown 处理程序中调用它。显然，您还需要从 drawScreen 函数中删除动画代码:

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*/
} 
​