Estaba trabajando en este proyecto de OVNI, ahora quiero mover este OVNI usando las teclas de flecha arriba, abajo, izquierda, derecha. no puedo hacerlo
function Up() { if ((pos) >=10) { pos -= 5; document.querySelector document.querySelector(`img`).style.top = pos + "px"; } } function Down() { if ((pos) <=870) { pos += 5; document.querySelector(`img`).style.top = pos + "px"; } } function Left() { if ((posLeft) >= 10) { posLeft -= 5; document.querySelector(`img`).style.left = posLeft + "px"; } } function Right() { if ((posLeft) <= 1880) { posLeft += 5; document.querySelector(`img`).style.left = posLeft + "px"; } }Para agregar controladores de eventos de teclado, puede hacer lo siguiente, después de las declaraciones de su función:
document.addEventListener("keydown", (e) => { switch(e.code){ case "ArrowUp": Up(); break; case "ArrowLeft": Left(); break; case "ArrowRight": Right(); break; case "ArrowDown": Down(); break; } }) muchos tutoriales o artículos en línea lo dirigirán hacia KeyboardEvent.keyCode , pero ha quedado obsoleto y, por lo tanto, no debe usarse.
Para evitar el molesto retraso al mantener presionada una tecla inicialmente, puede agregar la tecla actual a una matriz y eliminarla cuando haya terminado con ella. Así es como podrías hacerlo...
// Array of currently pressed keys const keys = []; // Attempt to add pressed key document.addEventListener("keydown", (e) => { if (!keys.includes(e.key)) { // If key isn't already pressed keys.push(e.key); // Add key to array } }); // Attempt to remove pressed key document.addEventListener("keyup", (e) => { if (keys.includes(e.key)) { // If key is already pressed keys.splice(keys.indexOf(e.key), 1); // Remove key from array } }); // Move UFO based on current pressed keys every 100ms setInterval(() => { if (keys.includes("w")) { // If the 'keys' array contains 'w', then move up // Move up! Up(); } if (keys.includes("s")) { // Move down! Down(); } if (keys.includes("a")) { // Move left! Left(); } if (keys.includes("d")) { // Move right! Right(); } }, 100);