Diese Website hat jetzt einen Spielmodus

Oben rechts, neben dem Schalter für den dunklen Modus, gibt es ein neues Symbol: ein kleines Gamepad. Damit bekommst du eine Pixel-Figur, die man von oben sieht und die über die Website läuft. Standardmässig ist der Modus aus.

So aktivierst du den Spielmodus

1. Gamepad-Symbol suchen: Am Computer ist es oben rechts in der Kopfzeile, direkt neben dem Schalter für hell und dunkel. Auf dem Handy tippst du zuerst auf das Menü (die drei Striche oben rechts), dort ist es ganz unten.
2. Einmal klicken oder tippen: Die Figur erscheint in der Mitte des Fensters, unten steht ein kurzer Hinweis zur Steuerung. Auf dem Handy erscheinen zusätzlich ein Steuerkreuz und ein Sprung-Knopf.
3. Loslaufen: Mit den Pfeiltasten oder WASD läufst du, mit Enter oder der Leertaste springst du. Landet die Figur auf einem Link, öffnet er sich.
4. Auf das Auto warten: Nach einer Weile fährt ein Auto herein. Lauf hin und drück E, um einzusteigen.
5. Beenden: Esc (zu Fuss), das Kreuz im Hinweisfeld oder nochmals das Gamepad-Symbol.

Kommt das Auto einmal von selbst vorbei, ohne dass du den Modus eingeschaltet hast, reicht ein Klick auf «Einsteigen» im Hinweis unten.

Zu Fuss

• Laufen: Pfeiltasten oder WASD. Auf dem Handy erscheint unten links ein Steuerkreuz.
• Springen: Enter oder Leertaste, auf dem Handy der Knopf «Springen».
• Klicken: Die Figur landet auf dem, worüber sie gerade steht. Ist das ein Link, öffnet er sich. Ist es ein Formularfeld, kannst du danach direkt tippen.
• Boxen: Mit F (auf dem Handy «Boxen») schlägt die Figur zu, auf das, was direkt vor ihr steht. Nach ein bis drei Treffern zerfällt das Element in Pixel-Scherben: Links und kleine Knöpfe beim ersten Schlag, Text beim zweiten, Bilder und Karten erst beim dritten.
• Menü: Ganz oben auf der Seite läuft die Figur weiter in die Kopfzeile. Dort kann sie auf die Menüpunkte springen, auf dem Handy auch auf den Menüknopf.
• Scrollen: Läuft die Figur an den Rand des Fensters, scrollt die Seite mit.
• Einmal rundherum: Wer ganz unten auf der Seite weiterläuft, kommt oben wieder herein. Rechts hinaus geht es links wieder hinein, und umgekehrt.
• Aufräumen: Im Hinweisfeld zählt die Website mit, wie viel schon kaputt ist. «Seite reparieren» stellt alles wieder her, ebenso ein Seitenwechsel oder das Beenden des Spiels. Kopfzeile, Menü und Fusszeile halten jedem Schlag stand, damit du immer herauskommst.
• Beenden: Esc, das Kreuz im Hinweisfeld oder nochmals das Gamepad.

Das Auto

Nach einer Weile fährt ein kleines Pixel-Auto herein und parkt irgendwo auf der Seite. Lauf hin und drück E (auf dem Handy «Einsteigen»).

• Fahren: Pfeil nach oben gibt Gas, nach unten bremst und fährt rückwärts, links und rechts wird gelenkt. Lenken geht nur, solange das Auto rollt.
• Driften: Leertaste oder Shift gedrückt halten (auf dem Handy «Drift»). Das ist die Handbremse: Das Heck verliert den Halt, das Auto dreht ein und rutscht seitwärts. Auf der Seite bleiben Reifenspuren, die nach 20 Sekunden verblassen.
• Hupen: Enter oder H klickt, was unter dem Auto liegt, auf dem Handy tippst du direkt aufs Auto. Du kannst also auch mit dem Auto einen Beitrag öffnen.
• Aussteigen: E oder Esc. Das Auto bleibt dort stehen, wo du es abgestellt hast, und du kannst jederzeit wieder einsteigen.

Manchmal fährt das Auto auch von selbst vor, ohne dass du den Modus eingeschaltet hast: einmal pro Besuch, irgendwann nach dem Laden. Unten erscheint dann «Ein Auto ist vorgefahren». Mit «Einsteigen» fährst du direkt los, mit dem Kreuz fährt es wieder weg. Wer in seinem System «weniger Bewegung» eingestellt hat, bekommt keinen Besuch.

Figur und Auto bleiben beim Seitenwechsel dabei. Du kannst also auf einen Blogbeitrag springen und dort gleich weiterspielen.

Neu: einstellbar im CMS

Seit dem letzten Update lässt sich der Spielmodus ohne Code-Änderung einstellen, im CMS unter «Design → Interaktiver Modus»:

• Ein oder aus: Ist der Modus aus, verschwindet auch das Gamepad-Symbol, und es kommt kein Auto mehr vorbei.
• Das Auto beim Spielen: ob überhaupt eins vorfährt und wann. Im Moment kommt es nach 8 bis 20 Sekunden.
• Der Besuch von selbst: ob das Auto einmal pro Besuch von alleine vorfährt und wann. Im Moment nach 20 bis 60 Sekunden.

Den genauen Moment wählt die Website zufällig innerhalb dieser Spanne. Fehlt eine Einstellung oder ist das CMS nicht erreichbar, gelten einfach die bisherigen Werte. Und wer «weniger Bewegung» eingestellt hat, bekommt weiterhin nie ungefragt Besuch.

Warum?

Ehrlich gesagt: weil es Spass macht. Eine persönliche Website darf auch verspielt sein. Und es hat mich gereizt, das so einzubauen, dass nichts kaputtgeht. Die Seite bleibt mit Maus, Tastatur und Screenreader genau so benutzbar wie vorher.

Wie es funktioniert

• Figur und Auto werden auf ein Canvas gezeichnet, das über der ganzen Seite liegt, aber jeden Mausklick durchlässt. Du kannst also ganz normal weiterklicken.
• Ein Sprung oder ein Hupen ist eigentlich ein Klick: Die Website schaut nach, welches Element darunter liegt, und aktiviert es.
• Das Auto fährt mit einer kleinen Fahrphysik: Beschleunigen, Bremsen, Ausrollen, Driften, und es lenkt stärker, je schneller es fährt. Kommt es von selbst, steuert es ein Autopilot zu einem zufälligen Parkplatz.
• Beim Boxen ändert sich nur, was du gerade siehst. Kaputte Elemente werden bloss ausgeblendet und behalten ihren Platz, damit die Seite nicht springt. Im CMS und für andere Besucher bleibt alles heil.
• Beim Driften rechnet die Fahrphysik mit einem Driftwinkel: Mit gezogener Handbremse greifen die Hinterräder kaum noch, und ab einem gewissen Winkel und Tempo zeichnen sie Spuren.
• Die Farben kommen aus dem Design-System der Seite. Figur und Auto passen sich deshalb jedem Farbthema und dem hellen oder dunklen Modus an, samt einer Kontur, damit sie überall sichtbar bleiben.
• Die ganze Spiellogik (Laufen, Fahren, Mitscrollen, Rundherum, Autopilot) ist von der Darstellung getrennt und mit Tests abgesichert. Automatische Browser-Tests steuern die Figur ins Menü, auf einen Blogbeitrag und ins Auto.

Probier es aus

Klick oben auf das Gamepad, box dich durch die Seite, warte auf das Auto und dreh ein paar Drifts. Mit «Seite reparieren» ist danach alles wieder wie neu. Viel Spass!