javascript - requestAnimationFrame 未按预期 Javascript 工作

Question

我正在制作一款游戏，其中玩家 Angular 色左右移动。由于简单地使用 onKeyDown eventListener 会让我的 Angular 色以断断续续的方式移动，并且有轻微的延迟，因此我尝试使用 requestAnimationFrame 尽可能频繁地调用移动函数，如另一个答案所建议的( How can I move my JS objects smoothly using keyboard input? )

然而，这并没有改变什么。这是我的 JavaScript 代码

var NodoCampo = document.getElementById("campo");
var NodoGiocatore = null;

var Left = false;
var Right = false;

var FRAMERATE = 20;

//cache giocatore
var LARG_GIOCATORE = 30;
var ALT_GIOCATORE = 30;
var X_GIOCATORE = 300;
var Y_GIOCATORE = 1100;
var VEL_GIOCATORE = 10;

function mostra_giocatore() {
    if (NodoGiocatore === null) {
        NodoGiocatore = document.createElement('div');
        NodoGiocatore.setAttribute ('id', 'player');
        NodoCampo.appendChild (NodoGiocatore);
    }
    NodoGiocatore.style.marginLeft = (X_GIOCATORE - LARG_GIOCATORE) + 'px';
    NodoGiocatore.style.marginTop = (Y_GIOCATORE - ALT_GIOCATORE) + 'px';
}

function muovi() {
    if (Left) {
        X_GIOCATORE = X_GIOCATORE - VEL_GIOCATORE;
        //aggiorno immagine
        mostra_giocatore();
    }
    else if (Right) {
        X_GIOCATORE = X_GIOCATORE + VEL_GIOCATORE;
        //aggiorno immagine
        mostra_giocatore();
    }
}

function stop() {
    Left = false;
    Right = false;
}

function interfaccia(e) {
    //freccia sinstra
    if (e.keyCode === 37) {
        X_GIOCATORE = X_GIOCATORE - VEL_GIOCATORE;
        //aggiorno immagine
        mostra_giocatore();
    }
    //freccia destra
    else if (e.keyCode === 39) {
        X_GIOCATORE = X_GIOCATORE + VEL_GIOCATORE;
        //aggiorno immagine
        mostra_giocatore();
    }

}

function inizia() {
    mostra_giocatore();
    requestAnimationFrame(muovi);
}

window.document.onkeypress = interfaccia;
window.document.onkeyup = stop;

Answer 1

您的不稳定移动可能是由于您使用 VEL_GIOCATORE 在每一帧上移动玩家的量造成的。尝试减少此量以观察更平滑的运动。

您遇到的延迟可能是由于您的操作系统或浏览器对按键重复方式的单独设置造成的。您可以通过实现自己的按键跟踪来解决这个问题——看起来您已经开始尝试这个了。通过更新 onkeydown 和 onkeyup 事件监听器中的 bool 值来跟踪左和右键的状态。

var keys = {
  left: false,
  right: false
};

window.document.onkeydown = function (e) {
  if (e.keyCode === 37) {
    keys.left = true;
  } else if (e.keyCode === 39) {
    keys.right = true;
}

window.document.onkeyup = function (e) {
  if (e.keyCode === 37) {
    keys.left = false;
  } else if (e.keyCode === 39) {
    keys.right = false;
}

然后，在您的 muovi 函数中，检查这些变量的状态以确定是否应该更新玩家的位置。