Estoy creando un juego web HTML5 y estoy en el proceso de hacer que el jugador se mueva. No estoy usando ningún motor de juego, solo HTML puro, CSS y JavaScript. Mi problema es que cada vez que cargo mi juego, comienza bien donde puedo moverme a velocidades normales, pero si me muevo hacia adelante y hacia atrás varias veces, el jugador comienza a acelerar y si sigo haciendo esto, la velocidad se vuelve insoportable. velocidades No tengo idea de lo que está pasando. La forma en que funciona mi código es cuando se presiona la tecla d y luego en el objeto presionado teclas D se establece en verdadero en lugar de falso,
let keysPressed = { 'd': false, 'a': false, 'w': false, 's': false, }Luego, ejecuta una función que mueve al jugador.
function move() { if (keysPressed['d'] == true) { // check if its right let player = document.querySelector('.player'); var id = setInterval(frame, 20); function frame() { if (keysPressed['d'] == false) { clearInterval(id); } else { player.style.left = player.offsetLeft + 2 + 'px'; } } } if (keysPressed['a'] == true) { // check if its left let player = document.querySelector('.player'); var id = setInterval(frame, 20); function frame() { if (keysPressed['a'] == false) { clearInterval(id); } else { console.log(player.offsetLeft) player.style.left = player.offsetLeft - 2 + 'px'; } } }}
Sé que no es el código más limpio, pero solo quiero corregir este error antes de abordarlo.
Gracias
Está llamando a setInterval muchas veces, lo que está agravando y causando el síntoma que está describiendo. Creo que solo necesita llamar a setInterval una vez, y luego simplemente cambiar las variables izquierda/derecha dependiendo de la pulsación de tecla... algo como
let intervalID, player = document.querySelector('.player'), dir, offset, isMoving = false; function changeDirection(keysPressed) { if (!isMoving) move(); if (keysPressed['d']) { dir = 'left'; offset = 'offsetLeft'; } else if (keysPressed['a']) { dir = 'right'; offset = 'offsetRight'; } } function move() { // called just once if (isMoving) return; isMoving = true; intervalID = setInterval(function() { player.style[dir] = (+player[offset] + 2) + 'px'; }, 20); }