HTML5ゲームを一時停止する

背景

最初のhtml5ゲームを開発する過程で、多くの困難に直面しました。それらの多くはネットワーク上に既製のソリューションがたくさんありますが、「html5ゲームを一時停止するには？」という質問に対する適切な答えは見つかりませんでした。 このトピックに興味があるか、それを必要とするすべての人に-続けてください...

ソリューションの詳細をご覧ください。

インターネット上で私が見つけたすべての解決策は、while原理に基づいて機能します。
以下の例：

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

この場合、しばらく一時停止し、その後ゲームが続行されます...
ユーザーがどのくらいの時間休止するかわからないだけでなく、機能の実行中にユーザーがメニューを操作できないため、このソリューションはほとんどの場合機能しません。

例2

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

ユーザーのアクションを継続的に再起動および追跡すると、メモリが無駄になります。

私の決断

そこで、インターネットで見つかったソリューションの主な問題を強調して、すべてをまとめると、次のようになりました。

最初に、再レンダリングオブジェクト自体、オブジェクトの位置のグローバル変数、一時停止の変数、および彼が少し後で学習する配列を宣言しましょう。

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

次に、レンダリング関数自体を宣言します。一時停止する必要があります。

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

次に、一時停止コードを関数に統合します（私の例では1つです。あなたの場合、さらに関数があるかもしれません）

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

それで、物事は小さく、一時停止/一時停止解除を処理する関数を追加します

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

すべての準備が整ったので、メモリを無駄に消費せず、一時停止中にページを操作できるようになりました。

この記事は助けのために書かれました。 誰かがそのような解決策を以前に見たことがあれば-謝罪 ご清聴ありがとうございました！