Estoy haciendo un juego en este momento, y el movimiento actual es realmente entrecortado porque cuando presionas un botón, por ejemplo, 'W'. se alejará de la posición 'superior' para darle el efecto de moverse hacia arriba.
Esperaba usar 'this.x' y 'this.y' pero no sé mucho al respecto.
Este es el código actual que tengo:
window.addEventListener('keydown', (e) =>{ switch(e.key){ case 'a': player.style.left = parseInt(player.style.left) - movePlayer + 'px'; break; case 'd': player.style.left = parseInt(player.style.left) + movePlayer + 'px'; break; case 'w': player.style.top = parseInt(player.style.top) - movePlayer + 'px'; break; case 's': player.style.top = parseInt(player.style.top) + movePlayer + 'px'; break; } });suave
<div id="box" style="border: 2px solid black; width: 200px; height: 200px"> <div id="sprite" style="left: 0; bottom: 0"></div> </div> <button>Increase Speed</button> <style> #sprite { width: 25px; height: 25px; background: red; position: relative; transition: 0.1s linear; } </style> <script> const box = document.querySelector('#box'); const sprite = document.querySelector('#sprite'); const button = document.querySelector('button'); let speed = 5; const toNum = (pxVal) => { return parseInt(pxVal, 10); }; const handleMovement = (e) => { let left = toNum(sprite.style.left); const bottom = toNum(sprite.style.bottom); switch (e.key) { case 'a': if (left <= 0) return (sprite.style.left = 0); sprite.style.left = left - speed + 'px'; break; case 'd': if (left >= 175) return (sprite.style.left = 175); sprite.style.left = left + speed + 'px'; break; case 'w': if (bottom >= 0) return (sprite.style.bottom = 0); sprite.style.bottom = bottom + speed + 'px'; break; case 's': if (bottom <= -175) return (sprite.style.bottom = -175); sprite.style.bottom = bottom - speed + 'px'; break; } }; window.addEventListener('keydown', handleMovement); button.addEventListener('click', () => (speed += 5)); </script>Pruebe esto usando window.getComputedStyle.getPropertyValue
Todavía puede reemplazarlo con player.style.left y player.style.top si cree que es necesario, pero le sugiero que use window.getComputedStyle.getPropertyValue ya que esta es siempre la forma estable de hacerlo.
Ver más aquí
let player = document.getElementById('player') let movePlayer = 10 window.addEventListener('keydown', (e) =>{ let leftpos = parseInt(window.getComputedStyle(player).getPropertyValue("left")) let toppos = parseInt(window.getComputedStyle(player).getPropertyValue("top")) switch(e.key){ case 'a': player.style.left = leftpos - movePlayer + 'px'; break; case 'd': player.style.left =leftpos + movePlayer + 'px'; break; case 'w': player.style.top = toppos - movePlayer + 'px'; break; case 's': player.style.top =toppos + movePlayer + 'px'; break; } }); #player{ width:100px; height:100px; background-color:black; position:absolute; } <div id='player'><div>