requestAnimationFrame未按预期的Javascript工作

我在做一个游戏，玩家角色左右移动。 因为简单地使用onKeyDown事件监听器会让我的角色以一种不稳定的方式移动，并且有一点延迟，所以我尝试使用requestAnimationFrame尽可能频繁地调用移动函数，正如另一个答案（）所建议的那样

然而，这并没有改变什么。 这是我的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;

---

您的起伏移动很可能是由于您在每帧上使用

VEL_GIOCATORE

移动播放器的量造成的。尝试减少此数量，以观察更平滑的移动

您遇到的延迟可能是由于您的操作系统或浏览器对按键重复方式的单独设置造成的。您可以通过实现自己的密钥跟踪来解决这个问题——看起来您已经开始尝试这个方法了。通过更新

onkeydown

和

onkeydup

事件侦听器中的布尔值，跟踪

左

和

右

键的状态

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

函数中，检查这些变量的状态，以确定是否应更新播放机的位置。

Onkeydown应设置一个变量，例如horizontalSpeed=10。然后，在requestanimationframe中，根据速度调整位置。我可以发誓我确实这样做了，但似乎我忘了修改“InterfaceCia”。谢谢你的提示！