按住键的JS有延迟

Question

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

document.onkeydown = onKeyDownListener;

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

我的问题是，当我按下键移动被调用一次，然后有一个暂停，然后暂停移动被重复调用，因为我打算。它去了 像这样：m ...... mmmmmmmmm当＆＃39; m＆＃39;代表移动和＆＃39;。暂停。 有没有办法摆脱暂停？

以下是发生的事情的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)

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