Skip to main content
adicionou 2 caracteres ao conteúdo
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

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.

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.

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.

Título
Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

Como faço para que ao pressionar a tecla uma ação ocorra até eu soltar a tecla, tal qual os jogos de video game?

removeu 3 caracteres do conteúdo
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

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>

Eu queroQuero saber como fazer a animação via eventos de teclado ser fluida tal qual os jogos de video game.

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>

Eu quero saber como fazer a animação via eventos de teclado ser fluida tal qual os jogos de video game.

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.

A pergunta referenciada foi excluída
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52
Carregando
Aviso removido Recompensar resposta existente por hkotsubo
Fim da Recompensa com Augusto Vasques's answer escolhido por hkotsubo
Aviso adicionado Recompensar resposta existente por hkotsubo
Recompensa Oferecida vale 50 pontos de reputação por hkotsubo
adicionou 57 caracteres ao conteúdo
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62
Carregando
troca da tag inativa video-game por game.
Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62
Carregando
Título
Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62
Carregando
Tweeted twitter.com/StackOverflowPT/status/1260721487478218753
adicionou 4 caracteres ao conteúdo
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62
Carregando
Post restaurado por Augusto Vasques
Post removido por Augusto Vasques
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62
Carregando