Cara Game HTML5 Berjalan di Pelayar Tanpa Install

Anda menekan satu pautan, halaman terbuka, dan tiga saat kemudian seekor watak bergerak di skrin. Tiada pemasangan, tiada dialog kebenaran, tiada folder baharu dalam komputer. Bagi kebanyakan orang, itu satu-satunya perkara yang perlu difahami tentang game HTML5.

Apabila sesuatu tidak berfungsi, bagaimanapun, kefahaman asas tentang tiga lapisan teknologi ini menjimatkan banyak masa. Anda tidak perlu menjadi pembangun untuk mengenal pasti sama ada masalahnya pada rangkaian, pada kad grafik atau pada pelayar itu sendiri.

Tiga lapisan, tiga analogi

Lapisan pertama ialah kanvas. Bayangkan sehelai kertas lukis yang kosong. Permainan mengarahkan pelayar melukis bentuk, teks dan imej di atasnya, berpuluh kali sesaat, dan ilusi gerakan terhasil daripada lukisan yang sentiasa ditimpa semula. Kebanyakan permainan 2D dalam katalog ini, termasuk Circuit Tetris, cukup dengan lapisan pertama ditambah sedikit bantuan pelayar.

Lapisan kedua ialah WebGL. Kalau kanvas ialah kertas lukis, WebGL ialah kertas lukis yang dipegang oleh pembantu khas, iaitu kad grafik. Ia membolehkan beribu bentuk dilukis serentak dengan kos yang jauh lebih rendah, dan itulah sebabnya permainan 3D atau kesan zarah yang padat boleh berjalan dalam tab pelayar.

Lapisan ketiga ialah WebAssembly. Ia satu format yang membolehkan kod yang ditulis dalam bahasa lain dijalankan dalam pelayar dengan hampir kelajuan asli. Analoginya begini: bukannya menterjemah resipi perkataan demi perkataan setiap kali memasak, anda menyimpan versi yang sudah diterjemah dan boleh terus digunakan.

Teknologi	Analogi	Apa yang anda rasa
Canvas	Kertas lukis kosong	Permainan 2D ringkas, grafik sederhana
WebGL	Kertas lukis dengan pembantu grafik	Kesan zarah, 3D, animasi lancar
WebAssembly	Resipi yang sudah diterjemah	Fizik dan logik berat tanpa lag

Apa yang berlaku selepas anda tekan butang main

1. Pelayar memuatkan fail HTML dan JavaScript yang membentuk permainan.
2. Aset seperti imej, bunyi dan data dimuat turun, kadangkala berjumlah beberapa megabait.
3. Permainan menyediakan kanvas dan, kalau perlu, konteks WebGL.
4. Satu gelung animasi mula berjalan, biasanya enam puluh kali sesaat, mengemas kini keadaan dan melukis semula skrin.
5. Input anda direkodkan dan dimasukkan ke dalam gelung itu sebagai arahan.

Satu perkara yang sering mengelirukan ialah bunyi. Pelayar menyekat audio sehingga anda berinteraksi dengan halaman, jadi permainan yang kelihatan beku pada skrin pembuka mungkin hanya menunggu satu klik pertama. Itu bukan kerosakan, dan ia juga sebabnya banyak permainan meminta anda menekan butang main sebelum apa-apa bergerak.

Kebanyakan masa muat sebenar dihabiskan pada langkah kedua. Itulah sebabnya permainan yang kelihatan ringkas kadangkala mengambil masa lebih lama daripada permainan 3D yang dioptimumkan dengan baik.

Ketiadaan pemasangan juga bermakna tiada versi yang tersimpan dalam komputer anda. Setiap kali anda membuka halaman, pelayar memuatkan semula fail yang diperlukan, walaupun sebahagiannya mungkin sudah ada dalam cache. Itulah sebabnya permainan yang sama boleh terasa lebih laju pada lawatan kedua: cache menyelamatkan beberapa saat muat, bukan grafiknya berubah.

Kenapa sesetengah permainan berat walaupun ringkas

Sebab pertama ialah aset yang tidak dimampatkan. Satu fail audio berdurasi panjang boleh menambah puluhan megabait tanpa anda sedar, dan tiada grafik hebat untuk menunjukkan sebabnya.

Sebab kedua ialah tab yang tidak aktif. Apabila anda menukar tab, pelayar memperlahankan gelung animasi untuk menjimatkan bateri. Kembali ke tab itu dan permainan mungkin tersentak untuk beberapa saat semasa ia menyusulkan semula keadaan.

Sebab ketiga ialah peranti. Circuit Tetris dan permainan berbentuk blok lain bergantung pada kitaran melukis yang berterusan, dan pada telefon lama, kitaran itu boleh tersekat walaupun permainannya ringkas. Menutup tab lain selalunya menyelesaikan masalah ini.

Sebab keempat, yang jarang disebut, ialah pemampatan. Fail yang tidak dimampatkan mengambil masa lebih lama untuk dihantar, dan masa itu terasa seperti permainan yang lambat dimuatkan walaupun grafiknya sederhana.

Skrin hitam: senarai semak

1. Muat semula halaman sekali. Banyak kegagalan berlaku semasa memuatkan aset, bukan selepasnya.
2. Matikan penyekat iklan untuk laman itu. Sesetengah permainan memuatkan fail daripada domain lain dan disekat secara tidak sengaja.
3. Cuba pelayar lain. Kalau ia berfungsi di sana, masalahnya pada tetapan pelayar asal anda.
4. Semak sama ada perkakasan grafik anda disekat. Dalam tetapan pelayar, cari pilihan perkakasan dan cuba tukar mod pemecutan.
5. Kecilkan zum ke seratus peratus. Paparan yang terlalu besar boleh menyembunyikan kanvas di luar kawasan yang kelihatan.
6. Cuba dalam mod penyamaran. Kalau ia berfungsi di sana, satu sambungan pelayar anda yang menyekat permainan itu.

Kalau kesemuanya gagal, kemungkinan besar masalahnya pada pelayan permainan itu, bukan pada peranti anda. Cuba puzzle nombor yang ringan sebagai ujian: kalau ia berjalan, pelayar anda baik dan masalahnya pada permainan yang lebih berat. Kalau ia juga gagal, masalahnya pada pelayar atau peranti, dan tiada permainan lain akan berjaya sehingga itu dibaiki.

Apa yang tidak boleh diselamatkan

Ada satu keadaan yang tiada senarai semak boleh baiki: apabila pelayar menyekat WebGL sepenuhnya. Permainan yang bergantung pada grafik akan memaparkan skrin kosong atau mesej ralat, dan tiada jumlah muat semula akan mengubahnya.

Dalam kes itu, pilihan anda hanya dua: gunakan peranti lain, atau cari permainan yang dibina dengan kanvas biasa. Kalau satu permainan berjalan dan satu lagi tidak pada peranti yang sama, masalahnya hampir pasti pada permainan itu, bukan pada tetapan anda. Untuk penjelasan tentang istilah teknikal lain yang muncul dalam permainan, lihat ensiklopedia istilah di laman ini.

Soalan lazim

Kenapa game HTML5 tidak perlu dimuat turun?

Kerana kod dan asetnya dihantar melalui pelayar seperti halaman web biasa. Anda tidak memasang apa-apa ke dalam sistem; semuanya berjalan dalam tab dan dibuang apabila anda menutupnya. Itulah sebabnya sesetengah permainan berjalan lebih perlahan pada kali pertama dibuka berbanding kali kedua.

Adakah game HTML5 selamat untuk komputer saya?

Permainan yang dimuatkan dalam pelayar berjalan di dalam kotak keselamatan pelayar dan tidak boleh membaca fail peribadi anda tanpa kebenaran. Tetapi ia boleh meminta akses kepada storan atau papan kekunci, jadi berhati-hati dengan laman yang meminta kebenaran luar biasa sebelum permainan bermula.

Kenapa permainan tersentak selepas saya tukar tab?

Pelayar memperlahankan gelung animasi pada tab yang tidak aktif untuk menjimatkan tenaga. Apabila anda kembali, permainan perlu menyusulkan keadaan dan memuatkan semula sebahagian aset. Beri masa beberapa saat sebelum menekan butang lain, dan tutup tab lain kalau ia masih tersentak.