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 =[]; }
      
      





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



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



All Articles