我有一個移動罐: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();
但坦克似乎轉動,然後突然恢復到原來的方向。有人可以幫我解決這個問題嗎?
這段代碼看起來並不是問題所在。 –
你的坦克有點難以控制 – 2012-05-20 05:02:05
@Webtecher如何? –