0

我有一个移动坦克：http ://www.exeneva.com/html5/movingTankExample/

坦克对它所面对的方向使用有限状态机，默认设置为“向上”：

var tankDir = "up";

处理旋转的函数如下：

function dirTank(dir) {
  switch (dir) {
    case "up":
      if (tankDir == "right") {
        rotationAngle += -90;
      } else if (tankDir == "down") {
        rotationAngle += 180;
      } else if (tankDir == "left") {
        rotationAngle += 90;
      }
      break;
    case "down":
      if (tankDir == "up") {
        rotationAngle += 180; 
      } else if (tankDir == "right") {
        rotationAngle += 90;
      } else if (tankDir == "left") {
        rotationAngle += -90;
      }
      break;
    case "left":
      if (tankDir == "up") {
        rotationAngle += -90;
      } else if (tankDir == "right") {
        rotationAngle += 180;
      } else if (tankDir == "down") {
        rotationAngle += 90;
      }
      break;
    case "right":
      if (tankDir == "up") {
        rotationAngle += 90;
      } else if (tankDir == "down") {
        rotationAngle += -90;
      } else if (tankDir == "left") {
        rotationAngle += 180;
      }
      break;
  }
  tankDir = dir;
  rotationAngle %= 360;
}

drawScreen 中的坦克渲染代码如下所示：

  // Draw the tank
  context.save();
  context.setTransform(1,0,0,1,0,0); // identity matrix
  context.translate(tankX + tileWidth/2, tankY + tileHeight/2);
  rotationAngle = rotationAngle * Math.PI/180;
  context.rotate(rotationAngle);
  context.drawImage(tileSheet, tankSourceX, tankSourceY, tileWidth, tileHeight, -tileWidth/2, -tileHeight/2, tileWidth, tileHeight);
  context.restore();

但坦克似乎在转动，然后突然恢复到原来的方向。有人可以帮我解决这个问题吗？

4

2 回答 2

2

rotationAngle应该保存在另一个变量中，并且您的所有分配都应该更改为增加或减少当前角度，例如

rotationAngle += 90; // turn right
rotationAngle += 180; // reverse direction

在这些更改之后，您需要对角度进行归一化：

rotationAngle %= 360;

更新

Make sure to not overwrite the `rotationAngle` later in the code when you convert from degrees to radians.

rotationAngle = rotationAngle * Math.PI/180;

应该变成：

rotationAngleRad = rotationAngle * Math.PI/180;

然后rotationAngleRad在.rotate()通话中使用。

于 2012-05-20T05:11:40.323 回答
1

原因是每次重绘画布时都需要更改旋转，而不仅仅是第一次。

于 2012-05-20T04:55:24.920 回答