Na verdade o código apresenta dois problemas imediatos:
- A manipulação dos eventos de teclado da forma que é feita não é a mais eficiente para se obter o efeito desejado. Funciona bem para aplicações Web mas não para jogos.
- Se a animação objetiva jogos, deverá ser feita dentro de um loop de animação e fará uso de uma API gráfica.
Movimentos
No caso de uma animação sensível ao teclado a detecção das teclas e deslocamento do alvo da ação necessariamente não devem ocorrer juntos, de preferência devem ser eventos separados e serem processados como sendo atividades distintas.
Usa ambos os eventos keydown
e keyup
em conjunto.
keydown
para verificar e informar ao sistema se uma determinada tecla foi pressionada e nada mais!
keyup
para verificar e informar ao sistema se uma determinada tecla foi solta e nada mais!
Gráficos
Quanto a API gráfica o Javascript fornece nativamente duas interfaces a Canvas API para trabalhar com gráfico rasterizados e a SVG API para trabalhar com gráficos vetoriais.
Para exibição dos gráficos será usada a Canvas API através do elemento HTML <canvas>
que é o elemento HTML utilizado para desenhar gráficos via script.
Para utilizar os métodos gráfico no <canvas>
é preciso primeiro obter o contexto gráfico qual os métodos serão aplicados, se é um contexto exibição 2D/3D ou se o contexto é a memória, para se obter o contexto gráfico usa-se o método HTMLCanvasElement.getContext()
.
Para animar os gráfico é necessário informar o navegador que deseja-se realizar uma animação e solicitar ao navegador que chame uma função específica para atualizar um quadro de animação antes da próxima repintura da interface utilizando para isso o método window.requestAnimationFrame()
.
Exemplo:
/**movimente com as setas direcionais do teclado**/
//Os estados das teclas a serem usados durante um frame de animação
let up = false;
let down = false;
let left = false;
let right = false;
//A posição do personagem na tela
let pos = {
x: 0,
y: 0
};
let lado = 50; //Medida da lateral do personagem(retângulo no caso)
let velocidade = 3; //Velocidade de deslocamento do personagem
let canvas; //Elemento canvas
let ctx; //Contexto gráfico do canvas
//Ao carregar a página...
window.addEventListener("load", () => {
//Obtém o canvas e contexto gráfico
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
//Quando pressionada uma tecla específica sinaliza o seu estado como pressionado
document.addEventListener("keydown", (event) => {
if (event.key == "ArrowUp") up = true;
if (event.key == "ArrowDown") down = true;
if (event.key == "ArrowLeft") left = true;
if (event.key == "ArrowRight") right = true;
});
//Quando solta um tecla específica sinaliza o seu estado como não pressionado
document.addEventListener("keyup", (event) => {
if (event.key == "ArrowUp") up = false;
if (event.key == "ArrowDown") down = false;
if (event.key == "ArrowLeft") left = false;
if (event.key == "ArrowRight") right = false;
});
//Inicia o loop de animação.
requestAnimationFrame(frame);
});
//A cada frame de animação
function frame() {
//Para cada uma das teclas do direcional verifica se estiver pressionada aplica um deslocamento
if (up) pos.y -= velocidade;
if (down) pos.y += velocidade;
if (left) pos.x -= velocidade;
if (right) pos.x += velocidade;
ctx.clearRect(0, 0, canvas.width, canvas.height); //Limpa a tela
ctx.fillStyle = "rgb(200,0,0)"; //Seta a cor do desenho como vermelho
ctx.fillRect(pos.x, pos.y, lado, lado); //Desenha o personagem tela(um retângulo)
requestAnimationFrame(frame); //Faz a solicitação de um novo quadro de animação
}
<!--Para animações mais performáticas use o elemento canvas-->
<canvas id="canvas"></canvas>