Jeda dalam game HTML5

Latar belakang

Sedang dalam proses mengembangkan game html5 pertama saya, saya mengalami sejumlah kesulitan, karena kebanyakan dari mereka ada banyak solusi siap pakai di jaringan, namun, jawaban yang kompeten untuk pertanyaan: "Bagaimana cara menghentikan game html5?" - Saya tidak menemukan. Untuk semua yang tertarik dengan topik ini atau membutuhkannya - silakan lanjutkan ...

Pelajari lebih lanjut tentang solusi.

Semua solusi yang saya temukan di Internet dengan satu atau lain cara bertindak berdasarkan prinsip while.
Contoh di bawah ini:

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

Dalam hal ini, kami berhenti sebentar, setelah itu permainan berlanjut ...
Solusi ini tidak akan berfungsi dalam banyak kasus, jika hanya karena kami tidak tahu berapa lama pengguna akan berhenti, dan selama pelaksanaan fungsi pengguna tidak akan dapat berinteraksi dengan menu.

Contoh 2

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

Memulai dan melacak tindakan pengguna secara terus-menerus, memori terbuang sia-sia.

Keputusan saya

Jadi, menyoroti masalah utama dari solusi yang ditemukan di Internet, saya, menyatukan semuanya, mendapatkan yang berikut:

Pertama, kita akan mendeklarasikan objek rendering itu sendiri, variabel global dari posisi objek dan variabel untuk jeda, serta array, yang akan kita temukan sedikit kemudian.

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

Sekarang mari kita mendeklarasikan fungsi rendering itu sendiri, yang perlu kita jeda:

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

Selanjutnya, kami mengintegrasikan kode jeda ke dalam fungsi (dalam contoh saya, ini adalah satu, dalam kasus Anda mungkin ada lebih banyak fungsi)

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

Jadi, masalahnya kecil, kami menambahkan fungsi untuk menangani jeda / membatalkan jeda

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

Semuanya sudah siap, kami mendapat mekanisme yang tidak memakan memori dengan sia-sia dan memberikan kesempatan untuk berinteraksi dengan halaman saat jeda.

Artikel ini ditulis untuk meminta bantuan. Jika ada yang melihat solusi seperti itu sebelumnya - saya minta maaf. Terima kasih atas perhatian anda!