hello-eme-play

Worum es geht

Auf hello-eme.ch läuft eine kleine Pixelfigur über die Seite, boxt Absätze kaputt und steigt ins Auto. Aus diesem Spass ist eine eigenständige Engine geworden: Die Webseite selbst ist das Spielfeld, und alles, was im Spiel passiert, steht in einem einzigen JSON. Damit lässt sich das Spiel auf jede Seite bringen, mit reinem HTML, jedem Framework oder jedem CMS.

Ausprobieren

Auf hello-eme.ch den Spielknopf neben dem Hell-/Dunkel-Schalter drücken. Für die eigene Seite reicht eine Zeile: play.js von der Releases-Seite herunterladen, neben die Seite legen und einbinden.

<script src="/play.js" data-config="{}" defer></script>

{} ist bereits ein vollständiges Spiel mit allen Standardwerten. Alles Weitere wird über diese Standards gelegt.

Was die Engine kann

• Zwei Ansichten: Draufsicht und Sidescroller, in dem die Elemente der Seite zu Plattformen werden. Gewechselt wird jederzeit, durch Gegenstände, Auslöser oder Levels
• Figur, Monster, Fahrzeuge mit Werten wie Leben, Angriff und Tempo, mit Bewegungen (Boxen, Kicken, Beissen) und Verhalten (jagen, herumstreifen, fliehen)
• Levels und Ziele: Punkte, Treffer, eine Zeit lang überleben oder einen Boss besiegen
• Gegenstände, Upgrades, Shop und Auslöser nach dem Muster «wenn X passiert und Y gilt, tu Z», dazu Töne und Highscore
• Eigene Bilder: Pixel-Art ist eingebaut, eigene PNG- oder SVG-Sprites mit Animationen ersetzen sie
• Touch-Steuerung mit Steuerkreuz, runden Aktionsknöpfen sowie Lenkrad und Pedalen fürs Auto
• Sicher: Das JSON wird immer geprüft, falsche Werte werden korrigiert und bringen die Seite nie zum Absturz

Screenshots

Im CMS bearbeiten

Für Payload CMS gibt es ein Plugin. Es macht aus dem JSON-Schema ein Formular im Admin, auf Deutsch oder Englisch, mit Vorlagen, Bildauswahl und einem Reiter für das rohe JSON. So passe ich das Spiel auf hello-eme.ch an, ohne Code anzufassen.

Ohne Browser ausbalancieren

Bots spielen ein JSON ohne Browser durch und melden Sieg- und Todesraten, Punkte und Hinweise wie «niemand überlebt» oder «zu einfach».

Technik

TypeScript als Nx-Monorepo mit fünf Paketen: play (Laufzeit im Browser), play-core (Spiellogik ohne DOM), play-schema (Standards, Prüfung, Migrationen, JSON Schema), play-payload (das Plugin) und play-sim (die Bots). Installiert wird direkt von den GitHub-Releases, ohne npm-Konto oder Token. Open Source unter MIT-Lizenz.

Gefällt dir hello-eme-play? Buy me a coffee.