Creé este mini juego y quiero que mi "jugador" llamado div se mueva hacia la izquierda y hacia la derecha dentro del div "juego", pero estoy atascado. ¿Alguien me puede ayudar? Creo que mi error está dentro del archivo JavaScript... Además, si mi div "jugador" se mueve, ¿se moverá también mi div "pistola"?
let modifier = 50; let player = document.getElementById('player'); window.addEventListener('keydown', (event) => { const { style } = player; switch (event.key) { case 'ArrowRight': style.left = `${parseInt(style.left) - modifier}px`; break; case 'ArrowLeft': style.left = `${parseInt(style.left) + modifier}px`; break; } }); body { margin: 0; padding: 0; background-color: mediumblue; height: 800px; overflow: hidden; } p { font-size: 48pt; color: black; font-family: fantasy; font-weight: bold; position: relative; left: 300px; top: -50px; } .game { width: 800px; height: 500px; position: center; border: 14px solid darkblue; border-radius: 5px; margin-left: 300px; margin-top: -100px; background-color: black; } #player { height: 20px; width: 40px; background-color: firebrick; border-radius: 2px; position: relative; top: 470px; left: 400px; } #gun { position: relative; height: 40px; width: 10px; background-color: firebrick; top: -20px; left: 15px; border-radius: 2px; } #bullet { position: relative; background-color: darkorange; width: 8px; height: 20px; top: 0; left: 1px; animation: shoot 0.7s linear; } @keyframes shoot { 0% { top: 0px; } 100% { top: -470px; } } <p>Galaxy Invaders</p> <div class="game"> <div id="player"> <div id="gun"> <div id="bullet"></div> </div> </div> <div id="enemy"></div> </div> <script src="js.js"></script>Debe usar getComputedStyle : https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
let modifier = 50; let player = document.getElementById('player'); window.addEventListener('keydown', (event) => { switch (event.key) { case 'ArrowRight': player.style.left = (parseInt(getComputedStyle(player).left) + modifier) + "px"; break; case 'ArrowLeft': player.style.left = (parseInt(getComputedStyle(player).left) - modifier) + "px"; break; } }); body { margin: 0; padding: 0; background-color: mediumblue; height: 800px; overflow: hidden; } p { font-size: 48pt; color: black; font-family: fantasy; font-weight: bold; position: relative; left: 300px; top: -50px; } .game { width: 800px; height: 500px; position: center; border: 14px solid darkblue; border-radius: 5px; margin-left: 300px; margin-top: -100px; background-color: black; } #player { height: 20px; width: 40px; background-color: firebrick; border-radius: 2px; position: relative; top: 470px; left: 400px; } #gun { position: relative; height: 40px; width: 10px; background-color: firebrick; top: -20px; left: 15px; border-radius: 2px; } #bullet { position: relative; background-color: darkorange; width: 8px; height: 20px; top: 0; left: 1px; animation: shoot 0.7s linear; } @keyframes shoot { 0% { top: 0px; } 100% { top: -470px; } } <p>Galaxy Invaders</p> <div class="game"> <div id="player"> <div id="gun"> <div id="bullet"></div> </div> </div> <div id="enemy"></div> </div>Los valores de propiedad CSS de elementos HTML adquiridos por .style y por getComputedStyle() serán devueltos por Javascript como cadenas como 10px para div { left: 10px} , que contienen tipos de unidades dependiendo de la propiedad CSS.
Tendrá que restar los tipos de unidades de esas cadenas y luego su parseInt debería funcionar:
parseInt(style.left.replace('px', ''))