Question

我正在制作一个玩家角色左右移动的游戏。由于简单地使用onKeyDown eventListener让我的角色以波涛汹涌的方式移动，并且稍有延迟，我尝试使用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在每个帧上移动玩家的数量。尝试减少这个数量，以观察更平稳的运动。

您遇到的延迟可能是由于您的操作系统或浏览器有关按键按重复方式的个别设置。你可以通过实施自己的密钥跟踪来解决这个问题 - 看起来你已经开始尝试这个了。通过更新left和right事件侦听器中的布尔值来跟踪onkeydown和onkeyup键的状态。

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函数中，检查这些变量的状态，以确定是否应该更新播放器的位置。

requestAnimationFrame无法正常工作Javascript

1 个答案: