Benjamin
Pixel Racer – unser Oster-Spiel mit KI-Unterstützung
Zu Ostern haben wir ein kleines Retro-Rennspiel veröffentlicht: Pixel Racer. Ein Hase sammelt Ostereier auf einer Pixelart-Rennstrecke. Das Besondere: Das Spiel wurde fast vollständig mit KI-gestütztem Vibe Coding entwickelt. Warum wir das gemacht haben und was wir dabei gelernt haben, erzählen wir in diesem Artikel.
Frohe Ostern! Dieses Jahr haben wir uns eine kleine Überraschung überlegt: Unter ostern.uxitra.de findet ihr unser Oster-Spiel Pixel Racer. Ein Hase rast über eine Pixelart-Rennstrecke, sammelt Ostereier und versucht die beste Rundenzeit aufzustellen. Aber hinter dem Spiel steckt mehr als nur Spaß – es war für uns ein bewusstes Experiment mit KI-gestützter Softwareentwicklung.
Das Spiel
In Pixel Racer steuert ihr einen Osterhasen über eine Rennstrecke im Retro-Stil. Auf dem Bildschirm seht ihr die aktuelle Rundenzahl, eure Punkte durch gesammelte Ostereier, die Rundenzeit und eure Bestzeit. Wer von der Strecke abkommt, wird langsamer – also Augen auf die Kurven!
Am Desktop wird mit den Pfeiltasten gesteuert, auf dem Smartphone gibt es einen virtuellen Joystick. Das Spiel läuft komplett im Browser, ohne Installation, ohne Login.
Die Technik dahinter
Unter der Haube steckt ein moderner Web-Stack:
- Vue.js 3 als reaktives Frontend-Framework
- Vite als Build-Tool für schnelle Entwicklungszyklen
- HTML Canvas API für das Rendering der Spielwelt
- SVG-Sprites für den animierten Hasen
- Retro-Pixel-Font „Press Start 2P" für das authentische Arcade-Feeling
Das gesamte Spiel rendert auf einem einzigen <canvas>-Element.
Die Spiellogik berechnet Streckenbegrenzungen, Kollisionserkennung, Rundenzeiten und die Punktevergabe für eingesammelte Eier.
Auf mobilen Geräten erkennt das Spiel automatisch Touch-Eingaben und blendet einen virtuellen Joystick mit Glasmorphism-Design ein.
Warum Vibe Coding?
Der eigentliche Anlass für dieses Projekt war nicht das Spiel an sich, sondern die Art, wie wir es entwickelt haben: Vibe Coding mit KI-Unterstützung.
Vibe Coding beschreibt einen Ansatz, bei dem man einer KI in natürlicher Sprache beschreibt, was man bauen möchte – und die KI generiert den Code. Man “vibed” sich durch die Entwicklung, korrigiert hier und da, gibt Feedback und lässt die KI iterieren.
Für uns war das eine gezielte Gelegenheit, Erfahrung im Umgang mit KI-Tools in der Softwareentwicklung zu sammeln. Wir wollten verstehen:
- Wie gut funktioniert KI-gestütztes Coding bei einem überschaubaren, aber nicht trivialen Projekt?
- Wo beschleunigt die KI den Prozess, wo bremst sie?
- Welche Prompting-Strategien führen zu besseren Ergebnissen?
- Wie verändert sich die Rolle des Entwicklers – vom Schreiben zum Reviewen und Steuern?
Was wir gelernt haben
Die wichtigste Erkenntnis: KI-Tools sind ein kraftvoller Beschleuniger, aber kein Autopilot.
Was gut funktioniert hat:
- Der initiale Aufbau der Projektstruktur und des Grundgerüsts ging sehr schnell
- Standardmuster wie Canvas-Setup, Event-Handling und responsive Anpassungen wurden zuverlässig generiert
- Iteratives Verfeinern – „mach den Joystick etwas größer", „füge eine Minimap hinzu" – funktionierte oft auf Anhieb
Wo wir nachhelfen mussten:
- Bei der Spielphysik und Kollisionserkennung brauchte es präzise Vorgaben und manuelle Korrekturen
- Komplexere Zusammenhänge wie die korrekte Rundenzählung erforderten mehrere Iterationsschleifen
- Code-Qualität und Architektur mussten wir aktiv im Blick behalten
Die Erfahrung bestätigt unsere Überzeugung: KI-Tools ersetzen keine Entwickler – sie machen gute Entwickler produktiver. Wer die Grundlagen versteht, kann die KI gezielt einsetzen und Ergebnisse kritisch bewerten. Ohne dieses Fundament führt Vibe Coding schnell in eine Sackgasse.
Fazit
Pixel Racer war ein lehrreiches und spaßiges Experiment. Wir haben nicht nur ein charmantes Oster-Spiel veröffentlicht, sondern auch wertvolle Erfahrungen im Umgang mit KI-gestützter Entwicklung gesammelt, die direkt in unsere tägliche Arbeit einfließen.
Probiert das Spiel gerne aus: ostern.uxitra.de – und schlagt unsere Bestzeit!