एचटीएमएल 5 गेम में रुके

प्रागितिहास

अपने पहले html5 गेम को विकसित करने की प्रक्रिया में होने के कारण, मैं कई कठिनाइयों में भाग गया, उनमें से अधिकांश के लिए नेटवर्क पर बहुत सारे तैयार समाधान हैं, हालांकि, इस प्रश्न का एक सक्षम उत्तर: "एचटीएमएल 5 गेम को कैसे रोकें?" - मैंने नहीं पाया। उन सभी के लिए जो इस विषय में रुचि रखते हैं या इसकी आवश्यकता है - कृपया जारी रखें ...

समाधान के बारे में अधिक जानें।

सभी समाधान मैंने इंटरनेट पर एक तरह से या किसी अन्य कार्य को उस सिद्धांत के आधार पर पाया।
नीचे दिए गए उदाहरण:

उदाहरण 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; } } 

अगला, हम पॉज़ कोड को फ़ंक्शन में एकीकृत करते हैं (मेरे उदाहरण में, यह एक है, आपके मामले में अधिक कार्य हो सकता है)

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

सब कुछ तैयार है, हमें एक ऐसा तंत्र मिला है जो स्मृति को व्यर्थ नहीं खाता है और पृष्ठ के साथ बातचीत करने का अवसर देता है।

यह लेख मदद के लिए लिखा गया था। अगर किसी ने पहले ऐसा कोई समाधान देखा है - मैं माफी मांगता हूं। आपका ध्यान के लिए धन्यवाद!