Pausas nos jogos HTML5

Antecedentes

No processo de desenvolvimento do meu primeiro jogo html5, encontrei várias dificuldades, pois na maioria existem muitas soluções prontas na rede, mas uma resposta competente para a pergunta: "Como pausar o jogo html5?" - eu não encontrei. Para todos os interessados ​​neste tópico ou que precisam dele - continue ...

Saiba mais sobre soluções.

Todas as soluções que encontrei na Internet de uma maneira ou de outra agem com base no princípio while.
Exemplos abaixo:

Exemplo 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(); 

Nesse caso, pausamos por algum tempo, após o qual o jogo continua ...
Essa solução não funciona na maioria dos casos, apenas porque não sabemos por quanto tempo o usuário fará uma pausa e, durante a execução da função, o usuário não poderá interagir com o menu.

Exemplo 2

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

Constantemente reiniciando e rastreando as ações do usuário, a memória é desperdiçada.

Minha decisão

Assim, destacando os principais problemas das soluções encontradas na Internet, eu, reunindo tudo, consegui o seguinte:

Primeiramente, declararemos o próprio objeto de re-renderização, a variável global da posição do objeto e a variável para a pausa, bem como uma matriz, sobre a qual descobriremos um pouco mais adiante.

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

Agora vamos declarar a própria função de renderização, que precisamos pausar:

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

Em seguida, integramos o código de pausa à função (no meu exemplo, é um, no seu caso, pode haver mais funções)

 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; } } 

Então, a coisa é pequena, adicionamos uma função para lidar com pausar / não pausar

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

Tudo está pronto, temos um mecanismo que não consome memória em vão e oferece a oportunidade de interagir com a página durante uma pausa.

Este artigo foi escrito para obter ajuda. Se alguém já viu essa solução antes - peço desculpas. Obrigado pela atenção!