Soy bastante nuevo en javascript y he estado tratando de descubrir cómo hacer que una imagen se mueva. Se me ocurrió este código y funciona, pero la imagen deja de moverse después de un rato. ¿Cómo puedo solucionar esto?
<!DOCTYPE html> <html> <head> <style> #img { position: relative; } </style> <title>This is filler text</title> </head> <body> <p>This is filler text</p> <img src="example.jpeg" length="100" width="100" id="img" /> <script> document.onkeydown = function(event) { switch (event.keyCode) { case 37: moveLeft(); break; case 38: moveUp(); break; case 39: moveRight(); break; case 40: moveDown(); break; } }; function moveLeft() { document.getElementById("img").style.left += "5px"; } function moveRight(){ document.getElementById("img").style.right += "5px"; } function moveDown(){ document.getElementById("img").style.bottom += "5px"; function moveUp(){ document.getElementById("img").style.top += "5px"; } </script> </body> </html>transform CSS y translate en lugar de left / top const EL_img = document.querySelector("#img"); const pos = {x:0, y:0}; document.addEventListener("keydown", (ev) => { const dir = (ev.key.match(/(?<=^Arrow)\w+/)||[])[0]; if (!dir) return; // Not an arrow key. ev.preventDefault(); // Prevent Browser scroll if overflow ({ Left: () => pos.x -= 5, Right: () => pos.x += 5, Up: () => pos.y -= 5, Down: () => pos.y += 5, }[dir])(); EL_img.style.transform = `translate(${pos.x}px, ${pos.y}px)` }); #img { height: 40px; transition: transform 0.2s; } <img id=img height=40 src="https://lh3.googleusercontent.com/a-/AOh14Gh-CwvGkngFp6REJf46ncZD2p-nesp_4DmKOpSXGA=k-s420" />Aquí hay otra respuesta similar
Varias cosas que tendrás que cambiar:
string , por lo que hacer += "5px" concatenará sus cadenas después de la primera pulsación de tecla.position de un elemento utiliza top / left / right / bottom como desplazamientos de esos bordes respetados. Entonces, para esta demostración, probablemente solo querrá ajustar left y right , con valores left negativos empujándolos hacia la izquierda y valores positivos empujándolos hacia la derecha. Similar para la top .Debido a estos dos, probablemente será más fácil tener algunas variables numéricas separadas para estas compensaciones, operar en esas variables directamente y luego actualizar su estilo en línea.
Aquí hay un ejemplo de eso:
let left_offset = 0; let top_offset = 0; document.onkeydown = function (event) { let img = document.getElementById("img"); switch (event.keyCode) { case 37: // Move left left_offset -= 5; break; case 38: // Move up top_offset -= 5; break; case 39: // Move right left_offset += 5; break; case 40: // Move down top_offset += 5; break; } img.style.left = `${left_offset}px`; img.style.top = `${top_offset}px`; }; #img { position: relative; } <p>This is filler text</p> <img src="https://via.placeholder.com/100" length="100" width="100" id="img" />