Anleitung

HTML5-Spiel auf der eigenen Website hosten: Anleitung

Eine praktische Anleitung für einen statischen Spielordner: wohin er gehört, wie Sie ihn öffnen, wie Sie ihn in eine Seite einbinden und was Sie prüfen, wenn er nicht startet.

Polarzinho schiebt eine Spielschachtel durch eine leuchtende Röhre von einem Server zu einem Browserfenster, in dem ein Spiel mit schwebenden Inseln läuft.

Ein HTML5-Spiel hosten, in einem Satz: Laden Sie den Inhalt seines Ordners game/ auf einen beliebigen Webhost hoch, der statische Dateien ausliefert, behalten Sie die Unterordner genau so bei, und öffnen Sie die Adresse des Ordners in einem Browser. Der sofort hostbare Ordner game/ jeder Edition in unserem Marketplace läuft unverändert: ohne PHP, ohne Datenbank, ohne Build-Schritt und ohne Konto, der Host muss die Dateien also nur an den Browser des Spielers übergeben.

Das ist die ganze Arbeit, wenn alles gut geht. Dieser Ratgeber handelt von den anderen Tagen: ein leerer Bildschirm, 404-Fehler, eine MIME-Typ-Meldung, ein iframe, das nichts anzeigen will. Wir verkaufen diese Templates; lesen Sie ihn also als Feldhandbuch für unsere eigenen Pakete. Wir haben Kopien von Gridspark und Velvet Pool von einem Wegwerf-Server im lokalen Netz ausgeliefert, Gridspark absichtlich auf mehrere Arten kaputt gemacht und die öffentlichen Handbücher anderer Editionen gelesen. Wenn eine Aussage aus einem Handbuch statt aus unserem eigenen Test stammt, sagen wir das.

Was das Hosten eines HTML5-Spiels tatsächlich bedeutet

Ein statischer Host speichert Dateien und gibt sie auf Anfrage an Browser weiter. Er führt Ihr Spiel nie aus; das tut der Browser des Spielers. Deshalb lesen sich die Voraussetzungen unserer Editionen so schlicht: ein aktueller Browser, ein Host, der statische Dateien per HTTP oder HTTPS ausliefert, und kein PHP, keine Datenbank und kein Konto zum Spielen. Der Ordner game/ ist bereits gebaut, das Veröffentlichen braucht also weder npm noch einen Build-Schritt.

Zwei Grenzen sollten Sie vor dem Start kennen. Manche Editionen haben optionale Teile, die nicht statisch sind: Zabum und Ricopop führen eine optionale Rangliste auf, die PHP 7.4 oder neuer und einen beschreibbaren Ordner braucht, und die TypeScript-Editionen (Beep Out, Pinloop, Trimora, Twirldrop, Riffvolt, Sunset Rally, Tenguin, Mochi Monsters, Deepforge, Barricade Z und Zabum) brauchen Node.js nur, wenn Sie den Quellcode bearbeiten und neu bauen möchten; die Version nennt jeweils das Handbuch. Velvet Pool, Puttide, Ricopop und Gridspark liefern einfaches JavaScript, ohne Kompilierschritt zwischen Ihren Änderungen und den Dateien, die Sie hochladen. Nichts davon ist nötig, um das Spiel wie geliefert zu veröffentlichen. Und das Hosting selbst gehört nicht zum Kauf. Die Shop-Bedingungen führen Hosting und die Installation auf Ihrem Server unter den gesonderten Leistungen auf, die wir vor Arbeitsbeginn beziffern; der Support umfasst Fragen zur Installation und Nutzung der gelieferten Dateien.

Was hochgeladen wird und was auf Ihrem Rechner bleibt:

  • Laden Sie alles hoch, was in game/ liegt: index.html, Skripte, Stile, Bilder, Sounds und Schriftarten.
  • Lassen Sie source/ (die bearbeitbare Entwicklerkopie), documentation/ (das Handbuch) und das ZIP selbst weg. Das Handbuch von Zabum nennt das versehentliche Hochladen von source/ als Ursache für 404-Fehler wie main.tsx.
  • Behalten Sie die Lizenzhinweise von Drittanbietern, die dem Paket beiliegen, bei Ihrem Produkt, wie es die Bedingungen verlangen.

Gridspark ansehen, die Edition, die wir als Beispiel nutzen

So hosten Sie ein HTML5-Spiel: der kurze Weg vom ZIP zur spielbaren Seite

Diese Schritte folgen den Installationskapiteln der Handbücher von Velvet Pool, Puttide, Gridspark und Sunset Rally, ergänzt um die Prüfungen, die wir nach unseren Tests hinzugefügt haben. Gridspark dient als Beispiel, weil es die Edition ist, die wir am häufigsten ausgeliefert und kaputt gemacht haben.

  1. Entpacken Sie das Paket auf Ihrem Rechner. Sie finden game/ (den Ordner, den Sie veröffentlichen), source/ (die bearbeitbare Kopie) und documentation/ (das Handbuch).
  2. Optional, aber günstig: lokal testen. Öffnen Sie ein Terminal in game/, führen Sie python -m http.server 8765 aus und rufen Sie http://localhost:8765/ auf. Spielt es dort, sind die Dateien in Ordnung, und jedes spätere Problem liegt beim Host.
  3. Legen Sie jetzt die endgültige Adresse fest, zum Beispiel https://your-site.example/games/gridspark/. Ein Unterordner funktioniert, weil die Pfade im Spiel relativ sind; das Handbuch von Gridspark schlägt public_html/games/gridspark/ vor.
  4. Laden Sie den Inhalt von game/ mit dem Dateimanager Ihres Hosts oder einem FTP-Client in diesen Ordner hoch und behalten Sie jeden Unterordner bei. index.html muss direkt im Ordner landen, nicht eine Ebene tiefer.
  5. Öffnen Sie die Adresse des Ordners per https, mit dem abschließenden Schrägstrich. Bei Gridspark tippen Sie auf den Startbildschirm (Browser warten auf eine Berührung oder einen Klick, bevor sie Audio zulassen) und drücken Play.
  6. Machen Sie einen Zug, laden Sie die Seite neu und prüfen Sie, ob das Menü nun Continue anbietet. Das beweist, dass der Browser den Fortschritt für Ihre Adresse speichert.
  7. Verlinken Sie den Ordner von Ihrer Website oder binden Sie ihn in eine Seite ein (siehe den iframe-Abschnitt unten).

Ein fertiger Gridspark-Ordner enthält index.html, style.css, gridspark.config.js, src/ und assets/ nebeneinander, und das Handbuch bittet Sie, sie zusammenzuhalten. Andere Editionen sind anders aufgebaut (Velvet Pool hat css/ und assets/ statt eines einzelnen Stylesheets), aber die Regel ist dieselbe: Laden Sie den Ordner so hoch, wie er kommt.

Warum ein Doppelklick auf index.html eine leere Seite zeigt

Die Editionen, die wir geöffnet haben, laden ihren Code als ES-Module, und Browser weigern sich, Module von file://-Adressen zu laden. Wir haben Gridspark direkt von der Festplatte in Chromium geöffnet und einen dunklen, leeren Bildschirm erhalten. Die Konsole meldete, dass das Skript durch die CORS-Richtlinie blockiert wurde, mit der Begründung „Cross origin requests are only supported for protocol schemes“ wie http und https. Derselbe Ordner, von einem lokalen Webserver ausgeliefert, zeigte sofort den Startbildschirm. Die Handbücher von Velvet Pool, Puttide, Sunset Rally und Gridspark sagen alle dasselbe: Öffnen Sie das Spiel nicht über file://.

  • Funktioniert nicht: file:///C:/Users/you/games/gridspark/index.html
  • Funktioniert: http://localhost:8765/ von einem lokalen Testserver oder https://your-site.example/games/gridspark/ auf Ihrem Host.

Wir haben nur Chromium getestet. Die Handbücher beschreiben die Sperre als etwas, das gängige Browser tun; rechnen Sie also überall damit.

Das Spiel mit einem iframe in eine Seite einbinden

Um das Spiel in einer bestehenden Seite zu zeigen, richten Sie ein iframe auf den hochgeladenen Ordner. Das ist das Tag, das wir getestet haben:

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

  • src: die vollständige Adresse des Ordners, mit https und abschließendem Schrägstrich.
  • title: ein kurzer Name. Screenreader nutzen ihn, um den Frame zu beschreiben.
  • allow="fullscreen; autoplay": Die Handbücher sagen, bei Bedarf in einem iframe Vollbild und Autoplay zu erlauben. In unserem Test hatte ein Frame von einer anderen Adresse ohne dieses Attribut das Vollbild deaktiviert, und Gridspark blendete seinen Vollbild-Button einfach aus. Das ältere Attribut allowfullscreen ergab dasselbe Ergebnis wie allow. Ein Frame auf derselben Adresse wie die Seite bekommt das Vollbild ohnehin.
  • Kein sandbox-Attribut. Mit sandbox="allow-scripts" allein startete Gridspark nie: Der Frame bekommt einen Null-Ursprung, der Browser blockierte das eigene Skript des Spiels, und der lokale Speicher warf einen Sicherheitsfehler. Mit allow-same-origin funktioniert es, aber MDN warnt, dass dieses Paar bei einem Frame mit gleichem Ursprung den Schutz aufhebt; lassen Sie sandbox bei einem Spiel, das Sie selbst hosten, daher weg.

Für Handys dimensionieren

Ein fester 16:9-Kasten sieht am Desktop richtig und am Handy falsch aus. Bei 390 px Breite ist ein iframe mit aspect-ratio 16/9 nur 219 px hoch, und das Menü von Gridspark wurde unter dem Button Daily challenge abgeschnitten. Mit einer Frame-Höhe von 75svh, also drei Vierteln der Bildschirmhöhe, war das ganze Menü zu sehen. Ihre eigene Seite braucht außerdem ein Viewport-Meta-Tag; die sechs Pakete, die wir geöffnet haben, tragen alle eines in ihrer eigenen index.html, weshalb das Spiel skaliert, wenn man es direkt öffnet.

Zwei Handybildschirme nebeneinander, die jeweils eine Seite mit dem Gridspark-Startmenü in einem iframe zeigen: links ein niedriger 16:9-Frame, der das Menü abschneidet, rechts ein hoher Frame, der das ganze Menü zeigt.
Dasselbe Spiel, dieselbe Handybreite. Links: ein 16:9-iframe. Rechts: ein Frame mit 75svh Höhe.

Das Spiel funktioniert unter seiner eigenen Adresse ohne eine Seite drumherum; ein einfacher Link auf diese Adresse ist also immer eine gültige Ausweichlösung.

Velvet Pool ansehen, eine 3D-Edition, die sich genauso einbinden lässt

WordPress und andere Website-Baukästen

Den Ordner zu hosten und ihn auf einer Seite zu zeigen sind zwei getrennte Aufgaben, und in WordPress nutzen sie zwei verschiedene Werkzeuge. Alles Folgende stammt aus der WordPress-Dokumentation und der Entwicklerreferenz, nicht daraus, dass wir WordPress selbst betrieben haben.

  1. Laden Sie den Ordner mit dem Dateimanager Ihres Hosts oder per FTP in den Ordnerbaum der Website hoch (zum Beispiel ein Ordner games/ neben den WordPress-Ordnern). Nicht über die Mediathek: Der Code von WordPress entfernt .html und .js aus den erlaubten Upload-Typen, sofern der Benutzer nicht die Berechtigung unfiltered_html hat.
  2. Öffnen Sie die Adresse des Ordners für sich allein, bevor Sie eine Seite anfassen. Die von WordPress dokumentierten Standard-Apache-Regeln leiten eine Anfrage nur dann an index.php weiter, wenn keine passende Datei oder kein passender Ordner existiert (das prüfen die Bedingungen !-f und !-d); ein hochgeladener Ordner wird also unverändert ausgeliefert.
  3. Fügen Sie das iframe in einem Block „Eigenes HTML“ ein. WordPress dokumentiert, dass bei Benutzern ohne die Berechtigung unfiltered_html, etwa einem Mitarbeiter, die iframe-Tags beim Speichern des Beitrags entfernt werden. Verschwindet der Frame nach dem Speichern, prüfen Sie, wer die Seite bearbeitet hat.

Andere Website-Baukästen und CMS: Wir haben sie nicht getestet und machen zu keinem eine Aussage. Das Spiel braucht überall dasselbe zweierlei, einen Ort für den hochgeladenen Ordner und ein Einbettungselement, das ein iframe akzeptiert. Bietet ein Baukasten keines von beiden, hosten Sie den Ordner irgendwo, wo statische Dateien ausgeliefert werden, und verlinken Sie seine Adresse.

Wenn es nicht startet: eine Liste zur Fehlersuche

Öffnen Sie die Entwicklerwerkzeuge des Browsers (F12 in den meisten Desktop-Browsern) und sehen Sie sich die Reiter Konsole und Netzwerk an, bevor Sie etwas ändern. Jeder der folgenden Fehler hinterlässt dort eine rote Zeile, und der darin genannte Dateiname weist meist auf die Ursache.

Ein leerer Bildschirm

Prüfen Sie in dieser Reihenfolge: Die Adresse beginnt mit http:// oder https://; die Konsole hat keine roten Zeilen; die Dateinamen behalten ihre genaue Groß- und Kleinschreibung; und bei den 3D-Editionen ist WebGL2 verfügbar (das Handbuch von Velvet Pool sagt, die Hardwarebeschleunigung zu aktivieren). Linux-Hosts behandeln Game.js und game.js als zwei Dateien, Windows nicht; ein Ordner, der auf Ihrem PC funktionierte, kann nach dem Hochladen also kaputtgehen. Die Handbücher von Velvet Pool und Zabum warnen beide vor der Schreibweise.

404 für src/main.js, Schriftarten oder Bilder

Ein Teil des Ordners ist nicht angekommen oder eine Ebene zu tief gelandet. Wir haben es reproduziert, indem wir nur index.html, style.css und die Konfigurationsdatei hochgeladen haben: Der Bildschirm blieb leer, und der Reiter Netzwerk listete 404 für src/main.js und jede Schriftart. Laden Sie die fehlenden Ordner hoch oder verschieben Sie den Inhalt nach oben, sodass index.html unter der Adresse liegt, die Sie öffnen. Fehlen Bilder oder Sounds oder sind sie beschädigt, empfiehlt das Handbuch von Zabum FTP im Binär- oder Automodus oder das Hochladen eines ZIP, das Sie im Dateimanager des Hosts entpacken. Ein 404 ist eine fehlende Datei. Es ist kein MIME-Problem.

Die Seite lädt ohne Stil, mit riesigen Icons

Wenn eine Umschreibe- oder Clean-URL-Einstellung den Ordner ohne abschließenden Schrägstrich ausliefert, werden relative Pfade eine Ebene höher aufgelöst. Wir haben es mit einem Testserver reproduziert, der die Ordnerseite ohne Weiterleitung zurückgibt. Der Browser fragte /games/style.css und /games/src/main.js statt der Dateien in /games/gridspark/ ab, bekam 404 und zeichnete das Menü als rohe Buttons und überdimensionierte Icons. Verlinken Sie den Ordner mit abschließendem Schrägstrich oder zeigen Sie direkt auf index.html.

Ein Browserfenster mit einer weißen Seite, unformatierten grauen Buttons und überdimensionierten schwarzen Icons: das Gridspark-Menü ohne sein Stylesheet.
Gridspark, geöffnet unter einer Adresse ohne abschließenden Schrägstrich auf einem Server, der nicht weiterleitet: kein Stylesheet, kein Skript.

Ein MIME-Typ-Fehler bei einem Modul-Skript

In unserem Test lautete die Konsole: Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/plain". Browser sind bei Modul-Skripten streng. Die Handbücher sagen, der Server müsse .js-Dateien mit einem JavaScript-MIME-Typ und .wasm als application/wasm ausliefern; das Handbuch von Sunset Rally ergänzt .mjs. Der Reiter Netzwerk zeigt den Content-Type jeder Datei. In den Builds, die wir geöffnet haben, sind die Module .js-Dateien. Fügen Sie eigene .mjs-Dateien hinzu und kennt eine ältere Apache-Konfiguration sie nicht, behebt eine Zeile in .htaccess das, dieselbe, die unsere eigene Website nutzt:

AddType text/javascript .mjs

Die Apache-2.4.62-Typtabelle auf unserem Testrechner ordnet js und mjs bereits text/javascript und wasm application/wasm zu, eine Standardinstallation braucht die Zeile also nicht. Andere Server haben eigene Tabellen; fragen Sie, wer Ihren betreibt.

Durch die CORS-Richtlinie blockiert

Modul-Skripte und Schriftarten, die von einer anderen Adresse geladen werden, brauchen von dieser Adresse einen Header Access-Control-Allow-Origin. In unserem Test konnte eine Seite auf einem Port ein Modul-Skript von einem anderen Port nicht laden, bis der zweite Server den Header sendete. In der Praxis ist die Lösung unspektakulär: Halten Sie die Dateien des Spiels in einem Ordner unter einer Adresse zusammen, so wie die Pakete gebaut sind. CORS brauchen Sie nicht, um das Spiel per iframe auf einer anderen Website einzubinden, denn das iframe lädt einfach die Adresse des Spiels. Ein CORS-Fehler innerhalb einer Einbettung stammt meist von einem sandbox-Attribut, wie oben beschrieben.

Mixed Content auf einer https-Seite

Eine per https ausgelieferte Seite kann keine Skripte oder iframes per http laden: Browser blockieren beides, und MDN führt auch Schriftarten und Fetch-Anfragen unter den blockierten Typen auf. Verwenden Sie https:// im iframe-src und in jeder vollständigen Adresse, die Sie getippt haben. Die eigenen Dateien des Spiels nutzen relative Pfade, folgen also dem Schema der Adresse, die Sie geöffnet haben. Lässt sich die https-Adresse gar nicht öffnen, aktivieren Sie zuerst das Zertifikat im Panel Ihres Hosts.

Das iframe meldet „refused to connect“

In unserem Test protokollierte Chromium diese Zeile, mit der Adresse des blockierten Frames in den ersten Anführungszeichen: Refused to display 'https://game-host.example/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. Der Server, der das Spiel hostet, sendete diesen Header. SAMEORIGIN erlaubt das Einbetten nur von derselben Adresse, und DENY erlaubt es nie; eine frame-ancestors-Regel in einem Content-Security-Policy-Header leistet Ähnliches. Ändern Sie den Header für den Ordner des Spiels oder liefern Sie Seite und Spiel von einer Adresse aus.

Zuerst kein Ton

Browser blockieren Audio bis zum ersten Tippen oder Klicken, weshalb Gridspark mit einem Tippen-zum-Starten-Bildschirm beginnt. Tippen Sie einmal und prüfen Sie dann die Lautstärke und die Berechtigungen des Browsers.

Puttide ansehen, die Golf-Edition mit sofort hostbarem Build

Das Spiel aktualisieren, ohne eine halb alte Version auszuliefern

Browser speichern Skripte im Cache, sodass Sie oder ein Spieler nach einem Upload noch das alte Spiel sehen können. Das Handbuch von Gridspark nennt die Regel: Ihre Änderungen sichern, die spielbaren Dateien als einen Satz ersetzen, testen und hart neu laden, wenn der Host alte Module zwischenspeichert. Mischen Sie keine alten und neuen Module. Ein Spiel aus vielen kleinen Dateien, die einander importieren, ist das Falsche, um es halb zu aktualisieren.

Editionen mit einem Service Worker führen einen eigenen Cache. Zabum ist eine PWA: Laden Sie nach einem Update hart neu (Strg oder Cmd plus Umschalt plus R). Haben Sie Audiodateien ersetzt, ändern Sie den Cache-Namen in sw.js (das Beispiel des Handbuchs geht von zabum-v5 auf zabum-v6) und laden Sie diese Datei hoch. Liegt Ihre Website hinter einem CDN, leeren Sie auch dessen Cache. Von den Handbüchern, die wir gelesen haben, ist Zabum die einzige PWA; die Handbücher von Velvet Pool und Puttide sagen ausdrücklich, dass ihre keine installierbare Offline-App ist.

Lesen Sie das Änderungsprotokoll, bevor Sie Dateien ersetzen, und behalten Sie eine Kopie von allem, was Sie bearbeitet haben. Speicherstände liegen im Browser jedes Spielers, nicht im Ordner, den Sie hochladen; das Ersetzen der Dateien löscht sie also nicht.

Zabum ansehen, die PWA-Edition mit optionaler PHP-Rangliste

Wo der Fortschritt gespeichert wird und was das Löschen der Browserdaten bewirkt

Diese Editionen haben keine Konten und keine Server-Datenbank. Einstellungen, Sprache, der laufende Durchgang und persönliche Bestwerte liegen im lokalen Speicher des Browsers, und nichts wird an Polar Games gesendet. Das Handbuch von Gridspark nennt die Schlüssel gridspark.standalone.v1.*; nach einem Zug sahen wir gridspark.standalone.v1.best und gridspark.standalone.v1.save.

Das Hauptmenü von Gridspark mit einem Button Continue, einem Link New game, dem Button Daily challenge und einem gespeicherten Bestwert von 3.257.
Bei einem erneuten Besuch bietet das Menü Continue und den gespeicherten Bestwert an. Beides wird aus dem Browser gelesen.

Der Speicher gehört zur Adresse (Protokoll, Host und Port), nicht zum Ordner. Wir haben es auf drei Arten geprüft. Eine Kopie von Gridspark in einem anderen Ordner derselben Adresse las dieselben gespeicherten Werte. Dasselbe Spiel, geöffnet als localhost statt 127.0.0.1, startete leer, ebenso dieselbe Adresse an einem anderen Port. Das Handbuch von Zabum ergänzt, dass http und https, www und nicht-www sowie Subdomains jeweils einen eigenen Speicher haben.

  • Das Löschen von Websitedaten oder Cookies löscht das gespeicherte Spiel und die Rekorde. In einem privaten Fenster hält der Fortschritt womöglich nur für die Sitzung; das Spiel läuft weiter, wenn der Speicher blockiert ist.
  • Ein anderer Browser oder ein anderes Gerät beginnt bei null. Es gibt weder Synchronisierung noch ein Konto zum Anmelden.
  • Eine Adressänderung setzt alle zurück: http auf https, www auf nicht-www, eine neue Domain.
  • Der Umzug des Spiels in einen anderen Ordner derselben Adresse behält die Speicherstände, wie unser Gridspark-Test zeigte.

Eine Testcheckliste, bevor Sie den Link teilen

  1. Öffnen Sie die endgültige Adresse in den Browsern Ihrer Spieler: einem Chromium-basierten (Chrome oder Edge), Firefox und Safari. Unsere eigenen Tests liefen nur in Chromium, dies ist also die Liste für Ihren Durchlauf.
  2. Öffnen Sie sie auf einem echten Handy, zuerst unter der eigenen Adresse des Spiels und dann in Ihrer Seite, in beiden Ausrichtungen.
  3. Drosseln Sie die Verbindung in den Entwicklerwerkzeugen und beobachten Sie das erste Laden. Gridspark, unkomprimiert von unserem lokalen Server ausgeliefert, brauchte etwa 0,5 MB und 26 Anfragen bis zum Startbildschirm. Mit auf 1,6 Mbit/s und 150 ms Latenz gedrosseltem Chromium erschien der Bildschirm nach etwa 3 Sekunden. Der ganze Ordner game/ umfasst bei unserer Kopie etwa 3,4 MB; Velvet Pool etwa 7,3 MB und Puttide etwa 15 MB. Haben alte Handys Mühe, schlägt das Handbuch von Zabum vor, zu prüfen, ob Ihr Host Dateien mit gzip oder brotli komprimiert.
  4. Machen Sie einen Zug, laden Sie neu und bestätigen Sie, dass Continue und der Bestwert da sind.
  5. Tippen Sie einmal und prüfen Sie, ob das Audio startet. Stille vor dem ersten Tippen ist normal.
  6. Öffnen Sie ein privates Fenster. Das Spiel sollte weiterlaufen, auch wenn es den Fortschritt beim Schließen vergisst.
  7. Lesen Sie beim ersten Laden die Reiter Konsole und Netzwerk: keine roten Zeilen, keine 404.
  8. Prüfen Sie bei einer Einbettung, dass der Vollbild-Button erscheint und der Frame am Handy hoch genug ist.

FAQ

Brauche ich PHP, eine Datenbank oder einen besonderen Server, um ein HTML5-Spiel zu hosten?

Nicht für unsere Editionen wie geliefert. Sie sind statisch: Laden Sie den Ordner game/ auf einen Host hoch, der Dateien per HTTP oder HTTPS ausliefert, und öffnen Sie ihn. Zabum und Ricopop haben eine optionale Rangliste, die PHP 7.4 oder neuer und einen beschreibbaren Ordner braucht.

Kann ich einfach auf index.html doppelklicken?

Nein. Browser blockieren Spielmodule unter file://, und die Seite bleibt leer. Öffnen Sie das Spiel über eine http- oder https-Adresse, entweder Ihren Host oder einen lokalen Testserver wie python -m http.server 8765.

Brauche ich HTTPS?

Die Handbücher sagen, für öffentliches Hosting HTTPS zu verwenden. Das Handbuch von Zabum sagt, dass „Zum Startbildschirm hinzufügen“ es braucht, und eine https-Seite kann kein http-iframe einbetten, weil Browser das als Mixed Content blockieren.

Wie füge ich das Spiel einer WordPress-Seite hinzu?

Laden Sie den Ordner mit dem Dateimanager Ihres Hosts oder per FTP hoch, öffnen Sie seine Adresse, um zu bestätigen, dass er spielt, und fügen Sie dann das iframe in einem Block „Eigenes HTML“ ein. Bei Benutzern ohne die Berechtigung unfiltered_html werden iframes entfernt; prüfen Sie also die Rolle dessen, der die Seite bearbeitet.

Wo wird der Fortschritt gespeichert, und was, wenn Spieler ihre Browserdaten löschen?

Im lokalen Speicher des Browsers, pro Adresse. Das Löschen der Websitedaten löscht ihn, ein anderer Browser oder ein anderes Gerät beginnt leer, und ein Wechsel der Domain oder zwischen http und https setzt ihn zurück. Es gibt keine Konten, und nichts wird an uns gesendet.

Hostet Polar Games das Spiel für mich?

Nein. Der Shop verkauft die Dateien. Der Support umfasst Fragen zu deren Installation und Nutzung; Hosting und die Installation auf Ihrem Server sind gesonderte Leistungen, die wir vor Arbeitsbeginn beziffern.

Nächster Schritt

Wenn Sie noch HTML5-Spiele für Ihre Website auswählen, führt jede Produktseite ihre Voraussetzungen auf, verlinkt ihr Handbuch und lässt Sie die Demo vor dem Bezahlen spielen. Lesen Sie zuerst das Installationskapitel des Handbuchs: Es ist die Seite, die Sie für die Aufgabe in diesem Ratgeber brauchen werden.

Die HTML5-Spiel-Templates durchstöbern