我正在制作一款游戏,其中玩家 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;
最佳答案
您的不稳定移动可能是由于您使用 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
函数中,检查这些变量的状态以确定是否应该更新玩家的位置。
关于javascript - requestAnimationFrame 未按预期 Javascript 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47835102/