Ein Browserspiel bauen: wie Onigiri Hop funktioniert

Im Footer dieser Website steht ein Link: „Spiel nicht mit meinem Lieblingsessen“. Dahinter steckt Onigiri Hop, ein kleines Arcade-Spiel, in dem das Onigiri durch eine endlose Reihe von Lücken hüpft. Tippen, klicken oder die Leertaste drücken lässt es hüpfen; wer ein Rohr oder den Boden berührt, beendet die Runde.

Es ist ein kleines Spiel, aber dieselben Fragen wie in jedem interaktiven Webprojekt tauchen darin auf: wie es sich anfühlt, wie schnell es lädt und ob es sich auf jedem Gerät gleich verhält. So ist es gebaut.

1. Canvas: eine einfache 2D-Zeichenfläche

Das Spiel zeichnet auf ein einziges 2D-Canvas. In jedem Frame malt es die Rohre als einen Pfad und das Onigiri als ein Sprite; der Punktestand steht in der Seite drumherum. Mehr braucht ein Spiel wie dieses nicht, und ein 2D-Canvas startet leichter als ein 3D-Grafikkontext.

Das Spiel lebt in einem nativen <dialog>-Element. Solange es offen ist, scrollt die Seite dahinter nicht, und beim Schließen geht das Spiel zurück auf seinen Startbildschirm.

2. Welteinheiten: dasselbe Spiel auf jedem Bildschirm

Bildschirme gibt es in jeder Größe, aber das Spiel soll auf einem großen Monitor nicht leichter und auf einem kleinen Handy nicht schwerer werden. Deshalb passiert alles in Welteinheiten: Die Welt ist immer 640 Einheiten hoch, und das Canvas skaliert sie auf den Platz, den es hat. Schwerkraft, Sprungkraft, Lückengrößen und Tempo sind alle in diesen Einheiten festgelegt. Ein Sprung ist auf jedem Bildschirm gleich hoch.

3. Physik: derselbe Bogen bei jeder Bildrate

Bildschirme aktualisieren auch unterschiedlich oft: 60 Bilder pro Sekunde, 120 bei vielen neueren Handys, 30 im Energiesparmodus. Ein naives Spiel bewegt Dinge pro Frame um einen festen Betrag und läuft deshalb auf schnelleren Bildschirmen schneller.

Onigiri Hop berechnet jeden Schritt aus der tatsächlichen Zeit seit dem letzten Frame, und zwar mit der exakten Formel für den Fall unter konstanter Schwerkraft. Das Ergebnis: Der Sprung folgt demselben Bogen, ob der Bildschirm 30 oder 120 Bilder pro Sekunde zeichnet.

Das Timing der Frames kann auf Handys ungleichmäßig sein, besonders direkt nach einem Tippen. Das Spiel gleicht das mit einem gleitenden Durchschnitt der letzten Frame-Zeiten aus, sodass ein einzelner später Frame die Rohre nicht springen lässt, während eine dauerhafte Änderung, etwa ein Wechsel auf 120 Hz, in Sekundenbruchteilen übernommen wird.

4. Fairness: jede Lücke ist erreichbar

Zufällig platzierte Lücken können unmögliche Situationen erzeugen: eine Lücke ganz oben direkt nach einer ganz unten. In Onigiri Hop bleibt jede neue Lücke in einem festen Abstand zur vorherigen und kommt den Rändern nie zu nah.

Diese Regel prüft ein Test, der zehntausend Lücken hintereinander erzeugt und bestätigt, dass jede auf dem Bildschirm und in Reichweite der vorherigen bleibt. Er läuft bei jedem Push.

Zwei weitere Details lassen es fair wirken:

• Eine nachsichtige Hitbox: Die Kollisionsfläche ist etwas kleiner als das Sprite, dessen Ecken ohnehin durchsichtig sind.
• Sanfte Schwierigkeit: Mit jedem Punkt werden die Lücken etwas enger und die Rohre etwas schneller, und nach einer Weile pendelt sich das ein, statt endlos zu steigen.

5. Laden: nur, wenn jemand spielt

Die meisten Besucher öffnen das Spiel nie, also soll es sie nichts kosten. Spielcode und Sprites laden erst, wenn jemand den Dialog zum ersten Mal öffnet. Die Animationsschleife läuft nur, solange der Dialog offen ist und eine Runde läuft; nach einem Crash hält sie an bis zum nächsten Tippen.

6. Touch: sich auf dem Handy richtig anfühlen

Ein Tippen muss sich sofort anfühlen. Auf Touchscreens fügen Browser einem Tippen oft zusätzliches Verhalten hinzu: ein kurzes Aufleuchten und simulierte Mausereignisse hinterher. Das Spiel verarbeitet Touch-Eingaben direkt, ein Tippen ist also ein Sprung und sonst nichts.

7. Highscore: bleibt auf dem Gerät

Der beste Punktestand wird im lokalen Speicher des Browsers abgelegt und ist beim nächsten Besuch noch da. Ist der Speicher nicht verfügbar, etwa in einem privaten Fenster, merkt sich das Spiel den Rekord nur für den aktuellen Besuch. Kein Konto, kein Server, nichts verlässt das Gerät.

Die Kurzfassung

• 2D-Canvas in einem nativen Dialog: ein Pfad und ein Sprite pro Frame.
• Welteinheiten machen das Spiel auf jedem Bildschirm gleich.
• Exakte Physik ergibt bei jeder Bildrate denselben Sprung, geglättet gegen ungleichmäßige Frames.
• Faire Lücken, geprüft von einem Test mit zehntausend Runden, dazu eine nachsichtige Hitbox.
• Lädt bei Bedarf und läuft nur, solange jemand spielt.
• Highscore bleibt auf dem Gerät.

Du willst ein Spiel oder ein interaktives Erlebnis für deine Marke? Melde dich.