10

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 onkeydown 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.

0

1 Resposta 1

13
+50

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>

2
  • 1
    Excelente!!!! =D 13/05/2020 às 20:44
  • 1
    Ótima resposta! obrigado pela atenção. 13/05/2020 às 21:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .