设置移动动画的间隔

Question

我正在尝试在VanillaJS中制作Snake来学习这些功能。一切似乎都很好，但我的setInterval()回调函数出了问题。我想设置它的动画，使蛇实际上沿着输入的最后一个方向移动，但它做了一件奇怪的事情，它一次又一次地按下最后两个键，然后消失了。这是我的职责，有人能帮忙吗？

document.addEventListener("keydown", function (event) {
var direction;
if (event.key === 'w') {
direction = [-1, 0];
}
else if (event.key === 'a') {
direction = [0, -1];
}
else if (event.key === 's') {
direction = [1, 0];
}
else if (event.key === 'd') {
direction = [0, 1];
}
try {
var start = setInterval(function () {
SNAKE_POS.push([SNAKE_POS[SNAKE_POS.length - 1][0] + direction[0], SNAKE_POS[SNAKE_POS.length - 1][1] + direction[1]]);
SNAKE_POS.shift();
populateRepBoard();
renderBoard();

}, 200);
} catch (e) {
alert("You Lose!");
console.error(e);
}

});

Answer 1

你的蛇应该有一个速度，无论是否按键，它都应该发生。

所以你应该有一个"；事件发生"；不断地：setInterval()让你的蛇移动。这是牛顿第一定律：在没有任何外力的情况下，你的蛇会继续按原来的方式前进。

现在，按键按下：你"收听"；或者在任何按键上观察，就好像它可以以某种方式给蛇施加外力，使它可以向另一个方向移动。这就是牛顿第二定律：对物体施加一些力，就可以对物体产生一些加速度，这意味着速度的变化。实际上，蛇与地面相互作用，产生摩擦力，向另一个方向移动(速度的变化(。但你们通过监听用户的按键来实现它。

所以你的程序应该是这样的：

const intervalID = setInterval(() => {
moveTheSnake();   // or use snake.move()
});
document.addEventListener("keydown", function (event) {
// change the snake speed...
// using if then else or case statements, you can use
// changeSnakeVelocity([dx, dy]) or
// snake.getVelocity([dx, dy])
// where dx, dy per second is the snake's velocity
});