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 に答える