Splash Olympics

Was wir gebaut haben

Das ganze Spiel ist eine einzige, in sich geschlossene HTML-Datei. Es gibt keine Bilddateien, keine Audiodateien und keine Libraries. Jede Grafik wird im Code auf ein HTML-Canvas gezeichnet, und jeder Sound (Platschen, Saltos, Wind, Warntöne) entsteht live im Browser mit der Web Audio API. Mein KI-Assistent, der auf Grok Bot läuft, hat das alles gemacht.

Darunter steckt echte Spielphysik. Es gibt Schwerkraft, und es gibt Wasser, in das du eintauchst, um Tempo aufzubauen. Deine Startkraft wächst mit jedem sauberen Eintauchen, ein perfekter Eintritt gibt mehr. Ein Bauchklatscher kostet dich Kraft und deine Combo.

Die Kamera zoomt weiter heraus, je schneller du fliegst. Vom Becken aus steigst du an Möwen, Heissluftballons, Flugzeugen, Satelliten, Astronauten und UFOs vorbei, am Mond und an den Planeten vorbei bis zum Pluto. Unterwegs warten nerdige Easter Eggs: Hubble, die ISS, ein fallender Wal und ein Topf Petunien, ein Handtuch, ein Roadster im All, Voyager und eine Teekanne im Orbit. Bei «Altitude 42: the answer to everything» (die Antwort auf alles) gibt es einen Bonus, und ganz oben steht das «Diner at the End of the Galaxy» («So long, and thanks for all the fish»).

Vorwärts- und Rückwärtssaltos werden getrennt gewertet, mit einem Bonus fürs Mischen. Berührst du unten im Becken den Sand, ist das Spiel vorbei. Dazu kommen ein Zeitlimit von fünf Minuten, eine lokale Top-5-Rangliste und Live-Hinweise, wenn du nah an deinem Rekord bist, in den Top 5 liegst oder ihn schlägst.

Fünf Versionen, vorangetrieben durch Playtests

Ich habe nie Code geschrieben. Jede Runde lief gleich ab: Der Assistent lieferte eine Version, ich spielte sie, beschrieb in einfachen Worten, was sich falsch anfühlte, und die nächste Version behob es.

1. Der Kern-Loop. Tauchen, Herausschiessen, Saltos und die Landung im Becken.
2. Ein Bug-Report. «Wenn ich von über 300 km herunterkomme, folgt die Kamera dem Delfin nicht mehr.» Der Assistent baute eine Kamera ein, die den Delfin immer im Bild behält und bei schnellem Fallen zum oberen Bildrand hin gewichtet ist, damit du siehst, was auf dich zukommt.
3. Regeländerungen. Das ursprüngliche Zeitlimit fällt weg, wer den Beckenboden berührt, hat verloren, und Vorwärts- und Rückwärtssaltos zählen als getrennte Boni. Ich fragte auch halb im Scherz, ob es das «Restaurant am Ende der Galaxis» gebe. Jetzt gibt es das.
4. Spielgefühl. «Der Fall zurück zur Erde ist zu schnell, die Easter Eggs rauschen vorbei, und es ist fast unmöglich zu verlieren.» Der Assistent nahm die Zeitbeschleunigung beim Fallen heraus und zoomte stattdessen bei hohem Tempo heraus. Er verkleinerte den Spielraum für Fehler, führte wieder ein Gesamtzeitlimit von fünf Minuten ein und baute das Rekordsystem ein.
5. Feinschliff. Mehr Abwechslung (sieben verschiedene Ballondesigns), mehr Easter Eggs und vollständiger Sound.

Wer was gemacht hat

Der Assistent hat den ganzen Code, alle Grafiken und das gesamte Sounddesign gemacht, und er hat seine Arbeit selbst getestet. Er liess das Spiel in einem Headless-Browser laufen (ein Browser ohne Fenster, den ein Skript steuert), mit einem Bot, der automatisch spielte, machte Screenshots beim Abstieg aus maximaler Höhe und prüfte auf Fehler und flüssige 60 Bilder pro Sekunde. Dieser Test hat echte Probleme gefunden. Das Diner zum Beispiel war selbst mit maximaler Kraft unerreichbar, und der Assistent behob das, indem er das Spiel neu austarierte, bevor ich es je zu sehen bekam.

Mein Teil war die Vision («Mach es wie das Spiel, das ich geliebt habe»), das Playtesting und das Urteil darüber, was Spass macht. Der Assistent konnte Bildraten messen. Er konnte aber nicht spüren, ob ein Fall langweilig oder ein Sprung befriedigend ist, und er konnte seine eigenen Soundeffekte nicht hören. Dieser Teil blieb menschlich.

Was du daraus mitnehmen kannst

• Beschreib Gefühle, keine Lösungen. «Der Fall ist zu schnell, und ich sehe die Easter Eggs nicht» funktionierte besser, als eine Lösung vorzugeben. Der Assistent fand mit dem Herauszoomen eine bessere Lösung als die, die ich vorgeschlagen hätte.
• Liefere in kleinen Schritten und spiel jede Version. Fünf schnelle Runden schlagen eine riesige Spezifikation.
• Teil das Testen auf. Lass die KI testen, was sie messen kann: Fehler, Performance, ob ein Ziel erreichbar ist. Behalte für dich, was sie nicht messen kann: Spielspass, Timing, Sound.
• Heb jede Version auf, damit du jederzeit zurückgehen kannst.
• Rechne mit etwas Reibung. Bei langen Arbeitsphasen fragte ich mich manchmal, ob überhaupt etwas passiert. Nach einem Statusupdate zu fragen ist normal und völlig in Ordnung.
• Einschränkungen helfen. «Eine HTML-Datei, keine Assets»: So liess sich das Projekt einfach hosten und leicht teilen.

Dasselbe Spiel, fünf andere Modelle

Als das Spiel fertig war, habe ich alles, was mich diese fünf Runden gelehrt hatten, in einem einzigen Briefing aufgeschrieben und fünf anderen KI-Modellen gegeben, jedes in einem Durchgang und ohne Feedback. Gleiches Konzept, ganz unterschiedliche Spiele. Spiel alle sechs Versionen und sieh, wie sie im Vergleich abschneiden.

Ein bisschen off topic, aber eigentlich nicht

Damals brauchte so ein Spiel das Flash-Plugin und ruckelte. Heute ist es eine eigenständige HTML-Datei, die in praktisch jedem Browser flüssig läuft.

Solche in sich geschlossenen, interaktiven HTML-Dateien kann ein aktuelles KI-Modell unglaublich gut erstellen. Du kannst sie per Chat oder E-Mail verschicken, und sie bringen Informationen sehr gut rüber. Bei Carewell nutzen wir sie ständig, um uns gegenseitig Dinge zu erklären: Regeln, Prozesse, Konzepte, alles Mögliche. Das funktioniert viel besser als eine PowerPoint-Präsentation oder eine langweilige Textdatei. Wenn du sehen willst, wie die Idee bei etwas Praktischem aussieht, ist Der Wochenendtrip, der seine eigene App bekam ein Beispiel.