Estoy tratando de crear una función que mueva una imagen png hacia arriba, hacia abajo, hacia la izquierda o hacia la derecha presionando WASD o las teclas de flecha. Por el momento, he descubierto una forma de mover el elemento usando WASD; sin embargo, cuando introduzco el operando "o" y uso el código Key.Code para las teclas de flecha, las teclas de flecha no se reconocen aunque aún reconocerá WASD
<body> <div class="scene"> <div class="rocket"> <img src="rocket.png" alt="" /> </div> </div> <script src="script.js"></script> document.addEventListener("keydown", (e) => { var rocket = document.querySelector(".rocket"); let speed = 10; if (event.keyCode == (87 || 38) && rocket.offsetTop > 100) { rocket.style.top = `${rocket.offsetTop - speed}px`; } if (event.key == "s" && rocket.offsetTop < window.innerHeight - 300) { rocket.style.top = `${rocket.offsetTop + speed}px`; } if (event.key == "a" && rocket.offsetLeft > 50) { rocket.style.left = `${rocket.offsetLeft - speed}px`; } if (event.key == "d" && rocket.offsetLeft < window.innerWidth - 125) { rocket.style.left = `${rocket.offsetLeft + speed}px`; } if (event.key == " " && rocket.offsetTop > 100) { rocket.style.top = `${rocket.offsetTop - 200}px`; } console.log(event.keyCode); });Esta expresión:
87 || 38 Evalúa a 87 . Cada vez. Lo que significa esta expresión:
event.keyCode == (87 || 38) Compara el valor con 87 . Cada vez.
No piense en estas condiciones lógicas como lenguaje humano intuitivo. Deben construirse como expresiones lógicas individuales que evalúan individualmente a un valor. Lo que buscas es esto:
(event.keyCode == 87 || event.keyCode == 38)Deberías intentarlo
if ((event.keyCode == 87 || event.keyCode == 38) && rocket.offsetTop > 100)https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR