Cum găzduiți un joc HTML5 pe site: încărcare și iframe

Cum găzduiți un joc HTML5, într-o propoziție: încărcați conținutul folderului game/ pe orice server web care livrează fișiere statice, păstrați subfolderele exact cum sunt și deschideți adresa folderului într-un browser. Folderul game/ gata de găzduit al fiecărei ediții din magazinul nostru rulează așa cum este: fără PHP, fără bază de date, fără pas de build și fără cont, deci serverul trebuie doar să trimită fișiere către browserul jucătorului.

Aceasta este întreaga sarcină când totul merge bine. Acest ghid se ocupă de celelalte zile: un ecran gol, erori 404, un mesaj despre tipul MIME, un iframe care refuză să afișeze ceva. Vindem aceste șabloane, deci citiți-l ca pe un manual de teren pentru propriile noastre pachete. Am servit copii ale Gridspark și Velvet Pool de pe un server local temporar, am stricat intenționat Gridspark în mai multe moduri și am citit manualele publice ale altor ediții. Când o afirmație provine dintr-un manual și nu din testul nostru, o spunem explicit.

Ce presupune, de fapt, găzduirea unui joc HTML5

Un server static stochează fișiere și le trimite browserelor la cerere. Nu rulează niciodată jocul; îl rulează browserul jucătorului. De aceea cerințele edițiilor noastre sunt atât de simple: un browser actual, un server care livrează fișiere statice prin HTTP sau HTTPS și niciun PHP, bază de date sau cont ca să jucați. Folderul game/ este deja construit, deci publicarea lui nu necesită npm și niciun pas de build.

Două limite de cunoscut înainte de a începe. Unele ediții au părți opționale care nu sunt statice: Zabum și Ricopop enumeră un clasament opțional care necesită PHP 7.4 sau mai nou și un folder cu drept de scriere, iar edițiile TypeScript (Beep Out, Pinloop, Trimora, Twirldrop, Riffvolt, Sunset Rally, Tenguin, Mochi Monsters, Deepforge, Barricade Z și Zabum) au nevoie de Node.js doar dacă vreți să editați sursa și să reconstruiți; fiecare manual indică versiunea. Velvet Pool, Puttide, Ricopop și Gridspark sunt JavaScript simplu, fără etapă de compilare între modificările dumneavoastră și fișierele pe care le încărcați. Nimic din toate acestea nu este necesar ca să publicați jocul așa cum a fost livrat. Iar găzduirea în sine nu face parte din achiziție. Termenii magazinului enumeră găzduirea și instalarea pe serverul dumneavoastră printre serviciile separate, cotate înainte de orice lucru; suportul acoperă întrebările despre instalarea și utilizarea fișierelor livrate.

Ce se urcă pe server și ce rămâne pe calculator:

• Încărcați tot ce se află în game/: index.html, scripturi, stiluri, imagini, sunete și fonturi.
• Lăsați afară source/ (copia editabilă pentru dezvoltatori), documentation/ (manualul) și arhiva ZIP în sine. Manualul Zabum enumeră încărcarea din greșeală a source/ drept o cauză a erorilor 404, precum cele pentru main.tsx.
• Păstrați alături de produsul dumneavoastră notele de licență ale componentelor terțe care vin cu pachetul, așa cum cer termenii.

Vedeți Gridspark, ediția pe care o folosim ca exemplu

Cum găzduiți un joc HTML5: drumul scurt de la ZIP la pagina jucabilă

Pașii de mai jos urmează capitolele de instalare ale manualelor Velvet Pool, Puttide, Gridspark și Sunset Rally, plus verificările pe care le-am adăugat după testare. Gridspark este exemplul pentru că este ediția pe care am servit-o și am stricat-o cel mai des.

1. Dezarhivați pachetul pe calculator. Veți găsi game/ (folderul pe care îl publicați), source/ (copia editabilă) și documentation/ (manualul).
2. Opțional, dar ieftin: testați local. Deschideți un terminal în game/, rulați python -m http.server 8765 și vizitați http://localhost:8765/. Dacă jocul rulează acolo, fișierele sunt în regulă, iar orice problemă ulterioară ține de server.
3. Alegeți acum adresa finală, de exemplu https://site-dumneavoastra.exemplu/games/gridspark/. Un subfolder funcționează, pentru că drumurile din interiorul jocului sunt relative; manualul Gridspark sugerează public_html/games/gridspark/.
4. Încărcați conținutul folderului game/ în acel folder, cu managerul de fișiere al serverului sau cu un client FTP, păstrând fiecare subfolder. index.html trebuie să ajungă direct în folder, nu cu un nivel mai adânc.
5. Deschideți adresa folderului prin https, cu bara oblică finală. În Gridspark atingeți ecranul de start (browserele așteaptă un tap sau un clic înainte să permită sunetul) și apăsați Play.
6. Faceți o mutare, reîncărcați pagina și verificați că meniul oferă acum Continue. Asta dovedește că browserul salvează progresul pentru adresa dumneavoastră.
7. Puneți un link către folder pe site sau încorporați-l într-o pagină (vezi secțiunea despre iframe de mai jos).

Un folder Gridspark finalizat conține index.html, style.css, gridspark.config.js, src/ și assets/ unul lângă altul, iar manualul vă cere să le păstrați împreună. Celelalte ediții sunt organizate altfel (Velvet Pool are css/ și assets/ în loc de o singură foaie de stil), dar regula este aceeași: încărcați folderul așa cum vine.

De ce dublu clic pe index.html dă o pagină goală

Edițiile pe care le-am deschis își încarcă codul ca module ES, iar browserele refuză să încarce module din adrese file://. Am deschis Gridspark direct de pe disc în Chromium și am primit un ecran întunecat, gol. Consola spunea că scriptul a fost blocat de politica CORS, cu motivul „Cross origin requests are only supported for protocol schemes” (cererile între origini sunt acceptate doar pentru scheme de protocol precum http și https). Același folder servit de un server web local afișa imediat ecranul de start. Manualele Velvet Pool, Puttide, Sunset Rally și Gridspark spun toate același lucru: nu deschideți jocul din file://.

• Nu funcționează: file:///C:/Users/dumneavoastra/games/gridspark/index.html
• Funcționează: http://localhost:8765/ de pe un server local de test sau https://site-dumneavoastra.exemplu/games/gridspark/ pe serverul dumneavoastră.

Am testat doar în Chromium. Manualele descriu blocajul ca pe ceva ce fac browserele obișnuite, deci planificați-l peste tot.

Încorporați jocul într-o pagină cu un iframe

Ca să afișați jocul într-o pagină pe care o aveți deja, indicați un iframe spre folderul încărcat. Acesta este tag-ul pe care l-am testat:

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

• src: adresa completă a folderului, cu https și bara oblică finală.
• title: un nume scurt. Cititoarele de ecran îl folosesc ca să descrie cadrul.
• allow="fullscreen; autoplay": manualele spun să permiteți ecranul complet și redarea automată într-un iframe, când este nevoie. În testul nostru, un cadru de la altă adresă fără acest atribut avea ecranul complet dezactivat, iar Gridspark pur și simplu a ascuns butonul de ecran complet. Atributul mai vechi allowfullscreen a dat același rezultat ca allow. Un cadru de pe aceeași adresă cu pagina primește ecranul complet în ambele cazuri.
• Fără atributul sandbox. Cu sandbox="allow-scripts" singur, Gridspark nu a pornit niciodată: cadrul primește o origine nulă, browserul a blocat scriptul propriu al jocului, iar stocarea locală a aruncat o eroare de securitate. Adăugarea lui allow-same-origin face să funcționeze, dar MDN avertizează că această pereche, pe un cadru de aceeași origine, anulează protecția; deci, pentru un joc pe care îl găzduiți singur, lăsați sandbox afară.

Dimensionarea pentru telefoane

O casetă fixă 16:9 arată bine pe desktop și greșit pe telefon. La 390 px lățime, un iframe cu aspect-ratio 16/9 are doar 219 px înălțime, iar meniul Gridspark a fost tăiat sub butonul Daily challenge. Dând cadrului o înălțime de 75svh, adică trei sferturi din înălțimea ecranului, a apărut tot meniul. Pagina dumneavoastră are nevoie și de un tag meta viewport; cele șase pachete pe care le-am deschis îl au în propriul index.html, motiv pentru care jocul se scalează când este deschis direct.

Jocul funcționează la propria adresă, fără nicio pagină în jur, deci un link simplu care deschide acea adresă este mereu o variantă de rezervă validă.

Vedeți Velvet Pool, o ediție 3D care se încorporează în același fel

WordPress și alte constructoare de site-uri

Găzduirea folderului și afișarea lui într-o pagină sunt două sarcini separate, iar în WordPress se folosesc două unelte diferite. Tot ce urmează provine din documentația WordPress și din referința pentru dezvoltatori, nu din rularea WordPress de către noi.

1. Încărcați folderul cu managerul de fișiere sau cu FTP al serverului, în arborele de foldere al site-ului (de exemplu un folder games/ lângă folderele WordPress). Nu prin Biblioteca de media: codul WordPress scoate .html și .js din tipurile de fișiere permise, cu excepția cazului în care utilizatorul are capabilitatea unfiltered_html.
2. Deschideți adresa folderului separat, înainte să atingeți vreo pagină. Regulile implicite Apache documentate de WordPress trimit o cerere către index.php doar când nu există un fișier sau un folder care să corespundă (asta testează condițiile !-f și !-d), deci un folder încărcat este servit așa cum este.
3. Adăugați iframe-ul într-un bloc HTML personalizat. WordPress documentează că utilizatorilor fără capabilitatea unfiltered_html, de exemplu unui Contributor, tag-urile iframe li se elimină la salvarea articolului. Dacă cadrul dispare după salvare, verificați cine a editat pagina.

Alte constructoare de site-uri și alte CMS-uri: nu le-am testat și nu facem afirmații despre niciunul. Jocul are nevoie peste tot de aceleași două lucruri: un loc pentru folderul încărcat și un element de încorporare care acceptă un iframe. Dacă un constructor nu oferă niciunul dintre ele, găzduiți folderul oriunde se livrează fișiere statice și puneți un link către adresa lui.

Când nu pornește: o listă de depanare

Deschideți uneltele de dezvoltator ale browserului (F12 în majoritatea browserelor de desktop) și uitați-vă în filele Console și Network înainte să schimbați ceva. Fiecare defect de mai jos lasă o linie roșie acolo, iar numele fișierului din ea indică de obicei cauza.

Un ecran gol

Verificați în această ordine: adresa începe cu http:// sau https://; Consola nu are linii roșii; numele fișierelor păstrează exact literele mari și mici; iar, pentru edițiile 3D, WebGL2 este disponibil (manualul Velvet Pool spune să activați accelerarea hardware). Serverele Linux tratează Game.js și game.js ca două fișiere, iar Windows nu, deci un folder care a funcționat pe PC-ul dumneavoastră se poate strica după încărcare. Manualele Velvet Pool și Zabum avertizează ambele asupra literelor mari și mici.

404 pentru src/main.js, fonturi sau imagini

O parte din folder nu a ajuns, sau a ajuns cu un nivel prea adânc. Am reprodus asta încărcând doar index.html, style.css și fișierul de configurare: ecranul a rămas gol, iar fila Network a listat 404 pentru src/main.js și pentru fiecare font. Încărcați folderele lipsă sau mutați conținutul mai sus, astfel încât index.html să stea la adresa pe care o deschideți. Dacă imaginile sau sunetele lipsesc ori sunt corupte, manualul Zabum sugerează FTP în modul binary sau auto, ori încărcarea unui ZIP și dezarhivarea lui în managerul de fișiere al serverului. Un 404 înseamnă un fișier lipsă. Nu este o problemă de MIME.

Pagina se încarcă fără stiluri, cu pictograme uriașe

Dacă o regulă de rescriere sau o setare de URL curat livrează folderul fără bara oblică finală, căile relative se rezolvă cu un nivel mai sus. Am reprodus asta cu un server de test care returnează pagina folderului fără redirecționare. Browserul a cerut /games/style.css și /games/src/main.js în loc de fișierele din interiorul /games/gridspark/, a primit 404 și a desenat meniul ca butoane brute și pictograme supradimensionate. Puneți linkul către folder cu bara oblică finală sau indicați direct index.html.

O eroare de tip MIME la un script de modul

În testul nostru, consola spunea: Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/plain". Browserele sunt stricte cu scripturile de modul. Manualele spun că serverul trebuie să trimită fișierele .js cu un tip MIME JavaScript și .wasm ca application/wasm; manualul Sunset Rally adaugă .mjs. Fila Network arată Content-Type pentru fiecare fișier. În construcțiile pe care le-am deschis, modulele sunt fișiere .js. Dacă adăugați propriile fișiere .mjs și o configurație Apache mai veche nu le mapează, o linie în .htaccess repară problema, aceeași pe care o folosește propriul nostru site:

AddType text/javascript .mjs

Tabela de tipuri Apache 2.4.62 de pe mașina noastră de test mapează deja js și mjs la text/javascript, iar wasm la application/wasm, deci o instalare standard nu are nevoie de linia respectivă. Celelalte servere își păstrează propriile tabele; întrebați cine administrează al dumneavoastră.

Blocat de politica CORS

Scripturile de modul și fonturile încărcate de la o altă adresă au nevoie de un antet Access-Control-Allow-Origin de la acea adresă. În testul nostru, o pagină pe un port nu a putut încărca un script de modul de pe alt port până când al doilea server nu a trimis antetul. În practică, remedierea este simplă: păstrați fișierele jocului împreună, într-un folder, pe o singură adresă, cum sunt construite pachetele. Nu aveți nevoie de CORS ca să încorporați jocul într-un iframe pe alt site, pentru că iframe-ul pur și simplu încarcă adresa jocului. O eroare CORS în interiorul unui iframe vine de obicei de la atributul sandbox, descris mai sus.

Conținut mixt pe o pagină https

O pagină servită prin https nu poate încărca scripturi sau iframe-uri prin http: browserele blochează ambele, iar MDN enumeră printre tipurile blocate și fonturile și cererile fetch. Folosiți https:// în src-ul iframe-ului și în orice adresă completă pe care o scrieți. Fișierele jocului folosesc căi relative, deci urmează schema adresei deschise. Dacă adresa https nu se deschide deloc, activați mai întâi certificatul din panoul de control al serverului.

Iframe-ul afișează „refused to connect”

În testul nostru, Chromium a înregistrat această linie, cu adresa cadrului blocat în primele ghilimele: Refused to display 'https://game-host.example/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. Serverul care găzduia jocul trimitea acel antet. SAMEORIGIN permite încorporarea doar de pe aceeași adresă, iar DENY nu o permite niciodată; o regulă frame-ancestors dintr-un antet Content-Security-Policy face un lucru similar. Schimbați antetul pentru folderul jocului sau serviți pagina și jocul de la aceeași adresă.

Fără sunet la început

Browserele blochează sunetul până la primul tap sau clic, de aceea Gridspark se deschide pe un ecran de start cu tap. Atingeți o dată, apoi verificați volumul și permisiunile browserului.

Vedeți Puttide, ediția de golf cu un build gata de găzduit

Actualizarea jocului fără să servați o versiune pe jumătate veche

Browserele păstrează în cache scripturile, deci după o încărcare dumneavoastră sau un jucător poate încă vedea jocul vechi. Manualul Gridspark dă regula: salvați-vă modificările, înlocuiți fișierele jucabile ca un set, testați și faceți reîmprospătare forțată dacă serverul păstrează în cache modulele vechi. Nu amestecați module vechi cu cele noi. Un joc format din multe fișiere mici care se importă unul pe altul este genul greșit de joc pe care să îl actualizați pe jumătate.

Edițiile cu service worker păstrează un cache propriu. Zabum este o aplicație PWA: după o actualizare, faceți reîmprospătare forțată (Ctrl sau Cmd + Shift + R). Dacă ați înlocuit fișiere audio, schimbați numele cache-ului din sw.js (exemplul din manual trece de la zabum-v5 la zabum-v6) și încărcați acel fișier. Dacă site-ul dumneavoastră stă în spatele unui CDN, goliți și cache-ul acestuia. Dintre manualele pe care le-am citit, Zabum este singura PWA; manualele Velvet Pool și Puttide spun direct că ediția lor nu este o aplicație offline care se poate instala.

Citiți jurnalul de modificări înainte să înlocuiți fișiere și păstrați o copie a oricărui lucru pe care l-ați editat. Salvările se află în browserul fiecărui jucător, nu în folderul pe care îl încărcați, deci înlocuirea fișierelor nu le șterge.

Vedeți Zabum, ediția PWA cu clasament PHP opțional

Unde se salvează progresul și ce se întâmplă când ștergeți datele browserului

Aceste ediții nu au conturi și nicio bază de date pe server. Setările, limba, runda curentă și recordurile personale stau în stocarea locală a browserului, iar nimic nu este trimis către Polar Games. Manualul Gridspark numește cheile gridspark.standalone.v1.*; după o mutare am văzut gridspark.standalone.v1.best și gridspark.standalone.v1.save.

Stocarea aparține adresei (protocol, gazdă și port), nu folderului. Am verificat în trei moduri. O copie a Gridspark într-un alt folder de pe aceeași adresă a citit aceleași valori salvate. Același joc deschis ca localhost în loc de 127.0.0.1 a pornit gol, la fel ca aceeași adresă pe un alt port. Manualul Zabum adaugă că http și https, www și non-www, precum și subdomeniile, au fiecare propria stocare.

• Ștergerea datelor site-ului sau a cookie-urilor șterge jocul salvat și recordurile. Într-o fereastră privată, progresul poate dura doar cât sesiunea; jocul rulează în continuare când stocarea este blocată.
• Un alt browser sau un alt dispozitiv pornește de la zero. Nu există sincronizare și nu există cont în care să vă autentificați.
• Schimbarea adresei resetează totul pentru toată lumea: de la http la https, de la www la non-www, la un domeniu nou.
• Mutarea jocului într-un alt folder de pe aceeași adresă păstrează salvările, cum a arătat testul nostru cu Gridspark.

O listă de testare înainte să trimiteți linkul

1. Deschideți adresa finală în browserele folosite de jucătorii dumneavoastră: unul bazat pe Chromium (Chrome sau Edge), Firefox și Safari. Testele noastre au rulat doar în Chromium, deci aceasta este lista pe care o rulați dumneavoastră.
2. Deschideți-l pe un telefon real, întâi la adresa proprie a jocului și apoi în pagina dumneavoastră, în ambele orientări.
3. Limitați conexiunea în uneltele de dezvoltator și urmăriți prima încărcare. Gridspark, servit necomprimat de pe serverul nostru local, a avut nevoie de aproximativ 0,5 MB și 26 de cereri ca să ajungă la ecranul de start. Cu Chromium limitat la 1,6 Mbit/s și o latență de 150 ms, ecranul a apărut după aproximativ 3 secunde. Întregul folder game/ are circa 3,4 MB pe copia noastră; Velvet Pool are circa 7,3 MB, iar Puttide circa 15 MB. Dacă telefoanele vechi se chinuie, manualul Zabum sugerează să verificați dacă serverul comprimă fișierele cu gzip sau brotli.
4. Faceți o mutare, reîncărcați și confirmați că Continue și cel mai bun scor sunt acolo.
5. Atingeți o dată și verificați că sunetul pornește. Tăcerea dinaintea primului tap este normală.
6. Deschideți o fereastră privată. Jocul ar trebui să ruleze în continuare, chiar dacă uită progresul când o închideți.
7. Citiți filele Console și Network la o primă încărcare: fără linii roșii, fără 404.
8. Într-un embed, verificați că butonul de ecran complet apare și că cadrul este suficient de înalt pe telefon.

Întrebări frecvente

Am nevoie de PHP, de o bază de date sau de un server special ca să găzduiesc un joc HTML5?

Nu pentru edițiile noastre așa cum sunt livrate. Sunt statice: încărcați folderul game/ pe un server care livrează fișiere prin HTTP sau HTTPS și deschideți-l. Zabum și Ricopop au un clasament opțional care necesită PHP 7.4 sau mai nou și un folder cu drept de scriere.

Pot doar să dau dublu clic pe index.html?

Nu. Browserele blochează modulele jocului pe file://, iar pagina rămâne goală. Deschideți jocul printr-o adresă http sau https, fie de pe serverul dumneavoastră, fie de pe un server local de test, precum python -m http.server 8765.

Am nevoie de HTTPS?

Manualele spun să folosiți HTTPS pentru găzduire publică. Manualul Zabum spune că Add to home screen îl cere, iar o pagină https nu poate încorpora un iframe http, pentru că browserele îl blochează ca conținut mixt.

Cum adaug jocul pe o pagină WordPress?

Încărcați folderul cu managerul de fișiere sau cu FTP al serverului, deschideți adresa lui ca să confirmați că rulează, apoi adăugați iframe-ul într-un bloc HTML personalizat. Utilizatorilor fără capabilitatea unfiltered_html li se elimină iframe-urile, deci verificați rolul celui care editează pagina.

Unde se salvează progresul și ce se întâmplă dacă jucătorii își șterg datele browserului?

În stocarea locală a browserului, pe adresă. Ștergerea datelor site-ului le șterge, un alt browser sau dispozitiv pornește gol, iar schimbarea domeniului sau trecerea între http și https le resetează. Nu există conturi, iar nimic nu ajunge la noi.

Polar Games găzduiește jocul în locul meu?

Nu. Magazinul vinde fișierele. Suportul acoperă întrebările despre instalarea și utilizarea lor; găzduirea și instalarea pe propriul server sunt servicii separate, cotate înainte de orice lucru.

Pasul următor

Dacă alegeți încă jocuri HTML5 pentru site-ul dumneavoastră, fiecare pagină de articol enumeră cerințele, leagă manualul și vă lasă să jucați demonstrația înainte de plată. Citiți mai întâi capitolul de instalare din manual: este pagina pe care o veți folosi pentru sarcina din acest ghid.

Răsfoiți șabloanele de jocuri HTML5