javascript - 我如何防止我的坦克失控？

Question

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

使用箭头键移动坦克。目前没有物理或旋转。

一个问题是，如果您按箭头键的速度太快，坦克将不再以图 block 为中心，动画就会一团糟。我想限制坦克，以便按键不会影响当前处于运动/动画帧中的坦克。我该怎么做？

Answer 1

这是一种解决方案。您没有按每个箭头按设定的次数运行动画，因此我更改了 setTimeout 来执行此操作。请注意，您可能想要实现一些东西，当玩家按住箭头键时，它只会在 tankState 被“停止”时调用该函数，这样您就不会最终调用很多函数最终坦克朝某个方向开火。

function moveTank(dir) {
var steps=0, int = setInterval(function() {
steps++;
tankState = "moving";
if (dir == "up") {
tankMoveY = -4;
} else if (dir == "down") {
tankMoveY = 4;
} else if (dir == "left") {
tankMoveX = -4;
} else if (dir == "right") {
tankMoveX = 4;
}
tankX += tankMoveX;
tankY += tankMoveY;
animateMovement();
drawScreen();
if(steps==5){//set this to the number of steps you want the animation to run.
clearInterval(int);
tankMoveX = 0;
tankMoveY = 0;
tankState = "stopped";
}
},120);
}