Em jogos de video game a ação exibida ao se pressionar uma tecla é suave, contínua e imediata.
No entanto ao implementar uma rotina que anime um personagem de acordo com a tecla pressionada usando o evento onkeydownonkeydown
ela não é contínua, a animação do personagem sofre uma intermitência e não trabalha bem as diagonais. Por exemplo:
/**movimente com as setas direcionais do teclado**/
let player = document.querySelector('#player');
let x = 0;
let y = 0;
let velocidade = 3;
window.onkeydown = () => {
let key = event.keyCode;
let velocity = 10;
let pixel = "px";
//Detecta qual tecla do direcional do teclado foi pressionada e calcula um deslocamento absoluto
if (key == 37) x -= velocidade;
if (key == 38) y -= velocidade;
if (key == 39) x += velocidade;
if (key == 40) y += velocidade;
//Reposiciona o personagem
player.style.left = x + "px";
player.style.top = y + "px";
}
body {
background: #a7a7a7;
}
#player {
width: 50px;
height: 50px;
background: #505050;
position: relative;
left: 0;
top: 0;
}
<div id="player"></div>
Quero saber como fazer a animação via eventos de teclado ser fluida tal qual os jogos de video game.