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>