Esta función
const catchingEggs = () => { myInterval = setInterval(function(){ //if(speed >= 25) speed = 500 - score*15; if(eggBrokenLeft.style.visibility === "visible" || eggBrokenRight.style.visibility === "visible") { clearInterval(myInterval); return } fallingEggs(allEggs[Math.floor(Math.random()*4)], speed); }, speed*3); }
funciona bien, siempre que el segundo parámetro de setInterval() no cambie (por ejemplo, speed*3
, pero si elimino el comentario if(speed >= 25) speed = 500 - score*15;
solo funcionará si pierdo dentro de los primeros 3 intervalos (hasta que la puntuación llegue a 3), pero si sigo jugando y pierdo más tarde (eso es eggBrokenLeft.style.visibility === "visible" || eggBrokenRight.style.visibility === "visible"
, parte que debería trigger clearInterval), no pasa nada, el juego sigue jugando.
Quiero poder aumentar la velocidad, MIENTRAS estoy en el intervalo y aún poder detener ese intervalo. Supongo que podría escribir diferentes intervalos para diferentes velocidades y unirlos de alguna manera, pero sería complicado, además quiero poder aumentar la velocidad gradualmente , dependiendo de la puntuación.
Una forma alternativa de implementar un ciclo de aceleración podría ser usar la recursividad en una función que ejecuta comandos dentro de un bloque setTimeout
. setTimeout
tiene la ventaja en esta situación, ya que solo se ejecuta una vez cada vez que se llama y, por lo tanto, se pueden ajustar los intervalos para cada bucle.
Una verificación condicional dentro de la función de tiempo de espera determina si se repite el ciclo, haciendo una llamada a la función principal, o si finaliza la repetición, sin hacer nada. El intervalo aplicado al tiempo de espera se puede modificar cada vez que se ejecuta la función.
Este fragmento demuestra el principio mediante la repetición de un registro de la consola con una frecuencia creciente hasta que se alcanza un valor de intervalo mínimo especificado.
let speed = 1000; run(); function run() { setTimeout(function(){ console.log(speed); if (speed > 200) {run()}; // repeat only if condition met; },speed-=50); // end timeout block; }; // end function;
Es posible que pueda aplicar su lógica a este marco para lograr el efecto que desea.