javascript - 如何让我的坦克不失控？

Question

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

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

一个问题是，如果你按箭头键太快，坦克不再以瓷砖为中心，动画就会搞砸。我想限制坦克，以便在坦克当前处于运动/动画帧中时按键不会影响坦克。我怎么做？

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);
}