JS按住一个键有延迟

Question

我正在学习 JavaScript，并且正在尝试编写一个小游戏。 我希望我的游戏中的某些东西在我按住一个键时始终如一地移动。 到目前为止，这是我想出的：

document.onkeydown = onKeyDownListener;

function onKeyDownListener(evt) {
    var keyCode = evt.which || evt.keyCode;
    if(keyCode == 37) {
        move();
    }
}

我的问题是，当我按下键 move 被调用一次时，然后会有一个暂停，之后暂停 move 会按照我的意图重复调用。它去 像这样：m......mmmmmmmmm 当'm'代表移动和'。'是停顿。 有没有办法摆脱暂停？

这是发生的事情的 GIF：

Answer 1

我很确定你有这个问题，因为你不依赖游戏循环来运行你的游戏。如果你是，你就不会遇到这个问题，因为每个间隔的游戏循环都会检查按键是否被按下。您的网络应用只会在每次按键发生时做出反应。

我强烈建议您阅读本教程：

W3 HTML 游戏 - 游戏控制器

https://www.w3schools.com/graphics/game_movement.asp

阅读“键盘作为控制器”部分。本例中的“setInterval”方法引发了游戏循环。

我用它作为自己编写游戏代码的参考。

这是来自 W3 教程的代码。它还继续教授碰撞检测。

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = true;
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = false; 
        })
    }, 
    clear : function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

 function updateGameArea() {
    myGameArea.clear();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0; 
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
    myGamePiece.newPos(); 
    myGamePiece.update();
}

Answer 2

你可以试试这个：

document.onkeydown = onKeyDownListener;
var keyDown = false;
function onKeyDownListener(evt) {
   if(evt.keyCode == 37) {
keyDown = true;
   }
}

document.onkeyup = function(evt){
 if(evt.keyCode == 37) {
keyDown = false;
   }
}

setInterval(function(){
if(keyDown){
player.x--;
}
},20)

我知道这并不理想，但我最好的猜测是按键检测存在问题。这样，只要您按住该键，它就会移动，直到您松开该键为止。