Question

我在画布上的屏幕上渲染了一张瓷砖地图和一个坦克：

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

但是，您会注意到坦克的动画运动（移动轨迹）经常发生。你会如何改变它，以便只有在坦克移动时才会发生坦克履带的移动？请注意，目前没有物理学。

Answer 1

你必须实施一个基本state machine来控制坦克的心脏状态。

例如

在STOPPED状态下，坦克没有动画，它以此状态开始;
当您按某个键时，您将状态切换为MOVING，因此动画功能将使用此标志来知道何时为您的精灵设置动画;
当您释放密钥时，您将状态切换回STOPPED。

看看这个链接（主要是实际行动的第二部分，第一部分更理论化）：http://active.tutsplus.com/tutorials/actionscript/the-power-of-finite-state-machines-concept-and-creation/

这是关于Flash的，但这个概念是普遍的。

Answer 2

你的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功能之前，并在致电document.onkeydown后立即从drawScreen处理程序中调用它。显然，您还需要从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*/
}

仅在坦克移动时才将动画帧更改为

2 个答案: