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

我已经在画布的屏幕上渲染了一个平铺贴图和一个坦克：

---

但是，您会注意到坦克的动画移动（移动轨迹）经常发生。您将如何更改它，使坦克履带的移动仅在坦克移动时发生？请注意，目前没有物理学

您必须实现一个控制油箱atcual状态的基本

状态机

例如

在“停止”状态下，坦克不会设置动画，而是从该状态开始
当您按下一个键时，您会将状态切换为“移动”，因此动画功能将使用此标志来知道何时为精灵设置动画
释放一个键时，将状态切换回“已停止”
看看这个链接（主要是真实行动的第二部分，第一部分更具理论性）：

它是关于Flash的，但是这个概念是通用的。
你的
启动
函数每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
之后从
文档调用它。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*/
} 
​

函数drawScreen（）{
//平铺图
对于（var rowCtr=0；rowCtr
你能画一个没有动画的坦克版本吗？是的。我现在上传一个没有动画的版本。没必要，我只是在概念上想，当它移动或不移动时，你可以把一个换成另一个。知道我的意思吗？有点像我在想的：）+1这是非常快的8帧，效果不会很好。你最好用500毫秒的动画制作这个动作，我怎么做？对不起，我是新手，太好了！非常感谢你！我会尝试做一些类似的实际运动，这样看起来更流线型，而不是跳跃。