HTML5-mängu majutamine oma veebilehel: üleslaadimine ja lahendused

HTML5-mängu majutamine ühes lauses: laadi selle game/-kausta sisu mis tahes veebimajutusse, mis serveerib staatilisi faile, hoia alamkaustad täpselt nii, nagu need on, ja ava kausta aadress brauseris. Meie turul olevad valmis game/-kaustad jooksevad nii, nagu on: PHP-d, andmebaasi, ehitusetappi ega kontot pole vaja, seega peab majutaja andma failid ainult mängija brauserile.

Kui kõik läheb õigesti, on see kogu töö. See juhend räägib teistest päevadest: tühi ekraan, 404-vead, MIME-tüübi teade, iframe, mis ei näita midagi. Me müüme neid malle, nii et loe seda meie pakettide välitööjuhendina. Serveerisime Gridspark'i ja Velvet Pool'i koopiaid ajutisest kohalikust serverist, lõhkusime Gridspark'i tahtlikult mitmel viisil ja lugesime teiste väljaannete avalikke juhendeid. Kui väide pärineb juhendist, mitte meie enda testist, ütleme seda.

Mida HTML5-mängu majutamine tegelikult hõlmab

Staatiline majutaja hoiab faile ja annab need brauseritele päringu peale. Ta ei käivita sinu mängu, seda teeb mängija brauser. Seepärast on meie väljaannete nõuded nii lihtsad: kaasaegne brauser, majutus, mis serveerib staatilisi faile HTTP või HTTPS kaudu, ning ilma PHP-ta, andmebaasita ja kontota mängimiseks. game/-kaust on juba valmis, seega avaldamiseks pole vaja npm-i ega ehitusetappi.

Enne alustamist tuleb teada kaks piirangut. Osal väljaannetel on valikulised osad, mis pole staatilised: Zabum ja Ricopop näitavad valikulist edetabelit, mis vajab PHP 7.4 või uuemat ja kirjutatavat kausta. TypeScripti väljaanded (Beep Out, Pinloop, Trimora, Twirldrop, Riffvolt, Sunset Rally, Tenguin, Mochi Monsters, Deepforge, Barricade Z ja Zabum) vajavad Node.js-i ainult siis, kui tahad lähtekoodi muuta ja uuesti ehitada; iga juhend ütleb versiooni. Velvet Pool, Puttide, Ricopop ja Gridspark on tavaline JavaScript, nii et muudatuste ja üleslaetud failide vahel pole kompileerimisetappi. Mängu avaldamiseks neid samme ei ole vaja. Majutus ei kuulu ka ostu hulka. Poe tingimustes on serveri majutus ja paigaldus eraldi teenused, mida pakume enne tööd; tugi aitab küsimustes faili paigaldamise ja kasutamise kohta.

Mis läheb üles ja mis jääb arvutisse:

• Laadi üles kõik game/ sees: index.html, skriptid, stiilid, pildid, helid ja fondid.
• Jäta välja source/ (muudetav arendajakoopia), documentation/ (juhend) ja ZIP-fail ise. Zabumi juhend loetleb source/ üleslaadimise vea põhjusena, mis annab 404-vead nagu main.tsx.
• Hoia paketiga kaasas tulevad kolmandate osapoolte litsentsiteated oma tootega koos, nagu tingimused nõuavad.

Vaata Gridsparki, väljaannet, mida kasutame näitena

HTML5-mängu majutamine: lühike tee ZIP-ist töötava lehteni

Need sammud järgivad Velvet Pool'i, Puttide'i, Gridspark'i ja Sunset Rally juhendite paigaldusosi ning meie testidest lisatud kontrolle. Gridspark on näiteks, sest seda serveerisime ja lõhkusime kõige sagedamini.

1. Paki pakett arvutis lahti. Leiad game/ (kausta, mille avaldad), source/ (muudetava koopia) ja documentation/ (juhendi).
2. Valikuline, aga odav: testi kohalikult. Ava terminal game/ sees, käivita python -m http.server 8765 ja ava http://localhost:8765/. Kui mäng seal töötab, on failid korras ja hilisem probleem kuulub majutajale.
3. Vali lõplik aadress juba nüüd, näiteks https://sinu-sait.example/games/gridspark/. Alamkaust töötab, sest mängu sisemised teed on suhtelised; Gridsparki juhend soovitab public_html/games/gridspark/.
4. Laadi game/ sisu selle kausta failihalduri või FTP-kliendiga üles, säilitades kõik alamkaustad. index.html peab jääma otse kausta sisse, mitte ühe taseme sügavamale.
5. Ava kausta aadress https kaudu, lõppev kaldkriips kaasas. Gridsparkis puuduta avaekraani (brauserid ootavad heli lubamiseks puudutust või klõpsu) ja vajuta mängu nuppu Play (Mängi).
6. Tee üks käik, lae leht uuesti ja kontrolli, et menüüs on nüüd Continue (Jätka). See tõestab, et brauser salvestab edenemist sinu aadressi jaoks.
7. Lingi kaust oma saidilt või lisa see lehele (vt allolevat iframe'i jaotist).

Valmis Gridsparki kaust sisaldab index.html, style.css, gridspark.config.js, src/ ja assets/ kõrvuti ning juhend palub need koos hoida. Teised väljaanded paigutavad asju teisiti (Velvet Poolil on css/ ja assets/ ühe stiililehe asemel), aga reegel on sama: laadi kaust üles just sellisena, nagu ta on.

Miks topeltklõps index.html-il annab tühja lehe

Väljaanded, mida avasime, laadivad oma koodi ES-moodulitena ja brauserid ei lae mooduleid file:// aadressidelt. Avasime Gridsparki otse kettalt Chromiumis ja saime tumeda, tühja ekraani. Konsool ütles, et skripti blokeeris CORS-poliitika, põhjusega „Cross origin requests are only supported for protocol schemes“, näiteks http ja https. Sama kaust kohaliku veebiserveriga näitas kohe avaekraani. Velvet Pool'i, Puttide'i, Sunset Rally ja Gridsparki juhendid ütlevad sama: ära ava mängu file:// kaudu.

• Ei tööta: file:///C:/Users/sina/games/gridspark/index.html
• Töötab: http://localhost:8765/ kohaliku testserveri kaudu või https://sinu-sait.example/games/gridspark/ sinu majutusel.

Testisime ainult Chromiumit. Juhendid kirjeldavad seda blokeeringut kui midagi, mida tavalised brauserid teevad, seega arvesta sellega kõikjal.

Mängu lisamine lehele iframe'iga

Mängu näitamiseks olemasolevas lehes suuna iframe üleslaaditud kausta peale. See on silt, mille testisime:

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

• src: kausta täielik aadress, https ja lõppeva kaldkriipsuga.
• title: lühike nimi. Ekraanilugejad kasutavad seda raami kirjeldamiseks.
• allow="fullscreen; autoplay": juhendid ütlevad lubada iframe'is täisekraani ja automaatset mängu vajaduse korral. Meie testis keelas raam teisest aadressist ilma selleta täisekraani ja Gridspark peitis oma täisekraani nupu. Vanem allowfullscreen atribuut andis sama tulemuse kui allow. Sama aadressi raam, kus leht asub, saab täisekraani igal juhul.
• Sandbox-atribuuti ei kasutata. Ainult sandbox="allow-scripts" korral Gridspark ei käivitunud: raam sai null-päritolu, brauser blokeeris mängu enda skripti ja kohalik salvestusruum viskas turvavea. Lisamine allow-same-origin töötab, aga MDN hoiatab, et see paar samal päritolul eemaldab kaitse, seega isemajutatud mängu puhul jäta sandbox välja.

Mõõtmine telefonile

Fikseeritud 16:9 kast näeb lauaarvutil õige välja ja telefonil valesti. 390 px laiuse ekraani puhul on aspect-ratio 16/9 iframe vaid 219 px kõrge ja Gridsparki menüü lõigati ära Daily challenge (Päeva väljakutse) nupu alt. Raami kõrgus 75svh, ehk kolm neljandikku ekraani kõrgusest, näitas kogu menüü. Sinu enda lehel peab olema ka viewport-meta silt; kuus paketti, mida avasime, kannavad seda oma index.html-is, mistõttu mäng skaleerub, kui seda otse avada.

Mäng töötab oma aadressil ilma ümbritseva lehteta, seega on lihtne link selle aadressile alati töötav varuvariant.

Vaata Velvet Pool'i, 3D väljaannet, mis lisatakse samamoodi

WordPress ja teised lehe ehitajad

Kausta majutamine ja lehel näitamine on kaks eraldi tööd ja WordPressis kasutatakse nende jaoks kahte erinevat tööriista. Kõik allpool toodud on WordPressi dokumentatsioonist ja arendajaviitest, mitte meie enda WordPressi käitamisest.

1. Laadi kaust majutaja failihalduri või FTP kaudu saidi kaustapuusse (näiteks games/ kaust WordPressi kaustade kõrval). Mitte meediakogu kaudu: WordPressi kood eemaldab .html ja .js failid lubatud üleslaaditavate tüüpide hulgast, kui kasutajal pole unfiltered_html õigust.
2. Ava kausta aadress eraldi, enne kui lehtedega midagi teed. WordPressi dokumenteeritud tavalised Apache reeglid saadavad päringu index.php-le ainult siis, kui vastavat faili ega kausta pole olemas (seda kontrollivad tingimused !-f ja !-d), seega üleslaaditud kaust serveeritakse nagu ta on.
3. Lisa iframe Custom HTML plokki. WordPress dokumenteerib, et kasutajatelt ilma unfiltered_html õiguseta, näiteks Contributor'ilt, eemaldatakse iframe-sildid postituse salvestamisel. Kui raam pärast salvestamist kaob, vaata, kes lehte muutis.

Teised lehe ehitajad ja CMS-id: me pole neid testinud ega esita nende kohta väiteid. Mäng vajab kõikjal sama kahte asja: kohta üleslaaditud kaustale ja elementi, mis aktsepteerib iframe'i. Kui ehitaja ei paku kumbagi, majuta kaust kuhu tahes, mis serveerib staatilisi faile, ja lingi selle aadressile.

Kui ei käivitu: tõrkeotsingu loend

Ava brauseri arendajatööriistad (enamikus lauaarvuti brauserites F12) ja vaata konsooli ning võrgu vahelehti, enne kui midagi muudad. Iga allpool olev viga jätab sinna punase rea ja selle failinimi viitab tavaliselt põhjusele.

Tühi ekraan

Kontrolli selles järjekorras: aadress algab http:// või https:// ega konsoolis pole punaseid ridu; failinimed säilitavad täpse suur- ja väiketähestiku; ning 3D väljaannete puhul on saadaval WebGL2 (Velvet Pool'i juhend ütleb lubada riistvaraline kiirendus). Linuxi majutus käsitleb faile Game.js ja game.js kahena, Windows aga mitte, nii et kaust, mis sinu arvutis töötas, võib pärast üleslaadimist puruneda. Velvet Pool'i ja Zabumi juhendid mõlemad hoiatavad suurte ja väikeste tähtede eest.

404 failile src/main.js, fontidele või piltidele

Osa kaustast ei jõudnud kohale või jõudis ühe taseme liiga sügavale. Taasloime selle, laadides üles ainult index.html, style.css ja seadistusfaili: ekraan jäi tühjaks ja võrgu vaheleht näitas 404 src/main.js ja iga fondi kohta. Laadi puuduvad kaustad üles või too sisu üles nii, et index.html asuks aadressil, mida avad. Kui pildid või helid puuduvad või on katkised, soovitab Zabumi juhend FTP-d binaarses või automaatses režiimis või ZIP-faili üleslaadimist ja lahtipakkimist majutaja failihalduris. 404 on puuduv fail, mitte MIME-probleem.

Leht laadib ilma stiilita, suurte ikoonidega

Kui ümberkirjutamise või puhaste URL-ide seadistus serveerib kausta ilma lõppeva kaldkriipsuta, lahenevad suhtelised teed ühe taseme võrra kõrgemal. Taasloime selle testserveriga, mis tagastab kaustalehe ilma ümbersuunamiseta. Brauser küsis /games/style.css ja /games/src/main.js, mitte faile kaustas /games/gridspark/, sai 404-vead ja joonistas menüü tavaliste nuppudena ja liiga suurte ikoonidena. Lingi kaustale lõppeva kaldkriipsuga või suuna otse index.html-ile.

MIME-tüübi viga moodulskriptil

Meie testis ütles konsool: Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/plain". Brauserid on moodulskriptidega ranged. Juhendid ütlevad, et server peab saatma .js-failid JavaScripti MIME-tüübiga ja .wasm-failid tüübiga application/wasm; Sunset Rally juhend lisab .mjs. Võrgu vaheleht näitab iga faili Content-Type'i. Avatud koostudes on moodulid .js-failid. Kui lisad oma .mjs-failid ja vanem Apache seadistus neid ei seosta, parandab selle üks rida .htaccess-failis, sama, mida kasutab meie oma sait:

AddType text/javascript .mjs

Meie testmasina Apache 2.4.62 tüübitabel seostab juba js ja mjs tüübiga text/javascript ning wasm tüübiga application/wasm, nii et tavaline paigaldus seda rida ei vaja. Teised serverid hoiavad oma tabeleid; küsi, kes sinu oma haldab.

Blokeeritud CORS-poliitikaga

Moodulskriptid ja fondid, mis laetakse teisest aadressist, vajavad selle aadressi Access-Control-Allow-Origin päist. Meie testis ei saanud üks leht ühelt pordilt laadida moodulskripti teiselt pordilt enne, kui teine server päise saatis. Praktikas on parandus tüütu: hoia mängu failid koos ühes kaustas ühel aadressil, nagu paketid on ehitatud. CORS-i pole vaja, et mängu lisada iframe'iga teisele saidile, sest iframe lihtsalt laeb mängu aadressi. CORS-viga manustamises tuleneb tavaliselt sandbox-atribuudist, mida kirjeldasime ülal.

Segasisu https-lehel

https-leht ei saa laadida skripte ega iframe'e üle http: brauserid blokeerivad mõlemad ja MDN loetleb blokeeritud tüüpide hulgas ka fondid ja fetch-päringud. Kasuta https:// iframe'i src-is ja igas täielikus aadressis, mille kirjutad. Mängu enda failid kasutavad suhtelisi teid, seega järgivad nad avatud aadressi skeemi. Kui https-aadress ei avane üldse, luba sertifikaat esmalt majutaja paneelis.

iframe ütleb „refused to connect“

Meie testis logis Chromium selle rea, kus blokeeritud raami aadress on esimeste jutumärkide vahel: Refused to display 'https://game-host.example/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. Mängu majutav server saatis selle päise. SAMEORIGIN lubab manustamist ainult samalt aadressilt ja DENY ei luba seda kunagi; Content-Security-Policy päises olev frame-ancestors reegel teeb sarnast tööd. Muuda päist mängu kausta jaoks või serveeri leht ja mäng ühelt aadressilt.

Esialgu pole heli

Brauserid blokeerivad heli kuni esimese puudutuse või klõpsuni, seepärast avaneb Gridspark puudutusega alustamise ekraaniga. Puuduta üks kord, seejärel kontrolli helitugevust ja brauseri lube.

Vaata Puttide'i, golfi väljaannet valmis majutuseks

Mängu uuendamine ilma poolvana versioonita

Brauserid puhverdavad skripte, seega pärast üleslaadimist võib sina või mängija ikka vaadata vana mängu. Gridsparki juhend annab reegli: varunda oma muudatused, asenda mängitavad failid ühe komplektina, testi ja tee kõvasti värskendus (hard-refresh), kui majutaja puhverdab vanu mooduleid. Ära sega vana ja uut moodulit. Mäng paljudest väikestest, üksteist importivatest failidest on vale asi pooleldi uuendada.

Väljaannetel, millel on service worker, on oma puhver. Zabum on PWA: pärast uuendust tee kõvasti värskendus (Ctrl või Cmd pluss Shift pluss R). Kui asendasid helifailid, muuda puhvri nime failis sw.js (juhendi näide läheb zabum-v5-lt zabum-v6-le) ja laadi see fail üles. Kui sinu sait asub CDN-i taga, tühjenda ka selle puhver. Loetud juhenditest on Zabum ainus PWA; Velvet Pool'i ja Puttide'i juhendid ütlevad otse, et nende oma ei ole installitav võrguühenduseta rakendus.

Loe muudatuste logi enne failide asendamist ja hoia koopiat kõigest, mida muutsid. Salvestused elavad iga mängija brauseris, mitte kaustas, mille üles laadid, seega failide asendamine neid ei kustuta.

Vaata Zabumi, PWA väljaannet valikulise PHP edetabeliga

Kuhu edenemine salvestatakse ja mida brauseri andmete kustutamine teeb

Need väljaanded ei oma kontosid ega serveri andmebaasi. Seaded, keel, praegune mäng ja isiklikud rekordid asuvad brauseri kohalikus salvestusruumis (local storage) ning midagi ei saadeta Polar Gamesile. Gridsparki juhend nimetab võtmed gridspark.standalone.v1.*; pärast ühte käiku nägime gridspark.standalone.v1.best ja gridspark.standalone.v1.save.

Salvestusruum kuulub aadressile (protokoll, host ja port), mitte kaustale. Kontrollisime seda kolmel viisil. Gridsparki koopia teises kaustas samal aadressil luges samu salvestatud väärtusi. Sama mäng, avatud localhost'ina 127.0.0.1 asemel, algas tühjana, samuti sama aadress teisel pordil. Zabumi juhend lisab, et http ja https, www ja mitte-www ning alamdomeenid omavad kõik oma salvestusruumi.

• Saidi andmete või küpsiste kustutamine kustutab salvestatud mängu ja rekordid. Privaatses aknas võib edenemine kesta ainult seansi, mäng töötab aga edasi, kui salvestusruum on blokeeritud.
• Teine brauser või teine seade algab nullist. Sünkroonimist ega sisselogimiskontot ei ole.
• Aadressi muutmine lähtestab kõik: http https-iks, www mitte-www-ks, uus domeen.
• Mängu kolimine samal aadressil teise kausta säilitab salvestused, nagu näitas meie Gridsparki test.

Kontrollnimekiri enne lingi jagamist

1. Ava lõplik aadress brauserites, mida mängijad kasutavad: Chromiumi-põhine (Chrome või Edge), Firefox ja Safari. Meie enda testid jooksid ainult Chromiumis, seega on see nimekiri, mille sina peaksid läbi tegema.
2. Ava see päris telefonis, esmalt mängu enda aadressil ja seejärel oma lehel, mõlemas asendis.
3. Piira ühendust arendajatööriistades ja jälgi esimest laadimist. Gridspark, serveeritud tihendamata meie kohalikust serverist, vajas avaekraanini umbes 0,5 MB ja 26 päringut. Kui Chromium oli piiratud 1,6 Mbit/s ja 150 ms viitega, ilmus ekraan umbes 3 sekundi pärast. Kogu game/ kaust on meie koopias umbes 3,4 MB; Velvet Pool on umbes 7,3 MB ja Puttide umbes 15 MB. Kui vanad telefonid vaevlevad, soovitab Zabumi juhend kontrollida, kas majutaja tihendab faile gzip või brotli abil.
4. Tee käik, lae uuesti ja kinnita, et Continue ja parim skoor on alles.
5. Puuduta üks kord ja kontrolli, kas heli algab. Vaikus enne esimest puudutust on normaalne.
6. Ava privaatne aken. Mäng peaks ikka töötama, isegi kui see unustab edenemise, kui akna sulged.
7. Loe konsooli ja võrgu vahelehti esimesel laadimisel: punaseid ridu ega 404-vigu ei tohi olla.
8. Manustatud mängus kontrolli, et täisekraani nupp ilmub ja raam on telefonil piisavalt kõrge.

Korduma kippuvad küsimused

Kas HTML5-mängu majutamiseks on vaja PHP-d, andmebaasi või erilist serverit?

Meie väljaannete puhul, nagu need on, mitte. Need on staatilised: laadi game/ kaust majutajale, mis serveerib faile HTTP või HTTPS kaudu, ja ava see. Zabumil ja Ricopop'il on valikuline edetabel, mis vajab PHP 7.4 või uuemat ja kirjutatavat kausta.

Kas võin lihtsalt topeltklõpsata index.html-il?

Ei. Brauserid blokeerivad mängu mooduleid file:// aadressil ja leht jääb tühjaks. Ava mäng http või https aadressi kaudu, kas oma majutusel või kohaliku testserveri kaudu, näiteks python -m http.server 8765.

Kas vajan HTTPS-i?

Juhendid ütlevad, et avalikuks majutamiseks kasuta HTTPS-i. Zabumi juhend ütleb, et „Lisa avaekraanile“ (Add to home screen) vajab seda, ja https-leht ei saa manustada http-iframe'i, sest brauserid blokeerivad selle segasisuna.

Kuidas lisada mäng WordPressi lehele?

Laadi kaust majutaja failihalduri või FTP kaudu, ava selle aadress, et kinnitada, et see mängib, ja lisa iframe Custom HTML plokki. Kasutajatel ilma unfiltered_html õiguseta eemaldatakse iframe'id, seega kontrolli, millist rolli omab lehe muutja.

Kus edenemine salvestatakse ja mis juhtub, kui mängijad kustutavad brauseri andmed?

Brauseri kohalikus salvestusruumis, aadressi kaupa. Saidi andmete kustutamine kustutab selle, teine brauser või seade algab tühjalt ja domeeni muutmine või http ja https vahel lülitamine lähtestab selle. Kontosid pole ja midagi ei saadeta meile.

Kas Polar Games majutab mängu minu eest?

Ei. Pood müüb faile. Tugi aitab küsimustes nende paigaldamise ja kasutamise kohta; majutus ja paigaldus oma serverisse on eraldi teenused, mida pakume enne tööd.

Järgmine samm

Kui alles valid HTML5-mänge oma veebilehele, loetleb iga üksuse leht nõuded, lingib juhendi ja lubab enne maksmist demo mängida. Loe enne juhendi paigaldusosa: see on leht, mida kasutad selle juhendi töö jaoks.

Sirvi HTML5-mängumalle