HTML5-Spiele auf der Firmenwebsite einbinden

Ein Spiel lässt sich auf drei Wegen auf die Website eines Unternehmens bringen: Sie binden per iframe ein Spiel ein, das jemand anderes hostet. Sie laden die Spieldateien in Ihren eigenen Webspace hoch und zeigen sie auf einer Seite an. Oder Sie lizenzieren ein Spiel als Paket und veröffentlichen es als Ihr eigenes. Der erste Weg ist am schnellsten ausprobiert. Der zweite gibt Ihnen die meiste Kontrolle. Der dritte ist richtig, wenn das Spiel dauerhaft Ihre Marke tragen soll.

Dieser Leitfaden richtet sich an Unternehmen, Agenturen und Website-Betreiber mit WordPress, Wix, einer individuell entwickelten Website, einem Intranet oder einem Portal. Er vergleicht die Optionen, liefert eine Checkliste für die Zeit vor dem Livegang und führt auf, was ein Polar-Games-Paket enthält. Es handelt sich um allgemeine Informationen, nicht um Rechtsberatung.

Drei Wege, ein Spiel auf Ihre Website zu bringen

1. Per iframe einbinden. Ein anderswo gehostetes Spiel erscheint in einem Rahmen auf Ihrer Seite. Sie schreiben nur ein Tag, doch das Spiel, seine Updates und seine Verfügbarkeit bleiben beim Betreiber des Hostings.
2. Dateien selbst hosten. Sie laden den Spielordner in Ihren Webspace hoch und rufen ihn unter Ihrer eigenen Adresse auf, entweder allein oder in einem iframe auf einer Ihrer Seiten. Für unsere Pakete genügt ein Hosting, das statische Dateien ausliefert: Zum Spielen sind weder PHP noch eine Datenbank oder ein Konto nötig.
3. Ein Spiel als Paket lizenzieren. Das Studio liefert einen fertig hostbaren Ordner, den bearbeitbaren Quellcode und ein Handbuch, mit einer Lizenz für ein Endprodukt. Sie hosten es selbst und dürfen Code, Grafik und Audio innerhalb dieses Produkts anpassen.

HTML5-Spielvorlagen ansehen

iframe oder eigenes Hosting: der Vergleich

• Geschwindigkeit: Der Rahmen lädt das Spiel vom Server des Anbieters, Ihre Seite hängt also von diesem Server ab. Dateien auf Ihrem eigenen Hosting laden von einer Adresse, die Sie kontrollieren.
• Kontrolle: Bei eigenem Hosting bestimmen Sie Adresse, umgebende Seite, Caching und Updates. Bei der Einbettung eines Dritten entscheidet der Anbieter und kann das Spiel ändern oder entfernen.
• Cookies und Einwilligung: Ein Spiel von einer Drittadresse veranlasst Ihre Besucher, diese Adresse aufzurufen, und dieser Dritte kann eigene Cookies setzen oder Besuche messen. Selbst gehostete Dateien stammen von Ihrer eigenen Domain. Werbung und Analysewerkzeuge können überall, wo sie laufen, eine Einwilligung erfordern: Lassen Sie die für Sie geltenden Regeln von einer qualifizierten Fachperson prüfen.
• Suche: Verlassen Sie sich nicht darauf, dass ein Spiel in einem iframe Text für Ihre Seite liefert. Schreiben Sie eine eigene Überschrift, eine kurze Beschreibung, die Spielanleitung und setzen Sie einen Link um das Spiel.

Das iframe-Tag, Attribut für Attribut

Eine typische Einbettung für ein Spiel, das Sie selbst hosten. Die Hinweise zu den Attributen stammen aus der iframe-Referenz von MDN.

<iframe src="https://ihre-website.example/spiele/mein-spiel/" title="Mein Spiel" loading="lazy" allow="fullscreen" width="960" height="540" style="border:0"></iframe>

• title: Laut MDN können Nutzer von Screenreadern damit den Inhalt des Rahmens benennen, und es sollte diesen Inhalt knapp beschreiben.
• allow="fullscreen": MDN definiert das ältere Attribut allowfullscreen als allow="fullscreen *". Ohne diese Berechtigung kann ein Rahmen von einer anderen Adresse nicht in den Vollbildmodus wechseln.
• sandbox: Lassen Sie es bei einem Spiel, das Sie selbst hosten, weg. MDN rät dringend davon ab, allow-scripts zusammen mit allow-same-origin in einem Rahmen mit gleichem Ursprung zu verwenden, weil der Rahmen dann seine eigene Sandbox entfernen kann.
• Leerer Rahmen oder verweigerte Verbindung: Der Server, der das Spiel hostet, kann X-Frame-Options senden (DENY blockiert jedes Einbetten, SAMEORIGIN erlaubt nur den gleichen Ursprung) oder eine frame-ancestors-Regel in einem Content-Security-Policy-Header, die MDN stattdessen empfiehlt. Ändern Sie den Header für den Spielordner oder liefern Sie Seite und Spiel unter derselben Adresse aus.

Checkliste vor der Veröffentlichung

1. HTTPS durchgängig. Eine https-Seite kann kein http-iframe laden: MDN zählt Skripte und iframes zu den Anfragen, die Browser als Mixed Content blockieren.
2. Smartphones. Öffnen Sie das Spiel auf einem echten Smartphone, in beiden Ausrichtungen, innerhalb Ihrer Seite.
3. Ton. Laut MDN erlauben Browser hörbare automatische Wiedergabe in der Regel erst, nachdem der Besucher mit der Seite interagiert hat. Rechnen Sie mit Stille bis zum ersten Tippen und gestalten Sie den Startbildschirm um ein Tippen herum.
4. Vollbild und Sprachen. Prüfen Sie, ob die Vollbild-Schaltfläche im Rahmen erscheint und ob die Sprachen des Spiels Ihre Zielgruppe abdecken.
5. Barrierefreiheit im Grundsatz. Geben Sie dem Rahmen einen Titel, bieten Sie einen Link an, der das Spiel allein öffnet, prüfen Sie Schriftgröße und Kontrast und nennen Sie die Steuerung. Halten Sie wesentliche Informationen als normalen Seitentext vor, nicht im Spiel.
6. Datenschutz und Einwilligung. Listen Sie auf, was auf der Seite läuft: Werbeskripte, Analysewerkzeuge, Schriften von anderen Hosts. Aktualisieren Sie Ihre Datenschutzerklärung. Wenn Sie Werbung oder Analysewerkzeuge einsetzen, klären Sie mit Ihrer Beratung, ob das örtliche Recht eine Einwilligung verlangt.

Was ein Polar-Games-Paket enthält

Jede Edition führt ihren Inhalt auf ihrer Seite im Marketplace auf, und vor dem Kauf können Sie eine Live-Demo spielen. In der Regel erhalten Sie:

• Einen fertig hostbaren Ordner game/. Als Voraussetzungen nennen unsere Editionen einen aktuellen Browser und ein beliebiges HTTP(S)-Hosting, das statische Dateien ausliefert. Das Hosting braucht weder Datenbank noch Build-Schritt. Zwei Editionen, Zabum und Ricopop, haben eine optionale Bestenliste, die PHP 7.4 oder neuer benötigt.
• Einen bearbeitbaren Ordner source/ und ein Handbuch in documentation/ mit Kapiteln zu Installation und Anpassung.

Fünf Editionen, darunter Gridspark und Velvet Pool, sind in reinem JavaScript geschrieben. Die übrigen sind in TypeScript geschrieben, und einige nutzen Bibliotheken wie Three.js oder Phaser, doch der Ordner game/ ist bereits gebaut. Node.js brauchen Sie nur, um den Quellcode zu bearbeiten und neu zu bauen.

Nicht enthalten: Hosting, Installation auf Ihrem Server, Anpassung, neue Funktionen sowie die Anbindung von SDKs oder Portalen. Die Bedingungen führen diese Punkte als gesonderte Leistungen auf, die vor Arbeitsbeginn angeboten werden. Der Support umfasst Fragen zur Installation und Nutzung der gelieferten Dateien sowie reproduzierbare Fehler, für 6 Monate, mit der Verlängerung für 12.

Gridspark ansehen, eine Puzzle-Edition in reinem JavaScript

Velvet Pool ansehen, eine 3D-Billard-Edition

Lizenz, Rechnung und Mengenrabatt

• Eine Lizenz deckt ein Endprodukt ab, Ihr eigenes oder das eines Kunden. Eine Agentur, die für mehrere Kunden arbeitet, braucht für das Produkt jedes Kunden eine eigene Lizenz.
• Die Lizenz ist unbefristet und endet nicht, wenn der Support ausläuft. Besucher dürfen kostenlos oder über Werbemonetarisierung spielen.
• Auf Wunsch stellen wir eine brasilianische Nota Fiscal aus, für Kunden im Ausland eine Rechnung.
• Wer mehrere Artikel zusammen kauft, erhält einen Rabatt auf die Listenpreise: 5 % bei zwei, 10 % bei drei, 15 % bei vier, 20 % ab fünf.

Wann ein Spiel mit Ihrer Marke sinnvoll ist

Eine fertige Vorlage genügt, wenn Sie schnell ein gutes Spiel auf einer Seite haben möchten. Eine individuelle Version lohnt sich, wenn das Spiel Ihr Logo, Ihre Farben, Texte und Regeln tragen soll, wenn es zu einer Kampagne passen muss oder wenn es innerhalb einer Plattform laufen soll, die Sie bereits nutzen. Wir übernehmen individuelle Projekte und White-Label-Arbeiten. Preise und Fristen hängen vom Auftrag ab, deshalb nennen wir keine: Schicken Sie uns die Vorlage, die Ihnen gefällt, und was Sie ändern möchten, und bitten Sie um ein Angebot.

Kontakt: willian@polargames.com.br

FAQ

Hilft ein iframe-Spiel der Suchmaschinenoptimierung meiner Seite?

Verlassen Sie sich nicht darauf. Schreiben Sie Überschriften, Beschreibung und Anleitung rund um das Spiel als normalen Seitentext.

Enthalten die Spiele Werbung oder Tracking?

Die Editionen führen Werbe-SDKs und Werbekonten als nicht enthalten auf. Was Ihre eigene Seite hinzufügt, etwa Analysewerkzeuge oder Werbung, müssen Sie selbst offenlegen und, wo vorgeschrieben, dafür eine Einwilligung einholen.

Nächster Schritt

Wählen Sie im Marketplace ein Spiel aus, spielen Sie die Demo und lesen Sie das Handbuch. Entscheiden Sie dann, welcher Weg zu Ihrer Website passt, und schreiben Sie uns, wenn Sie Ihre Marke darauf haben möchten.

HTML5-Spielvorlagen ansehen

White-Label-HTML5-Spiele: Lieferumfang und Fragen

HTML5-Spiele lizenzieren oder Quellcode kaufen?

Advergame: HTML5-Markenspiel für Kampagnen