Pausas en juegos HTML5

Antecedentes

Al estar en el proceso de desarrollar mi primer juego html5, me encontré con varias dificultades, para la mayoría de ellas hay muchas soluciones listas en la red, pero una respuesta competente a la pregunta: "¿Cómo pausar el juego html5?" - No lo encontré. Para todos los que estén interesados ​​en este tema o lo necesiten, continúe ...

Obtenga más información sobre soluciones.

Todas las soluciones que encontré en Internet de una forma u otra actúan sobre la base del principio while.
Ejemplos a continuación:

Ejemplo 1

function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function demo() { console.log('Taking a break...'); await sleep(2000); console.log('Two second later'); } demo(); 

En este caso, hacemos una pausa por un tiempo, después de lo cual el juego continúa ...
Esta solución no funcionará en la mayoría de los casos, aunque solo sea porque no sabemos cuánto tiempo hará una pausa el usuario, y durante la ejecución de la función, el usuario no podrá interactuar con el menú.

Ejemplo 2

 function render(){ if(canRender == false){ requestAnimationFrame(render); }else{ //some code requestAnimationFrame(render); } 

Al reiniciar y rastrear constantemente las acciones del usuario, se desperdicia memoria.

Mi decision

Entonces, al resaltar los principales problemas de las soluciones encontradas en Internet, yo, juntando todo, obtuve lo siguiente:

En primer lugar, declararemos el objeto de representación en sí, la variable global de la posición del objeto y la variable para la pausa, así como una matriz, para lo que descubriremos un poco más adelante.

 let sqrt=document.getElementById('sqrt'),rend=0,pause=false,functions=[]; 

Ahora declaremos la función de representación en sí, que debemos pausar:

 function render(){ rend+=1.5; sqrt.style = 'bottom:' + rend +'vh'; if(rend<80){ requestAnimationFrame(render); }else{ rend=0; return; } } 

A continuación, integramos el código de pausa en la función (en mi ejemplo, es uno, en su caso puede haber más funciones)

 function render(){ if(pause!=false){ //        functions.push("render()"); //   return; } rend+=1.5; sqrt.style = 'bottom:' + rend +'vh'; if(rend<80){ requestAnimationFrame(render); }else{ rend=0; return; } } 

Entonces, la cosa es pequeña, agregamos una función para manejar pausa / no pausa

 function SetPause(){ if(pause==true){ UnPause(); }else{ pause=true; } } function UnPause(){ pause=false; //         for(i=0;i<functions.length;i++){ eval(functions[i]); } //     functions =[]; } 

Todo está listo, tenemos un mecanismo que no consume memoria en vano y brinda la oportunidad de interactuar con la página durante una pausa.

Este artículo fue escrito para ayuda. Si alguien ha visto tal solución antes, me disculpo. Gracias por su atencion!