0

Este código é uma cópia de um vídeo que ensina js para novatos. Ele é praticamente uma cópia exata do que vejo na tela, mas comigo não roda de jeito nenhum. A única coisa que a 'bola' faz é subir -10px e volta 10px, vai à esquerda -10px e volta 10px, nessa sequência. Se inverter (direita, baixo), não se move nem os 10px. Este é o único movimento. Não sei o que está errado. Como o vídeo tem 3 anos, pode ser que esteja desatualizado em alguma coisa. Uso o VS code, win 10.

var caixa = document.querySelector('#caixa');

function mover(evento) {
  let tecla = pegaKeyCode(evento);
  let posX = 0;
  let posY = 0;
  if (tecla == 37) {
    posX -= 10;
    caixa.style.left = posX + "px";
  } else if (tecla === 38) {
    posY -= 10;
    caixa.style.top = posY + 'px';
  } else if (tecla === 39) {
    posY += 10;
    caixa.style.left = posY + "px";
  } else if (tecla === 40) {
    posX += 10;
    caixa.style.top = posX + 'px';
  } else if (tecla === 13) {
    document.removeEventListener('keydown',
      mover(evento));
    alert('Suspended movement!')
  }
}

function pegaKeyCode(evento) {
  let codTecla = evento.keyCode;
  return codTecla;
}
document.addEventListener('keydown', mover);
#caixa {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: hsl(210, 100%, 50%);
}
<body>
  <div id="caixa" class='caixa'></div>
  <script type="text/javascript" src="./js.js">
  </script>
</body>

0

1 Resposta 1

0

Então, estava quase tudo mas faltou o principal, tu percebe que tua função vai rodar sempre que uma tecla é pressionada? Se sim, talvez chegue a conclusão que SEMPRE que tua função for chamada tu teria as posições colocadas pra 0 novamente.

Além disso uma dica de código, evite a utilização de var, use somente let ou const, caso não vá alterar nada dela use const como usei ali na tecla e na caixa, pois tu só vai ler.

const caixa = document.querySelector('#caixa');
let posX = 0;
let posY = 0;

function mover(evento) {
  const tecla = pegaKeyCode(evento);
 
  if (tecla == 37) {
posX -= 10;
caixa.style.left= posX + "px";
  } else if (tecla === 38) {
posY -= 10;
caixa.style.top = posY + 'px';
  } else if (tecla === 39) {
posX += 10;
caixa.style.left = posX + "px";
  } else if (tecla === 40) {
posY += 10;
caixa.style.top = posY + 'px';
  } else if (tecla === 13) {
document.removeEventListener('keydown',
  mover(evento));
alert('Suspended movement!')
  }
}

function pegaKeyCode(evento) {
  return evento.keyCode;
}

document.addEventListener('keydown', mover);
#caixa {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: hsl(210, 100%, 50%);
}
<body>
  <div id="caixa" class='caixa'></div>
  <script type="text/javascript" src="./js.js">
  </script>
</body>

1
  • Peço desculpa a todos pela minha estupidez. Mechi tanto no código pq não funcionava que deixei algo bem simples de fora. As variáveis que são alteradas ficaram dentro da função, zerando o movimento eternamente. Obrigado. P.S Usei var para tentar rerproduzir o original que estava coiando. Novamente obrigado e desculpas. Commented 18/03/2021 às 23:23

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