توقف مؤقت في ألعاب HTML5

قبل التاريخ

في طور تطوير أول لعبة html5 الخاصة بي ، واجهت عددًا من الصعوبات ، لأن معظمها هناك الكثير من الحلول الجاهزة على الشبكة ، لكن هناك إجابة مختصة على السؤال: "كيفية إيقاف لعبة html5؟" - لم اجد. لجميع المهتمين بهذا الموضوع أو يحتاجون إليه - يرجى المتابعة ...

معرفة المزيد عن الحلول.

كل الحلول التي وجدتها على الإنترنت تعمل بطريقة أو بأخرى على أساس مبدأ الوقت.
أمثلة أدناه:

مثال 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 =[]; } 

كل شيء جاهز ، حصلنا على آلية لا تأكل الذاكرة سدى وتمنح الفرصة للتفاعل مع الصفحة أثناء توقف مؤقت.

هذا المقال كتب للمساعدة. إذا كان أي شخص قد رأى مثل هذا الحل من قبل - أعتذر. شكرا لاهتمامكم!