Estoy escribiendo un pequeño juego con vueJS como interfaz. Logré crear todos los objetos necesarios y ahora quiero que se muevan si se presiona una tecla.
Mi problema es que solo puedo moverlos una vez cada vez que se presiona la tecla. Quiero moverlo constantemente mientras se presiona la tecla.
Mi código para mudarme es:
let myCircle = document.querySelector('.ball'); var key_left = false; window.addEventListener('load', () =>{ myCircle.style.position = 'absolute'; myCircle.style.left = 0 + 'px'; myCircle.style.top = 1200 + 'px'; }); window.addEventListener('keyup', (event) => { if (event.key == 'ArrowLeft') key_left = true; if (key_left == true) { myCircle.style.left = parseInt(myCircle.style.left) - 5 + 'px'; }Cuando traté de agregar un ciclo while, dejó de moverse.
Código:
let myCircle = document.querySelector('.ball'); var key_left = false; window.addEventListener('load', () =>{ myCircle.style.position = 'absolute'; myCircle.style.left = 0 + 'px'; myCircle.style.top = 1200 + 'px'; }); window.addEventListener('keyup', (event) => { if (event.key == 'ArrowLeft') key_left = true; while (key_left == true) { myCircle.style.left = parseInt(myCircle.style.left) - 5 + 'px'; }¿Alguien tiene una pista para mí?
¡Gracias!
Intente usar el evento keydown en su lugar, se dispara cada tic.
O consulte los ejemplos en w3school. https://www.w3schools.com/jsref/event_onkeydown.asp
window.addEventListener('keydown', (event) => { myCircle.style.left = parseInt(myCircle.style.left) - 5 + 'px' }