requestAnimationFrame이 의도 한대로 작동하지 않습니다.

Question

플레이어 캐릭터가 좌우로 움직이는 게임을 만들고 있습니다. 단순히 onKeyDown에의 EventListener가 끊기 내 캐릭터 이동했고,

그러나 다른 답변 (How can I move my JS objects smoothly using keyboard input?)에 의해 제안 약간의 지연, 나는 가능한 한 자주 이동 함수를 호출 할 requestAnimationFrame을 사용하여 시도 사용하기 때문에, 그것은 아무것도 바뀌지 않았습니다. 은 여기 내 자바 스크립트 코드

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 이벤트 수신기로 업데이트하여 left 및 right 키의 상태를 추적합니다.

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 기능, 당신은 플레이어의 위치를 ​​업데이트해야 할 지 결정하기 위해 이러한 변수의 상태를 확인합니다.