Pausen in HTML5-Spielen

Hintergrund

Während ich mein erstes HTML5-Spiel entwickelte, stieß ich auf eine Reihe von Schwierigkeiten. Für die meisten von ihnen gibt es viele vorgefertigte Lösungen im Netzwerk. Eine kompetente Antwort auf die Frage: "Wie kann man ein HTML5-Spiel anhalten?" - Ich habe nicht gefunden. An alle, die sich für dieses Thema interessieren oder es brauchen - bitte weiter ...

Erfahren Sie mehr über Lösungen.

Alle Lösungen, die ich im Internet auf die eine oder andere Weise gefunden habe, basieren auf dem while-Prinzip.
Beispiele unten:

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

In diesem Fall machen wir eine Pause, danach geht das Spiel weiter ...
Diese Lösung funktioniert in den meisten Fällen nicht, schon weil wir nicht wissen, wie lange der Benutzer pausiert, und während der Ausführung der Funktion kann der Benutzer nicht mit dem Menü interagieren.

Beispiel 2

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

Durch ständiges Neustarten und Verfolgen von Benutzeraktionen wird Speicherplatz verschwendet.

Meine Entscheidung

Als ich die Hauptprobleme der im Internet gefundenen Lösungen hervorhob, stellte ich alles zusammen:

Zunächst deklarieren wir das Re-Rendering-Objekt selbst, die globale Variable der Position des Objekts und die Variable für die Pause sowie ein Array, für das wir etwas später herausfinden werden.

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

Jetzt deklarieren wir die Rendering-Funktion selbst, die wir anhalten müssen:

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

Als nächstes integrieren wir den Pausencode in die Funktion (in meinem Beispiel ist es eine, in Ihrem Fall gibt es möglicherweise mehr Funktionen).

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

Also, die Sache ist klein, wir fügen eine Funktion hinzu, um Pause / Unpause zu behandeln

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

Alles ist fertig, wir haben einen Mechanismus, der das Gedächtnis nicht umsonst frisst und die Möglichkeit bietet, während einer Pause mit der Seite zu interagieren.

Dieser Artikel wurde um Hilfe geschrieben. Wenn jemand schon einmal eine solche Lösung gesehen hat - ich entschuldige mich. Vielen Dank für Ihre Aufmerksamkeit!