Cara hos permainan HTML5 di laman web: muat naik, benam, betulkan

Cara hos permainan HTML5, dalam satu ayat: muat naik kandungan folder game/ ke mana-mana hos web yang menyajikan fail statik, kekalkan subfolder seperti asalnya, dan buka alamat folder itu dalam pelayar. Folder game/ yang sedia untuk dihoskan bagi setiap edisi di pasaran kami berjalan seperti sedia ada: tiada PHP, tiada pangkalan data, tiada langkah binaan dan tiada akaun, jadi hos hanya perlu menyerahkan fail kepada pelayar pemain.

Itu sahaja tugasnya apabila semuanya berjalan lancar. Panduan ini tentang hari-hari lain: skrin kosong, ralat 404, mesej jenis MIME, iframe yang enggan memaparkan apa-apa. Kami menjual templat ini, jadi anggap panduan ini sebagai buku panduan lapangan untuk pakej kami sendiri. Kami menyajikan salinan Gridspark dan Velvet Pool dari pelayan tempatan sementara, merosakkan Gridspark dengan sengaja dalam beberapa cara, dan membaca manual awam bagi edisi lain. Apabila sesuatu kenyataan datang daripada manual dan bukan ujian kami sendiri, kami nyatakannya.

Apa sebenarnya yang terlibat dalam menghoskan permainan HTML5

Hos statik menyimpan fail dan menyerahkannya kepada pelayar apabila diminta. Ia tidak pernah menjalankan permainan anda; pelayar pemain yang melakukannya. Sebab itulah keperluan edisi kami tertulis dengan jelas: pelayar semasa, hos yang menyajikan fail statik melalui HTTP atau HTTPS, dan tiada PHP, pangkalan data atau akaun untuk bermain. Folder game/ sudah dibina, jadi menerbitkannya tidak memerlukan npm dan tiada langkah binaan.

Dua had yang perlu diketahui sebelum anda bermula. Sesetengah edisi mempunyai bahagian pilihan yang tidak statik: Zabum dan Ricopop menyenaraikan papan kedudukan pilihan yang memerlukan PHP 7.4 atau lebih baru dan folder yang boleh ditulis; edisi TypeScript (Beep Out, Pinloop, Trimora, Twirldrop, Riffvolt, Sunset Rally, Tenguin, Mochi Monsters, Deepforge, Barricade Z dan Zabum) memerlukan Node.js hanya jika anda mahu menyunting sumber dan membina semula; setiap manual memberikan versinya. Velvet Pool, Puttide, Ricopop dan Gridspark dihantar dalam JavaScript biasa, tanpa langkah kompil antara suntingan anda dan fail yang anda muat naik. Tiada satu pun daripada itu diperlukan untuk menerbitkan permainan seperti yang dihantar. Penghosan itu sendiri pula tidak termasuk dalam pembelian. Terma kedai menyenaraikan penghosan dan pemasangan pada pelayan anda antara perkhidmatan berasingan yang kami sebut harganya sebelum sebarang kerja; sokongan meliputi soalan tentang memasang dan menggunakan fail yang dibekalkan.

Apa yang dimuat naik, dan apa yang kekal di komputer anda:

• Muat naik semua yang ada dalam game/: index.html, skrip, gaya, imej, bunyi dan fon.
• Jangan sertakan source/ (salinan pembangun yang boleh disunting), documentation/ (manual) dan fail ZIP itu sendiri. Manual Zabum menyenaraikan muat naik source/ secara tersilap sebagai punca ralat 404 seperti main.tsx.
• Simpan notis lesen pihak ketiga yang datang bersama pakej, di sebelah produk anda, seperti yang dikehendaki oleh terma.

Lihat Gridspark, edisi yang kami gunakan sebagai contoh

Cara menghoskan permainan HTML5: laluan pendek dari ZIP ke halaman yang boleh dimainkan

Langkah-langkah ini mengikut bab pemasangan manual Velvet Pool, Puttide, Gridspark dan Sunset Rally, serta semakan yang kami tambah selepas ujian. Gridspark dijadikan contoh kerana ia edisi yang paling kerap kami sajikan dan rosakkan.

1. Nyahzip pakej di komputer anda. Anda akan dapati game/ (folder yang anda terbitkan), source/ (salinan yang boleh disunting) dan documentation/ (manual).
2. Pilihan tetapi murah: uji secara tempatan. Buka terminal di dalam game/, jalankan python -m http.server 8765 dan lawati http://localhost:8765/. Jika ia dimainkan di situ, fail itu betul dan sebarang masalah kemudian terletak pada hos.
3. Pilih alamat akhir sekarang, contohnya https://your-site.example/games/gridspark/. Subfolder berfungsi kerana laluan di dalam permainan adalah relatif; manual Gridspark mencadangkan public_html/games/gridspark/.
4. Muat naik kandungan game/ ke dalam folder itu menggunakan pengurus fail hos anda atau klien FTP, dengan mengekalkan setiap subfolder. index.html mesti berada terus di dalam folder, bukan satu aras lebih dalam.
5. Buka alamat folder melalui https, dengan tanda sengkang di hujungnya. Dalam Gridspark, anda ketik skrin mula (pelayar menunggu sentuhan atau klik sebelum membenarkan audio) dan tekan Play.
6. Buat satu langkah, muat semula halaman dan periksa sama ada menu kini menawarkan Continue. Itu membuktikan pelayar menyimpan kemajuan untuk alamat anda.
7. Pautkan ke folder itu dari laman anda, atau benamkannya dalam halaman (lihat bahagian iframe di bawah).

Folder Gridspark yang siap mengandungi index.html, style.css, gridspark.config.js, src/ dan assets/ bersebelahan, dan manual meminta anda mengekalkannya bersama. Edisi lain menyusun fail dengan cara berbeza (Velvet Pool mempunyai css/ dan assets/ dan bukannya satu helaian gaya), tetapi peraturannya sama: muat naik folder seperti yang diberikan.

Mengapa klik dua kali pada index.html memberi halaman kosong

Edisi yang kami buka memuatkan kod mereka sebagai modul ES, dan pelayar enggan memuatkan modul daripada alamat file://. Kami membuka Gridspark terus dari cakera dalam Chromium dan mendapat skrin gelap yang kosong. Konsol menyatakan skrip itu disekat oleh dasar CORS, dengan sebab "Cross origin requests are only supported for protocol schemes" seperti http dan https. Folder yang sama yang disajikan oleh pelayan web tempatan menunjukkan skrin mula serta-merta. Manual Velvet Pool, Puttide, Sunset Rally dan Gridspark semuanya menyatakan perkara yang sama: jangan buka permainan dari file://.

• Tidak berfungsi: file:///C:/Users/you/games/gridspark/index.html
• Berfungsi: http://localhost:8765/ dari pelayan ujian tempatan, atau https://your-site.example/games/gridspark/ di hos anda.

Kami hanya menguji Chromium. Manual menerangkan sekatan ini sebagai sesuatu yang dilakukan oleh pelayar biasa, jadi rancang untuknya di mana-mana.

Benamkan permainan dalam halaman dengan iframe

Untuk memaparkan permainan di dalam halaman yang sudah anda ada, tunjukkan iframe ke folder yang dimuat naik. Ini tag yang kami uji:

<iframe src="https://your-site.example/games/gridspark/" title="Gridspark" allow="fullscreen; autoplay" width="960" height="540" style="border:0"></iframe>

• src: alamat penuh folder, dengan https dan tanda sengkang di hujungnya.
• title: nama pendek. Pembaca skrin menggunakannya untuk menerangkan bingkai.
• allow="fullscreen; autoplay": manual menyatakan untuk membenarkan skrin penuh dan main automatik dalam iframe apabila diperlukan. Dalam ujian kami, bingkai dari alamat lain tanpa ini mempunyai skrin penuh dilumpuhkan, dan Gridspark hanya menyembunyikan butang skrin penuhnya. Atribut allowfullscreen yang lebih lama memberi hasil yang sama seperti allow. Bingkai pada alamat yang sama dengan halaman mendapat skrin penuh dengan kedua-dua cara.
• Tiada atribut sandbox. Dengan sandbox="allow-scripts" sahaja, Gridspark tidak pernah bermula: bingkai mendapat asal null, pelayar menyekat skrip permainan sendiri dan local storage melemparkan ralat keselamatan. Menambah allow-same-origin menjadikannya berfungsi, tetapi MDN memberi amaran bahawa gabungan ini pada bingkai sama asal menghapuskan perlindungan, jadi bagi permainan yang anda hoskan sendiri, jangan letakkan sandbox.

Saiz untuk telefon

Kotak 16:9 tetap kelihatan betul di desktop tetapi salah di telefon. Pada lebar 390 px, iframe dengan aspect-ratio 16/9 hanya setinggi 219 px, dan menu Gridspark terpotong di bawah butang Daily challenge. Memberi bingkai ketinggian 75svh, tiga perempat daripada ketinggian skrin, menunjukkan keseluruhan menu. Halaman anda sendiri juga memerlukan tag meta viewport; keenam-enam pakej yang kami buka membawanya dalam index.html masing-masing, itulah sebabnya permainan menyesuaikan saiz apabila dibuka secara terus.

Permainan berfungsi di alamatnya sendiri tanpa halaman di sekelilingnya, jadi pautan biasa yang membuka alamat itu sentiasa menjadi pilihan sandaran yang sah.

Lihat Velvet Pool, edisi 3D yang dibenamkan dengan cara yang sama

WordPress dan pembina laman lain

Menghoskan folder dan memaparkannya dalam halaman ialah dua tugas berasingan, dan dalam WordPress keduanya menggunakan dua alat yang berbeza. Semua yang berikut berasal daripada dokumentasi WordPress dan rujukan pembangun, bukan daripada menjalankan WordPress sendiri.

1. Muat naik folder dengan pengurus fail atau FTP hos anda, ke dalam pepohon folder laman (contohnya folder games/ di sebelah folder WordPress). Jangan melalui Media Library: kod WordPress mengeluarkan .html dan .js daripada jenis muat naik yang dibenarkan melainkan pengguna mempunyai keupayaan unfiltered_html.
2. Buka alamat folder itu sendiri sebelum anda menyentuh mana-mana halaman. Peraturan Apache lalai yang didokumenkan WordPress menghantar permintaan ke index.php hanya apabila tiada fail atau folder yang sepadan wujud (itulah yang diuji oleh syarat !-f dan !-d), jadi folder yang dimuat naik disajikan seperti sedia ada.
3. Tambahkan iframe dalam blok Custom HTML. WordPress mendokumenkan bahawa pengguna tanpa keupayaan unfiltered_html, contohnya Contributor, mendapati tag iframe dibuang apabila siaran disimpan. Jika bingkai hilang selepas disimpan, semak siapa yang menyunting halaman itu.

Pembina laman dan CMS lain: kami belum mengujinya dan tidak membuat sebarang dakwaan tentang mana-mana daripadanya. Permainan memerlukan dua perkara yang sama di mana-mana: tempat untuk folder yang dimuat naik dan elemen benam yang menerima iframe. Jika sesuatu pembina tidak menawarkan kedua-duanya, hoskan folder di mana-mana yang menyajikan fail statik dan pautkan ke alamatnya.

Apabila ia tidak bermula: senarai penyelesaian masalah

Buka alat pembangun pelayar (F12 dalam kebanyakan pelayar desktop) dan lihat tab Console dan Network sebelum anda menukar apa-apa. Setiap kegagalan di bawah meninggalkan baris merah di sana, dan nama fail dalam baris itu biasanya menunjukkan puncanya.

Skrin kosong

Semak mengikut urutan ini: alamat bermula dengan http:// atau https://; Konsol tidak mempunyai baris merah; nama fail mengekalkan huruf besar dan kecil yang tepat; dan, bagi edisi 3D, WebGL2 tersedia (manual Velvet Pool menyatakan untuk mengaktifkan pecutan perkakasan). Hos Linux menganggap Game.js dan game.js sebagai dua fail dan Windows tidak, jadi folder yang berfungsi di PC anda boleh rosak selepas dimuat naik. Manual Velvet Pool dan Zabum kedua-duanya memberi amaran tentang huruf besar dan kecil.

404 untuk src/main.js, fon atau imej

Sebahagian folder tidak sampai, atau ia sampai satu aras terlalu dalam. Kami menghasilkan semula ini dengan hanya memuat naik index.html, style.css dan fail konfigurasi: skrin kekal kosong dan tab Network menyenaraikan 404 untuk src/main.js dan setiap fon. Muat naik folder yang hilang, atau alihkan kandungan ke atas supaya index.html berada di alamat yang anda buka. Jika imej atau bunyi hilang atau rosak, manual Zabum mencadangkan FTP dalam mod binary atau auto, atau memuat naik ZIP dan mengekstraknya dalam pengurus fail hos. Ralat 404 bermaksud fail hilang. Ia bukan masalah MIME.

Halaman dimuatkan tanpa gaya, dengan ikon besar

Jika tetapan penulisan semula atau URL bersih menyajikan folder tanpa tanda sengkang di hujung, laluan relatif diselesaikan satu aras ke atas. Kami menghasilkan semula ini dengan pelayan ujian yang memulangkan halaman folder tanpa ubah hala. Pelayar meminta /games/style.css dan /games/src/main.js dan bukannya fail di dalam /games/gridspark/, mendapat 404, dan melukis menu sebagai butang mentah dan ikon yang terlalu besar. Pautkan ke folder dengan tanda sengkang di hujung, atau tunjuk terus ke index.html.

Ralat jenis MIME pada skrip modul

Dalam ujian kami, Konsol berbunyi: Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/plain". Pelayar sangat ketat dengan skrip modul. Manual menyatakan pelayan mesti menghantar fail .js dengan jenis MIME JavaScript, dan .wasm sebagai application/wasm; manual Sunset Rally menambah .mjs. Tab Network menunjukkan Content-Type bagi setiap fail. Dalam binaan yang kami buka, modul ialah fail .js. Jika anda menambah fail .mjs sendiri dan konfigurasi Apache lama tidak memetakannya, satu baris dalam .htaccess membetulkannya, iaitu baris yang sama digunakan oleh laman kami sendiri:

AddType text/javascript .mjs

Jadual jenis Apache 2.4.62 pada mesin ujian kami sudah memetakan js dan mjs kepada text/javascript dan wasm kepada application/wasm, jadi pemasangan standard tidak memerlukan baris itu. Pelayan lain mengekalkan jadual sendiri; tanya sesiapa yang menguruskan pelayan anda.

Disekat oleh dasar CORS

Skrip modul dan fon yang dimuatkan dari alamat berbeza memerlukan pengepala Access-Control-Allow-Origin daripada alamat itu. Dalam ujian kami, halaman pada satu port tidak dapat memuatkan skrip modul dari port lain sehingga pelayan kedua menghantar pengepala itu. Dalam amalan, penyelesaiannya membosankan: kekalkan fail permainan bersama dalam satu folder pada satu alamat, yang memang cara pakej dibina. Anda tidak perlu CORS untuk membenamkan permainan dalam iframe di laman lain, kerana iframe hanya memuatkan alamat permainan. Ralat CORS dalam benaman biasanya datang daripada atribut sandbox, seperti yang diterangkan di atas.

Kandungan bercampur pada halaman https

Halaman yang disajikan melalui https tidak boleh memuatkan skrip atau iframe melalui http: pelayar menyekat kedua-duanya, dan MDN menyenaraikan fon serta permintaan fetch antara jenis yang disekat juga. Gunakan https:// dalam src iframe dan dalam mana-mana alamat penuh yang anda taip. Fail permainan sendiri menggunakan laluan relatif, jadi ia mengikut skema alamat yang anda buka. Jika alamat https tidak dibuka langsung, aktifkan sijil dalam panel hos anda dahulu.

Iframe berkata "refused to connect"

Dalam ujian kami, Chromium mencatat baris ini, dengan alamat bingkai yang disekat dalam tanda petik pertama: Refused to display 'https://game-host.example/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. Pelayan yang menghoskan permainan menghantar pengepala itu. SAMEORIGIN hanya membenarkan pembenaman dari alamat yang sama, dan DENY tidak membenarkannya sama sekali; peraturan frame-ancestors dalam pengepala Content-Security-Policy melakukan kerja yang serupa. Tukar pengepala untuk folder permainan, atau sajikan halaman dan permainan dari satu alamat.

Tiada bunyi pada mulanya

Pelayar menyekat audio sehingga ketikan atau klik pertama, itulah sebabnya Gridspark dibuka pada skrin mula yang perlu ditekan. Ketik sekali, kemudian semak kelantangan dan kebenaran pelayar.

Lihat Puttide, edisi golf dengan binaan sedia untuk dihoskan

Mengemas kini permainan tanpa menyajikan versi separuh lama

Pelayar menyimpan skrip dalam cache, jadi selepas muat naik, anda atau pemain masih mungkin melihat permainan lama. Manual Gridspark memberikan peraturannya: sandarkan suntingan anda, gantikan fail yang boleh dimainkan sebagai satu set, uji, dan lakukan hard-refresh jika hos menyimpan modul lama dalam cache. Jangan campurkan modul lama dan baharu. Permainan yang terdiri daripada banyak fail kecil yang saling mengimport ialah perkara yang salah untuk dikemas kini separuh jalan.

Edisi yang mempunyai service worker menyimpan cache sendiri. Zabum ialah PWA: selepas kemas kini, lakukan hard-refresh (Ctrl atau Cmd ditambah Shift ditambah R). Jika anda menggantikan fail bunyi, tukar nama cache dalam sw.js (contoh manual bertukar dari zabum-v5 kepada zabum-v6) dan muat naik fail itu. Jika laman anda berada di belakang CDN, kosongkan cachenya juga. Antara manual yang kami baca, Zabum ialah satu-satunya PWA; manual Velvet Pool dan Puttide menyatakan dengan jelas bahawa aplikasi mereka bukan aplikasi luar talian yang boleh dipasang.

Baca changelog sebelum menggantikan fail, dan simpan salinan apa-apa yang anda sunting. Simpanan berada dalam pelayar setiap pemain, bukan dalam folder yang anda muat naik, jadi menggantikan fail tidak memadamkannya.

Lihat Zabum, edisi PWA dengan papan kedudukan PHP pilihan

Di mana kemajuan disimpan, dan apa yang berlaku apabila pelayar dikosongkan

Edisi ini tidak mempunyai akaun dan tiada pangkalan data pelayan. Tetapan, bahasa, larian semasa dan rekod peribadi berada dalam local storage pelayar, dan tiada apa-apa dihantar kepada Polar Games. Manual Gridspark menamakan kunci gridspark.standalone.v1.*; selepas satu langkah, kami melihat gridspark.standalone.v1.best dan gridspark.standalone.v1.save.

Storan milik alamat (protokol, hos dan port), bukan folder. Kami menyemaknya dengan tiga cara. Salinan Gridspark dalam folder lain bagi alamat yang sama membaca nilai yang sama. Permainan yang sama dibuka sebagai localhost dan bukannya 127.0.0.1 bermula kosong, begitu juga alamat yang sama pada port lain. Manual Zabum menambah bahawa http dan https, www dan bukan www, serta subdomain masing-masing mempunyai storan sendiri.

• Mengosongkan data laman atau kuki memadamkan permainan yang disimpan dan rekod. Dalam tetingkap persendirian, kemajuan mungkin hanya kekal untuk sesi itu; permainan terus berjalan apabila storan disekat.
• Pelayar atau peranti lain bermula dari sifar. Tiada penyegerakan dan tiada akaun untuk log masuk.
• Menukar alamat menetapkan semula semua orang: http kepada https, www kepada bukan www, atau domain baharu.
• Memindahkan permainan ke folder lain bagi alamat yang sama mengekalkan simpanan, seperti yang ditunjukkan oleh ujian Gridspark kami.

Senarai semakan ujian sebelum berkongsi pautan

1. Buka alamat akhir dalam pelayar yang digunakan pemain anda: satu yang berasaskan Chromium (Chrome atau Edge), Firefox dan Safari. Ujian kami hanya dijalankan dalam Chromium, jadi ini senarai untuk anda jalankan.
2. Buka pada telefon sebenar, pertama di alamat permainan sendiri dan kemudian di dalam halaman anda, dalam kedua-dua orientasi.
3. Hadkan sambungan dalam alat pembangun dan perhatikan muat pertama. Gridspark, yang disajikan tanpa mampatan dari pelayan tempatan kami, memerlukan kira-kira 0.5 MB dan 26 permintaan untuk sampai ke skrin mula. Dengan Chromium dihadkan kepada 1.6 Mbit/s dan kelewatan 150 ms, skrin muncul selepas kira-kira 3 saat. Keseluruhan folder game/ ialah kira-kira 3.4 MB pada salinan kami; Velvet Pool kira-kira 7.3 MB dan Puttide kira-kira 15 MB. Jika telefon lama bermasalah, manual Zabum mencadangkan untuk menyemak sama ada hos anda memampatkan fail dengan gzip atau brotli.
4. Buat satu langkah, muat semula, dan sahkan bahawa Continue dan skor terbaik masih ada.
5. Ketik sekali dan semak sama ada audio bermula. Senyap sebelum ketikan pertama adalah normal.
6. Buka tetingkap persendirian. Permainan sepatutnya masih berjalan, walaupun ia mungkin melupakan kemajuan apabila anda menutupnya.
7. Baca tab Console dan Network pada muat pertama: tiada baris merah, tiada 404.
8. Dalam benaman, semak bahawa butang skrin penuh muncul dan bingkai cukup tinggi pada telefon.

Soalan lazim

Adakah saya perlukan PHP, pangkalan data atau pelayan khas untuk menghoskan permainan HTML5?

Tidak untuk edisi kami seperti yang dihantar. Ia statik: muat naik folder game/ ke hos yang menyajikan fail melalui HTTP atau HTTPS dan bukakannya. Zabum dan Ricopop mempunyai papan kedudukan pilihan yang memang memerlukan PHP 7.4 atau lebih baru dan folder yang boleh ditulis.

Bolehkah saya klik dua kali pada index.html sahaja?

Tidak. Pelayar menyekat modul permainan pada file://, dan halaman kekal kosong. Bukakan permainan melalui alamat http atau https, sama ada hos anda atau pelayan ujian tempatan seperti python -m http.server 8765.

Adakah saya perlukan HTTPS?

Manual menyatakan untuk menggunakan HTTPS bagi penghosan awam. Manual Zabum menyatakan Add to home screen memerlukannya, dan halaman https tidak boleh membenamkan iframe http kerana pelayar menyekatnya sebagai kandungan bercampur.

Bagaimana saya menambah permainan ke halaman WordPress?

Muat naik folder dengan pengurus fail atau FTP hos anda, buka alamatnya untuk mengesahkan ia dimainkan, kemudian tambahkan iframe dalam blok Custom HTML. Pengguna tanpa keupayaan unfiltered_html akan mendapati iframe dibuang, jadi semak peranan sesiapa yang menyunting halaman itu.

Di mana kemajuan disimpan, dan bagaimana jika pemain mengosongkan data pelayar mereka?

Dalam local storage pelayar, bagi setiap alamat. Mengosongkan data laman memadamkannya, pelayar atau peranti lain bermula kosong, dan menukar domain atau bertukar antara http dan https menetapkannya semula. Tiada akaun dan tiada apa-apa dihantar kepada kami.

Adakah Polar Games menghoskan permainan untuk saya?

Tidak. Kedai menjual fail. Sokongan meliputi soalan tentang memasang dan menggunakannya; penghosan dan pemasangan pada pelayan anda ialah perkhidmatan berasingan yang kami sebut harganya sebelum sebarang kerja.

Langkah seterusnya

Jika anda masih memilih permainan HTML5 untuk laman web anda, setiap halaman item menyenaraikan keperluannya, memautkan manualnya dan membolehkan anda memainkan demo sebelum membayar. Baca bab pemasangan dalam manual dahulu: itulah halaman yang akan anda gunakan untuk kerja dalam panduan ini.

Semak imbas templat permainan HTML5