Slik legger du et HTML5-spill ut på nettstedet ditt

Slik legger du ut et HTML5-spill, i én setning: last opp innholdet i mappen game/ til en vilkårlig webhost som serverer statiske filer, behold undermappene akkurat slik de er, og åpne adressen til mappen i en nettleser. Den ferdige game/-mappen i hver utgave i markedsplassen vår kjører som den er: ingen PHP, ingen database, ingen byggesteg og ingen konto. Webhosten trenger derfor bare å gi filene videre til spillerens nettleser.

Det er hele jobben når alt går riktig. Denne guiden handler om de andre dagene: en tom skjerm, 404-feil, en MIME-typemelding, en iframe som ikke vil vise noe. Vi selger disse malene, så les den som en feltmanual for våre egne pakker. Vi serverte kopier av Gridspark og Velvet Pool fra en enkel lokal server, ødela Gridspark med vilje på flere måter, og leste de offentlige manualene til andre utgaver. Når en påstand kommer fra en manual i stedet for vår egen test, sier vi det.

Hva det innebærer å legge ut et HTML5-spill

En statisk webhost lagrer filer og gir dem til nettlesere på forespørsel. Den kjører aldri spillet ditt; det gjør spillerens nettleser. Derfor er kravene til utgavene våre så enkle: en oppdatert nettleser, en host som serverer statiske filer over HTTP eller HTTPS, og ingen PHP, database eller konto for å spille. Mappen game/ er allerede bygget, så publisering krever ingen npm og ingen byggesteg.

To begrensninger bør du kjenne til før du starter. Noen utgaver har valgfrie deler som ikke er statiske: Zabum og Ricopop lister en valgfri ledertavle som krever PHP 7.4 eller nyere og en skrivbar mappe, og TypeScript-utgavene (Beep Out, Pinloop, Trimora, Twirldrop, Riffvolt, Sunset Rally, Tenguin, Mochi Monsters, Deepforge, Barricade Z og Zabum) trenger Node.js bare hvis du vil redigere kilden og bygge på nytt. Hver manual oppgir versjonen. Velvet Pool, Puttide, Ricopop og Gridspark leveres som ren JavaScript, uten kompileringssteg mellom redigeringene dine og filene du laster opp. Ingen av disse delene trengs for å legge ut spillet slik det leveres. Selve hostingen er heller ikke en del av kjøpet. Vilkårene lister hosting og installasjon på din egen server blant de egne tjenestene vi priser før arbeidet starter; støtten dekker spørsmål om installasjon og bruk av de leverte filene.

Dette må over, og dette blir på datamaskinen din:

• Last opp alt i game/: index.html, skript, stiler, bilder, lyder og skrifter.
• La source/ (den redigerbare utviklerkopien), documentation/ (manualen) og selve ZIP-filen ligge igjen. Zabum-manualen nevner at opplasting av source/ ved en feil er en årsak til 404-feil som main.tsx.
• Behold lisensmerknadene fra tredjeparter som følger med pakken, sammen med produktet, slik vilkårene krever.

Se Gridspark, utgaven vi bruker som eksempel

Slik legger du ut et HTML5-spill: den korte veien fra ZIP til en spillbar side

Disse stegene følger installasjonskapitlene i manualene til Velvet Pool, Puttide, Gridspark og Sunset Rally, pluss kontrollene vi la til etter testing. Gridspark er eksempelet fordi det er utgaven vi serverte og ødela oftest.

1. Pakk ut pakken på datamaskinen. Du finner game/ (mappen du legger ut), source/ (den redigerbare kopien) og documentation/ (manualen).
2. Valgfritt, men billig: test lokalt. Åpne en terminal inne i game/, kjør python -m http.server 8765 og besøk http://localhost:8765/. Spiller det der, er filene i orden, og et senere problem hører til hosten.
3. Velg endelig adresse nå, for eksempel https://your-site.example/games/gridspark/. En undermappe fungerer fordi stiene inne i spillet er relative; Gridspark-manualen foreslår public_html/games/gridspark/.
4. Last innholdet i game/ opp til den mappen med hostens filbehandler eller en FTP-klient, og behold alle undermapper. index.html må havne rett inne i mappen, ikke ett nivå dypere.
5. Åpne mappens adresse over https, med skråstreken til slutt. I Gridspark trykker du på startskjermen (nettlesere venter på et trykk eller klikk før de tillater lyd) og trykker Play.
6. Gjør ett trekk, last siden på nytt og sjekk at menyen nå tilbyr Continue. Da vet du at nettleseren lagrer fremdrift for din adresse.
7. Lenk til mappen fra nettstedet ditt, eller legg den inn på en side (se iframe-delen nedenfor).

En ferdig Gridspark-mappe inneholder index.html, style.css, gridspark.config.js, src/ og assets/ side om side, og manualen ber om at de holdes sammen. Andre utgaver ordner ting annerledes (Velvet Pool har css/ og assets/ i stedet for ett stilark), men regelen er den samme: last opp mappen slik den er.

Hvorfor dobbeltklikk på index.html gir en tom side

Utgavene vi åpnet, laster koden som ES-moduler, og nettlesere nekter å laste moduler fra file://-adresser. Vi åpnet Gridspark rett fra disk i Chromium og fikk en mørk, tom skjerm. Konsollen sa at skriptet ble blokkert av CORS-policyen, med begrunnelsen «Cross origin requests are only supported for protocol schemes», som er den engelske meldingen slik nettleseren viser den, og som peker på protokoller som http og https. Den samme mappen servert av en lokal webserver viste startskjermen med en gang. Manualene til Velvet Pool, Puttide, Sunset Rally og Gridspark sier alle det samme: ikke åpne spillet fra file://.

• Fungerer ikke: file:///C:/Users/you/games/gridspark/index.html
• Fungerer: http://localhost:8765/ fra en lokal testserver, eller https://your-site.example/games/gridspark/ på din host.

Vi testet bare Chromium. Manualene beskriver blokkeringen som noe vanlige nettlesere gjør, så regn med den overalt.

Legg spillet inn på en side med iframe

For å vise spillet inne i en side du allerede har, peker du en iframe på den opplastede mappen. Dette er taggen vi testet:

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

• src: den fulle adressen til mappen, med https og skråstrek til slutt.
• title: et kort navn. Skjermlesere bruker det til å beskrive rammen.
• allow="fullscreen; autoplay": manualene sier at man bør tillate fullskjerm og autoplay i en iframe når det trengs. I testen vår ble fullskjerm deaktivert i en ramme fra en annen adresse uten dette, og Gridspark skjulte bare knappen for fullskjerm. Den eldre allowfullscreen-attributten ga samme resultat som allow. En ramme på samme adresse som siden får fullskjerm uansett.
• Ingen sandbox-attributt. Med sandbox="allow-scripts" alene startet Gridspark aldri: rammen fikk en tom opprinnelse, nettleseren blokkerte spillets eget skript, og lokal lagring ga en sikkerhetsfeil. Å legge til allow-same-origin får det til å virke, men MDN advarer om at dette paret på en ramme fra samme opprinnelse fjerner beskyttelsen, så for et spill du selv legger ut, la sandbox være borte.

Tilpass størrelsen for telefoner

En fast 16:9-boks ser riktig ut på en datamaskin og feil på en telefon. Ved 390 px bredde er en iframe med aspect-ratio 16/9 bare 219 px høy, og Gridsparks meny ble kuttet under knappen Daily challenge. Ved å gi rammen en høyde på 75svh, tre firedeler av skjermhøyden, ble hele menyen synlig. Siden din trenger også en viewport-meta-tagg. De seks pakkene vi åpnet, har en i sin egen index.html, og det er grunnen til at spillet skaleres når det åpnes direkte.

Spillet fungerer på sin egen adresse uten en side rundt, så en vanlig lenke som åpner den adressen, er alltid en gyldig reserveløsning.

Se Velvet Pool, en 3D-utgave som legges inn på samme måte

WordPress og andre sidebyggere

Å legge ut mappen og å vise den på en side er to ulike jobber, og i WordPress bruker de to forskjellige verktøy. Alt nedenfor kommer fra WordPress-dokumentasjonen og utviklerreferansen, ikke fra at vi har kjørt WordPress selv.

1. Last mappen opp med hostens filbehandler eller FTP, inn i nettstedets mappetre (for eksempel en games/-mappe ved siden av WordPress-mappene). Ikke gå via mediebiblioteket: WordPress-koden fjerner .html og .js fra de tillatte opplastingstypene, med mindre brukeren har rettigheten unfiltered_html.
2. Åpne mappens adresse alene før du rører en side. Standardreglene for Apache som WordPress dokumenterer, sender en forespørsel til index.php bare når ingen passende fil eller mappe finnes (det er det !-f- og !-d-betingelsene tester), så en opplastet mappe serveres slik den er.
3. Legg inn iframen i en blokk for egendefinert HTML. WordPress dokumenterer at brukere uten rettigheten unfiltered_html, en Contributor for eksempel, får iframe-taggene fjernet når innlegget lagres. Forsvinner rammen etter lagring, sjekk hvem som redigerte siden.

Andre sidebyggere og CMS-er: vi har ikke testet dem og påstår ingenting om dem. Spillet trenger de samme to tingene overalt: et sted for den opplastede mappen og et innbyggingselement som godtar en iframe. Tilbyr en bygger ingen av delene, legg ut mappen et sted som serverer statiske filer, og lenk til adressen.

Når det ikke starter: en feilsøkingsliste

Åpne nettleserens utviklerverktøy (F12 i de fleste nettlesere på datamaskin) og se på fanene Console og Network før du endrer noe. Hver feil under gir en rød linje der, og filnavnet i den peker oftest på årsaken.

Tom skjerm

Sjekk i denne rekkefølgen: adressen begynner med http:// eller https://; Console har ingen røde linjer; filnavnene har nøyaktig samme store og små bokstaver; og for 3D-utgavene er WebGL2 tilgjengelig (Velvet Pool-manualen sier at maskinvareakselerasjon må slås på). Linux-servere behandler Game.js og game.js som to filer, og Windows gjør det ikke, så en mappe som virket på pc-en din, kan gå i stykker etter opplasting. Manualene til Velvet Pool og Zabum advarer begge om store og små bokstaver.

404 for src/main.js, skrifter eller bilder

Deler av mappen kom ikke frem, eller havnet ett nivå for dypt. Vi reproduserte det ved bare å laste opp index.html, style.css og konfigurasjonsfilen: skjermen ble stående tom, og fanen Network listet 404 for src/main.js og alle skriftene. Last opp de manglende mappene, eller flytt innholdet opp slik at index.html ligger på adressen du åpner. Mangler eller er ødelagte bilder eller lyder, foreslår Zabum-manualen FTP i binary- eller auto-modus, eller opplasting av en ZIP som pakkes ut i hostens filbehandler. En 404 er en manglende fil. Det er ikke et MIME-problem.

Siden lastes uten stiler, med store ikoner

Hvis en omskriving eller innstilling for rene adresser serverer mappen uten den avsluttende skråstreken, løses relative stier ett nivå høyere. Vi reproduserte det med en testserver som returnerte mappesiden uten omdirigering. Nettleseren ba om /games/style.css og /games/src/main.js i stedet for filene inne i /games/gridspark/, fikk 404-feil og tegnet menyen som rene knapper og overdimensjonerte ikoner. Lenk til mappen med skråstreken på slutten, eller pek rett på index.html.

MIME-typefeil på et modulskript

I testen vår sa konsollen: Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/plain". Det er den engelske meldingen, slik nettleseren viser den. Nettlesere er strenge med modulskript. Manualene sier at serveren må sende .js-filer med en JavaScript-MIME-type, og .wasm som application/wasm; Sunset Rally-manualen legger til .mjs. Fanen Network viser Content-Type for hver fil. I byggene vi åpnet, er modulene .js-filer. Legger du til egne .mjs-filer og en eldre Apache-konfigurasjon ikke kjenner dem igjen, løser én linje i .htaccess det, den samme som vårt eget nettsted bruker:

AddType text/javascript .mjs

Apache 2.4.62-typetabellen på testmaskinen vår kobler allerede js og mjs til text/javascript og wasm til application/wasm, så en standardinstallasjon trenger ikke linjen. Andre servere har egne tabeller; spør den som driver din.

Blokkert av CORS-policyen

Modulskript og skrifter som lastes fra en annen adresse, trenger en Access-Control-Allow-Origin-header fra den adressen. I testen vår kunne en side på én port ikke laste et modulskript fra en annen port før den andre serveren sendte headeren. I praksis er løsningen kjedelig: hold spillets filer samlet i én mappe på én adresse, slik pakkene er bygget. Du trenger ikke CORS for å legge spillet inn i en iframe på et annet nettsted, for iframen laster bare spillets adresse. En CORS-feil inne i en innbygging kommer vanligvis fra et sandbox-attributt, som beskrevet over.

Blandet innhold på en https-side

En side servert over https kan ikke laste skript eller iframes over http: nettlesere blokkerer begge, og MDN lister også skrifter og fetch-forespørsler blant de blokkerte typene. Bruk https:// i iframe-src og i enhver full adresse du skriver inn. Spillets egne filer bruker relative stier, så de følger skjemaet til adressen du åpnet. Åpner ikke https-adressen i det hele tatt, slå på sertifikatet i hostens kontrollpanel først.

Iframen sier «refused to connect»

I testen vår logget Chromium denne linjen, med adressen til den blokkerte rammen i de første anførselstegnene: Refused to display 'https://game-host.example/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. Det er den engelske meldingen. Serveren som var vert for spillet, sendte den headeren. SAMEORIGIN tillater innbygging bare fra samme adresse, og DENY tillater det aldri; en frame-ancestors-regel i en Content-Security-Policy-header gjør en lignende jobb. Endre headeren for spillets mappe, eller server siden og spillet fra én adresse.

Ingen lyd i starten

Nettlesere blokkerer lyd til første trykk eller klikk, og derfor åpner Gridspark med en startskjerm du trykker på. Trykk én gang, og sjekk deretter volumet og nettleserens tillatelser.

Se Puttide, golfutgaven med et ferdig bygg klart for webhost

Oppdatere spillet uten å servere en halvgammel versjon

Nettlesere mellomlagrer skript, så etter en opplasting kan du eller en spiller fortsatt se det gamle spillet. Gridspark-manualen gir regelen: ta sikkerhetskopi av endringene dine, erstatt de spillbare filene som ett sett, test, og tving oppdatering (hard refresh) hvis hosten mellomlagrer gamle moduler. Bland aldri gamle og nye moduler. Et spill bygget av mange små filer som importerer hverandre, er feil å oppdatere halvveis.

Utgaver med en service worker har en egen cache. Zabum er en PWA: etter en oppdatering tvinger du frem en oppdatering (Ctrl eller Cmd pluss Shift pluss R). Har du byttet lydfiler, endre cachenavnet i sw.js (manualens eksempel går fra zabum-v5 til zabum-v6) og last opp den filen. Ligger nettstedet ditt bak et CDN, tøm cachen der også. Av manualene vi leste, er Zabum den eneste PWA-en; manualene til Velvet Pool og Puttide sier rett ut at deres ikke er en app som kan installeres og brukes uten nett.

Les endringsloggen før du erstatter filer, og ta vare på en kopi av alt du har redigert. Lagringer ligger i hver spillers nettleser, ikke i mappen du laster opp, så å erstatte filene sletter dem ikke.

Se Zabum, PWA-utgaven med valgfri PHP-ledertavle

Hvor fremdrift lagres, og hva tømming av nettleseren gjør

Disse utgavene har ingen kontoer og ingen serverdatabase. Innstillinger, språk, pågående runde og personlige rekorder ligger i nettleserens lokale lagring, og ingenting sendes til Polar Games. Gridspark-manualen nevner nøklene gridspark.standalone.v1.*; etter ett trekk så vi gridspark.standalone.v1.best og gridspark.standalone.v1.save.

Lagringen hører til adressen (protokoll, vert og port), ikke til mappen. Vi sjekket det på tre måter. En kopi av Gridspark i en annen mappe på samme adresse leste de samme lagrede verdiene. Det samme spillet åpnet som localhost i stedet for 127.0.0.1 startet tomt, og det samme gjorde samme adresse på en annen port. Zabum-manualen legger til at http og https, www og uten www, og underdomener har hver sin lagring.

• Å tømme nettstedsdata eller informasjonskapsler sletter det lagrede spillet og rekordene. I et privat vindu kan fremdriften bare vare så lenge økten varer; spillet fungerer fortsatt når lagring er blokkert.
• En annen nettleser eller enhet starter fra null. Det finnes ingen synkronisering og ingen konto å logge inn på.
• Å endre adressen nullstiller alle: fra http til https, fra www til uten www, eller et nytt domene.
• Å flytte spillet til en annen mappe på samme adresse beholder lagringene, slik vår Gridspark-test viste.

En testliste før du deler lenken

1. Åpne den endelige adressen i nettleserne spillerne bruker: en Chromium-basert (Chrome eller Edge), Firefox og Safari. Våre egne tester kjørte bare i Chromium, så dette er listen du skal kjøre selv.
2. Åpne den på en ekte telefon, først på spillets egen adresse og deretter inne i siden din, i begge retninger.
3. Begrens forbindelsen i utviklerverktøyene og se på første lasting. Gridspark trengte, servert ukomprimert fra vår lokale server, omtrent 0,5 MB og 26 forespørsler for å nå startskjermen. Med Chromium begrenset til 1,6 Mbit/s og 150 ms latens kom skjermen etter omtrent 3 sekunder. Hele game/-mappen er omtrent 3,4 MB på vår kopi; Velvet Pool er omtrent 7,3 MB og Puttide omtrent 15 MB. Strever gamle telefoner, foreslår Zabum-manualen å sjekke at hosten komprimerer filer med gzip eller brotli.
4. Gjør et trekk, last på nytt, og bekreft at Continue og beste poengsum er der.
5. Trykk én gang og sjekk at lyden starter. Stillhet før første trykk er normalt.
6. Åpne et privat vindu. Spillet skal fortsatt kjøre, selv om det glemmer fremdriften når du lukker vinduet.
7. Les fanene Console og Network ved første lasting: ingen røde linjer, ingen 404-feil.
8. I en innbygging, sjekk at knappen for fullskjerm vises og at rammen er høy nok på en telefon.

Ofte stilte spørsmål

Trenger man PHP, en database eller en spesiell server for å legge ut et HTML5-spill?

Ikke for utgavene våre slik de leveres. De er statiske: last opp game/-mappen til en host som serverer filer over HTTP eller HTTPS, og åpne den. Zabum og Ricopop har en valgfri ledertavle som krever PHP 7.4 eller nyere og en skrivbar mappe.

Kan man bare dobbeltklikke på index.html?

Nei. Nettlesere blokkerer spillmoduler på file://, og siden blir stående tom. Åpne spillet via en http- eller https-adresse, enten på hosten din eller en lokal testserver som python -m http.server 8765.

Trenger man HTTPS?

Manualene sier at man bør bruke HTTPS for offentlig publisering. Zabum-manualen sier at Legg til på startskjermen krever det, og en https-side kan ikke legge inn en http-iframe, fordi nettlesere blokkerer det som blandet innhold.

Hvordan legger man spillet inn på en WordPress-side?

Last opp mappen med hostens filbehandler eller FTP, åpne adressen for å bekrefte at den spiller, og legg deretter inn iframen i en blokk for egendefinert HTML. Brukere uten rettigheten unfiltered_html får iframene fjernet, så sjekk rollen til den som redigerer siden.

Hvor lagres fremdriften, og hva skjer hvis spillere tømmer nettleserdataene?

I nettleserens lokale lagring, per adresse. Tømming av nettstedsdata sletter den, en annen nettleser eller enhet starter tom, og å endre domenet eller bytte mellom http og https nullstiller den. Det finnes ingen kontoer, og ingenting sendes til oss.

Legger Polar Games ut spillet for meg?

Nei. Markedsplassen selger filene. Støtten dekker spørsmål om installasjon og bruk av dem; hosting og installasjon på din egen server er egne tjenester som vi priser før arbeidet starter.

Neste steg

Hvis du fortsatt velger HTML5-spill til nettstedet ditt, lister hver produktside kravene, lenker til manualen og lar deg spille demoen før betaling. Les installasjonskapitlet i manualen først: det er siden du bruker til jobben i denne guiden.

Bla i HTML5-spillmalene