Pauses dans les jeux HTML5

Contexte

Étant en train de développer mon premier jeu html5, j'ai rencontré un certain nombre de difficultés, pour la plupart d'entre elles il y a beaucoup de solutions prêtes à l'emploi sur le réseau, cependant, une réponse compétente à la question: "Comment suspendre un jeu html5?" - Je n'ai pas trouvé. À tous ceux qui sont intéressés par ce sujet ou qui en ont besoin - veuillez continuer ...

En savoir plus sur les solutions.

Toutes les solutions que j'ai trouvées sur Internet d'une manière ou d'une autre agissent sur la base du principe while.
Exemples ci-dessous:

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

Dans ce cas, nous faisons une pause pendant un certain temps, après quoi le jeu continue ...
Cette solution ne fonctionnera pas dans la plupart des cas, ne serait-ce que parce que nous ne savons pas combien de temps l'utilisateur s'arrêtera et pendant l'exécution de la fonction, l'utilisateur ne pourra pas interagir avec le menu.

Exemple 2

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

Redémarrer et suivre constamment les actions des utilisateurs, la mémoire est gaspillée.

Ma décision

Donc, en mettant en évidence les principaux problèmes des solutions trouvées sur Internet, moi, en rassemblant tout, j'ai obtenu ce qui suit:

Tout d'abord, nous déclarerons l'objet de restitution lui-même, la variable globale de la position de l'objet et la variable de pause, ainsi qu'un tableau, pour lequel nous le découvrirons plus tard.

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

Déclarons maintenant la fonction de rendu elle-même, que nous devons interrompre:

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

Ensuite, nous intégrons le code de pause dans la fonction (dans mon exemple, il en est un, dans votre cas il peut y avoir plus de fonctions)

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

Donc, la chose est petite, nous ajoutons une fonction pour gérer la pause / unpause

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

Tout est prêt, nous avons un mécanisme qui ne mange pas de mémoire en vain et donne la possibilité d'interagir avec la page lors d'une pause.

Cet article a été écrit pour vous aider. Si quelqu'un a déjà vu une telle solution - je m'excuse. Merci de votre attention!