Mit Vibe-Code ein Kinderspiel mit Gemini entwickeln und mit Firebase veröffentlichen

1. Einführung

Am 25. März 2025 hat Google Gemini 2.5 eingeführt. Einer der denkwürdigsten Aspekte dieser Einführung war, dass jeder die Funktion „Erweiterte Programmierung“ ausprobieren konnte [Video]:

Gemini 2.5: Mit einem einzeiligen Prompt ein eigenes Dinosaurierspiel erstellen

In diesem Codelab erfahren Sie, wie Sie eine einfache Kinder-App per „Vibe Coding“ entwickeln. Sie beginnen mit einem allgemeinen Prompt und passen die App dann nach Ihren Wünschen an. Wir testen die App mit p5.js. Schließlich werden wir diese Änderungen in Firebase Hosting bereitstellen. Das Beste daran: Der gesamte Stack ist derzeit kostenlos.

Lerninhalte

Mit Gemini 2.5 eine Spiel-App „vibe-codieren“.
Code auf p5js.org testen
So iterieren und optimieren Sie Ihren Prompt / Ihre App.
Statische Anwendung in Firebase hosten

Hinweis: In diesem Codelab wird KI-generierter Code verwendet. Da dieser nicht deterministisch ist, enthält dieses Codelab Richtlinien, da die Ausgabe dem Autor nicht bekannt ist. Verwenden Sie diesen Code NICHT in der Produktionsumgebung.

2. Vorbereitung

Dieses Codelab besteht aus zwei Phasen:

Nur Webentwicklung: Hier können Sie sich kreativ austoben. Programmierkenntnisse sind nicht erforderlich. Dazu verwenden wir die Gemini-Benutzeroberfläche ( gemini.google.com) und p5.js.
Lokale Programmierumgebung: Hier sind einige Programmier- und Scripting-Kenntnisse erforderlich, außerdem die Installation und Verwendung von npm / npx und eines lokalen Editors wie vscode oder IntelliJ. Dieser zweite Teil ist optional und nur erforderlich, wenn Sie Ihre Anwendung so speichern möchten, dass Ihre Freunde und Familie sie auf Mobilgeräten oder Computern spielen können.

Die einzige Voraussetzung für Phase 1 ist ein Browser und ein Computer (ein großer Bildschirm ist hilfreich). Informationen zu Phase 2 finden Sie unten.

Gemini-Benutzeroberfläche

gemini.google.com ist eine großartige Plattform, auf der Sie alle aktuellen Gemini-Modelle ausprobieren und eigene Bilder und Videos erstellen können. Dank der vielen Google-Integrationen, z. B. Google Maps, Hotels, Flüge und Rezensionen, ist es der ideale Begleiter für die Planung Ihres nächsten Urlaubs.

Tipp:Wenn Sie sich für Programmieren interessieren, können Sie auch AI Studio ausprobieren. Das ist eine ähnliche Oberfläche, in der Sie eine LLM-Interaktion prototypisieren (z. B. ein Bild erstellen) und den Python-Code direkt auf der Seite abrufen können.

p5.js

p5.js ist eine kostenlose Open-Source-JavaScript-Bibliothek, die Creative Coding für Künstler, Designer, Lehrkräfte und alle anderen zugänglich und inklusiv macht. Sie basiert auf der Processing-Sprache und vereinfacht die Erstellung interaktiver visueller und interaktiver Inhalte mit Code im Webbrowser.

Lokale Codierung [optional]

Wenn Sie Ihre Anwendung beibehalten möchten, sind weitere Einrichtungsschritte erforderlich:

Ein lokaler Code-Editor ( Visual Studio Code, IntelliJ usw.)
Ein Git-Konto ( github / gitlab / bitbucket), in dem Sie Ihren Code speichern können.
Eine npmlokal installierte, idealerweise im Nutzerbereich (über npx oder eine ähnliche Technologie).

Außerdem richten wir später ein Firebase-Konto ein.

Außerdem sind einige Programmierkenntnisse erforderlich, z. B.:

Möglichkeit, ein npm-Paket zu installieren
Möglichkeit, mit dem Dateisystem zu interagieren (Ordner und Dateien erstellen)
Möglichkeit zur Interaktion mit git (git add, git commit, git push).

Wenn Ihnen etwas davon zu kompliziert erscheint, denken Sie daran, dass LLMs Ihnen dabei helfen können. Sie können beispielsweise das Modell „Gemini 2.0 flash“ oder ein ähnliches Modell verwenden, um Vorschläge zu erhalten. Wenn das immer noch zu schwierig ist, kannst du Phase 2 komplett überspringen. Phase 1 sollte lohnend genug sein.

3. Erstellen wir unser erstes Spiel!

Öffnen Sie gemini.google.com und wählen Sie ein Modell aus, das Code generieren kann, z. B. Gemini 2.5. Diese Auswahl kann je nach Verfügbarkeit, Kosten und Datum variieren. Zum Zeitpunkt der Erstellung dieses Dokuments sind die folgenden Optionen am besten geeignet:

Gemini 2.5 Flash (schnellere Iteration)
Gemini 2.5 Pro (bessere Ausgabe).

Weitere Informationen zu unseren Gemini-Modellen

Unser erster Spiel-Prompt

Wie Sie in diesem Video sehen können, kann ein erster Prompt ganz einfach aussehen:

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

Sie können das gern anpassen:

Mittelalterliche / futuristische / Cyberpunk-Umgebungen
Ist die Nachricht voller Emojis oder enthält sie nur ein bestimmtes Emoji?
Sie lieben die Farbe Gelb oder verschiedene Violetttöne.
Vielleicht liebt dein Kind Einhörner, Dinosaurier oder Pokémon.

Nachdem Sie den Prompt in Ihren Browser eingefügt haben, sollten Sie sehen, dass Gemini denkt.Gemini 2.5 ist ein Denkmodell und startet daher eine Reihe von Aufgaben, die sich im Laufe der Zeit ändern. Sie können auf das Drop-down-Menü klicken, um zu sehen, was passiert, oder einfach auf das Ergebnis warten:

Am Ende sollten Sie ein funktionierendes JavaScript haben.

Klicken Sie oben auf die Schaltfläche zum Kopieren:

Spiel in p5.js testen

Jetzt ist es an der Zeit, das Spiel zu testen.

Öffnen Sie den p5.js-Editor unter https://editor.p5js.org/.
Wählen Sie den vorhandenen sketch.js-Code aus und löschen Sie ihn.
Code einfügen

Ihre Seite sollte so aussehen:

Drücken Sie abschließend die PLAY-Taste.

Jetzt kann Folgendes passieren: Entweder funktioniert Ihr Code oder er schlägt fehl. Folgen Sie der Anleitung für den jeweiligen Fall:

Ihr Code schlägt fehl
Ihr Code funktioniert beim ersten Versuch!

In den nächsten beiden Abschnitten erfahren Sie, wie Sie mit beiden Bedingungen umgehen.

(Fall 1) Mein Code schlägt fehl.

Wenn Sie einen solchen Fehler erhalten, können Sie ihn einfach kopieren und in Gemini einfügen. Lassen Sie ihn den Code für Sie korrigieren.

(Fall 2) Mein Code funktioniert.

Wenn der Code funktioniert, sollte rechts auf der Seite ein visuelles Spiel angezeigt werden.

👏 Herzlichen Glückwunsch! Sie haben Ihr erstes KI-Spiel gestartet.

Hinweis:Sie haben zwar den Code, die App funktioniert aber nur in Ihrem Browser. Wenn Sie die App Ihrer Familie und Ihren Freunden zeigen möchten, benötigen Sie eine Hostinglösung. Zum Glück haben wir eine tolle Option für dich! Lesen Sie weiter.

Jetzt können Sie mit dem nächsten Kapitel fortfahren.

Weitere Iterationen

Es ist jetzt an der Zeit, Ihren Code irgendwo zu speichern, falls Sie ihn beschädigen. Sie können die Antwort einmal überarbeiten lassen. Der Autor mag zum Beispiel den Doppelsprung aus Super Mario sehr. Sie könnten also Folgendes hinzufügen:

The game is great, thanks! Please allow for my character to double jump.

Sie können alles anpassen, was Sie möchten. Vielleicht möchten Sie den Namen des Charakters für höhere Punktzahlen speichern oder die Geschwindigkeit im Laufe der Zeit erhöhen, um das Spiel schwieriger zu machen. Die englische Sprache ist die Grenze für Ihren Prompt.

Tipp:Gemini gibt in der Regel nur die Änderung an, die Sie anwenden müssen (z. B. „Das ist die Änderung für die Funktion XYZ“). Möglicherweise möchten Sie den Prompt so festlegen, dass Sie stattdessen den gesamten aktualisierten Code erhalten, z. B. mit

"Please give me the entire updated code, not just the changed function"

. Das erleichtert das Kopieren und Einfügen.

Vorsichtsmaßnahmen

Sie können Ihren Gemini-Chat mit einem Lesezeichen versehen. Vielleicht möchten Sie die Datei in „p5js my first game“ umbenennen oder den Permalink zu Gemini, z. B. " https://gemini.google.com/app/abcdef123456789" für später notieren.

4. Lassen Sie uns diesen Code lokal ausführen.

Jetzt sollten Sie Folgendes haben:

Ein geöffnetes Gemini-Browserfenster mit funktionierendem Code.
Ein geöffnetes p5.js-Browserfenster mit einem funktionierenden Spiel
Eine lokale Programmierumgebung mit installiertem npm.

Das ist der schwierigere Teil des Codelabs. Grundlegende Programmierkenntnisse sind erforderlich.

Abhängigkeiten installieren

Wenn npm und node fehlen, sollten Sie npm am besten über einen Versionsmanager wie nvm installieren . Folgen Sie der Installationsanleitung für Ihr Betriebssystem.

Wir gehen außerdem davon aus, dass Sie eine IDE verwenden. In unseren Screenshots und Beispielen verwenden wir Visual Studio Code, aber es funktioniert auch jede andere IDE.

Lokale Umgebung einrichten

Jetzt können Sie Ihre eigene Dateistruktur erstellen.

Zur Veranschaulichung wird ein Einrichtungsskript bereitgestellt. Sie können dies manuell tun, indem Sie Ordner und Dateien erstellen:

# This works for Mac and Linux. For Windows, please use other tools.
mkdir my-first-vibecoding-project/
cd my-first-vibecoding-project/
git init 
touch README.md PROMPT.md 
mkdir public/
cd public/ 
touch index.html sketch.js style.css
git add .
# Skipping quotes which can be tricky
git commit -a -m committing_empty_skeleton

Die endgültige Ordnerstruktur sollte so aussehen:

my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
    ├── index.html
    ├── sketch.js
    └── style.css

Sie sollten diese Informationen auch hier finden.

Öffnen Sie nun Ihren bevorzugten Code-Editor (z. B. code my-first-vibecoding-project/) und fügen Sie den Inhalt von editor.p5js.org in die drei Dateien unter „public/“ ein:

README.md ← Hier können Sie den Permalink für den Gemini Chat einfügen und hier die Landingpage für die App, wenn sie verfügbar ist.
PROMPT.md ← Hier können Sie alle Ihre Prompts hinzufügen, getrennt durch einen H2-Absatz. Wenn Sie erklären möchten, warum Sie einen bestimmten Prompt eingegeben haben, können Sie ihn in drei Backticks ( Beispiel) einschließen.
**public/index.html** ← HTML-Code hier einfügen
**public/sketch.js** ← JS-Code hier kopieren
**public/style.css** ← CSS-Code hier kopieren

Im öffentlichen Ordner können zusätzliche Assets wie ein benutzerdefiniertes PNG gehostet werden.

5. Firebase einrichten und bereitstellen

Firebase einrichten (nur beim ersten Mal)

Achten Sie darauf, dass npm auf Ihrem Computer installiert ist.

Geben Sie in einem Terminal einen der folgenden Befehle ein:

# to install on the machine (requires privilege)
npm install -g firebase-tools
# to install locally (low privilege needed but might need to repeat a few times)
npm install firebase-tools

Jetzt sollten Sie den Befehl firebase aufrufen können. Bei Problemen folgen Sie der öffentlichen Dokumentation.

Firebase-Initialisierung

In diesem Abschnitt richten wir Firebase Hosting ein. Das ist ein sehr einfacher Ablauf, aber es kann eine Weile dauern, bis Sie sich damit vertraut gemacht haben.

Sie müssen sich in dem Verzeichnis direkt über dem Verzeichnis public/ befinden, das Ihre Dateien enthält. Der Eintrag (ls -al oder dir) sollte in etwa so aussehen:

$ ls 
PROMPT.md
README.md
public/

[Schritt 1] Gib in der Konsole Folgendes ein: firebase init

Gehen Sie mit den Cursortasten nach unten zu „Hosting: ..“ und geben Sie LEERZEICHEN und dann EINGABETASTE ein. Warum? Da es sich um eine Mehrfachauswahl handelt, müssen Sie die Option auswählen und zur nächsten Seite wechseln.
[Schritt 2] Sie können jetzt ein vorhandenes Projekt auswählen (Option 1) oder ein neues erstellen (Option 2):

Hinweis: Wenn Sie bereits ein Cloud-Projekt haben, ist es möglicherweise kein Firebase-Projekt. Firebase-Projekte sind eine Teilmenge von GCP-Projekten. Sie müssen zusätzliche Schritte ausführen, um sie in ein Firebase-Projekt umzuwandeln. Das ist der Zweck von Option 3.
Wenn Sie sich nicht sicher sind, verwenden Sie „Create a new project“ (Neues Projekt erstellen) und fügen Sie einen Namen wie „p5js-YOURNAME-YOURAPP“ (z. B. „p5js-riccardo-tetris“) hinzu.

[Schritt 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
Drücken Sie die Eingabetaste.

[Schritt 4] ? What do you want to use as your public directory? (public)
Drücken Sie die Eingabetaste (wir haben public/ absichtlich eingerichtet).

[Schritt 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
Drücken Sie die Eingabetaste (Nein).

[Schritt 6] ? Set up automatic builds and deploys with GitHub? No
Drücken Sie die Eingabetaste – NEIN.

[Schritt 7] ? File public/index.html already exists. Overwrite? (y/N)
Drücken Sie die Eingabetaste (Nein).
WARNUNG: Dies kann fehleranfällig sein. Wenn Sie die Datei überschreiben, ist die neue index.html nicht mit p5js kompatibel.

Wenn alles funktioniert, sollten Sie Folgendes sehen:

Durch diese Aktionen sollten einige Dateien erstellt worden sein:

.firebaserc
.gitignore
firebase.json
public/404.html

Insbesondere sollte .firebaserc Ihre Projekt-ID enthalten, die Sie programmatisch mit diesem Befehl abrufen können: cat .firebaserc | jq .projects.default -r

Warnung:Überprüfen Sie die Datei index.html. Wenn der Code länger als 16 Zeilen ist und/oder das Wort „firebase“ enthält, haben Sie versehentlich P5JS-Dateien überschrieben. Kein Problem. Sie können die alte index.html-Datei einfach aus Git oder aus dem p5js-Editor wiederherstellen.

Lokales Testen

Um die Latenz des Feedback-Loops zu verringern, sollten Sie die Dinge zuerst lokal ausprobieren.

Dazu können Sie die leistungsstarke CLI-Suite des Firebase-Teams verwenden. Beispiel:

$ firebase emulators:start

sollte einen Webserver auf Port 5000 ( http://127.0.0.1:5000/ ) starten, damit Sie lokal testen können, bevor Sie die Änderungen pushen.

In Firebase bereitstellen

Jetzt ist es Zeit für den letzten Befehl:

$ firebase deploy

Dadurch sollten mehrere Aktionen ausgelöst werden. Die letzten Zeilen sollten in etwa so aussehen:

$ firebase deploy
[...]
✔  hosting[YOUR_PROJECT]: release complete 
✔  Deploy complete! 

Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview
Hosting URL: https://YOUR_PROJECT.web.app

Dadurch sollte die Hosting-URL angezeigt werden. Probier es gleich aus!

Wenn die Bereitstellung erfolgreich ist, aber eine leere Seite oder eine andere fehlerhafte Bereitstellung angezeigt wird, können Sie Folgendes tun:

Öffnen Sie die Entwicklertools Ihres Browsers, suchen Sie den Fehler und bitten Sie Gemini mit einem Prompt wie diesem, Ihnen bei der Behebung zu helfen:

I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

♾️ Immer weiter dranbleiben!

Sie können diese Schritte beliebig oft wiederholen. Sie können so lange Prompts eingeben, bis Sie mit den Ergebnissen zufrieden sind.

Wichtig:

Der Iterationszyklus ist im Gemini-Loop > p5.js > Gemini viel schneller als im Gemini-Loop > lokaler Host > in Cloud Run bereitstellen > App im Browser testen (Aktualisieren).
Verwenden Sie Git für die Versionsverwaltung von Prompts und Code. Möglicherweise möchten Sie zum Prompt N und zum Code N zurückkehren. Insbesondere sollten Sie jeden einzelnen sketch.js, den Sie pushen, mit „git commit“ bestätigen, da dort möglicherweise unentdeckte Fehler lauern.

Einige Spiele funktionieren gut mit einer Tastatur, aber nicht mit einer Maus oder durch Tippen auf dem Smartphone. Das ist ein guter Zeitpunkt, um den Code zu optimieren.

6. Tipps für Prompts

Hier sind einige Tipps, die wir beim Erstellen von Spielen gesammelt haben.

Prompt versionieren

Wahrscheinlich werden Sie Fehler in Ihrem ursprünglichen Prompt finden. Eine git-Version. Es gibt hier einige Codepfade:

Wenn Ihnen das Ergebnis gefällt und Sie mit Gemini mithilfe von nachfolgenden untergeordneten Prompts iterieren möchten, kann es sinnvoll sein, alle Prompts irgendwo zu speichern (Prompt 1, 2, 3 – 3-shot example1 – example2).
Wenn Sie die von Prompt1 erstellte App nicht unbedingt behalten möchten, können Sie den Prompt optimieren, den Code verwerfen und mit dem geänderten Code neu beginnen (Prompt1 v1, Prompt1 v2, Prompt1 v3 usw.).

Sie können die beiden Ansätze natürlich auch kombinieren.

Mobile Funktionalität

Je nach Spiel müssen Sie möglicherweise mit dem Nutzer interagieren. Ist für diese Interaktion eine Tastatur erforderlich? Oder kann es durch einfaches Tippen auf den Bildschirm (z. B. mit einem Mobilgerät) verwendet werden? Geben Sie das im Prompt unbedingt an. Möglicherweise müssen Sie einige Tasten auf Ihrer Tastatur erstellen (siehe mein Tetris 3D-Beispiel). Weitere Informationen finden Sie unter dungemoji Hassle for mobile compatibility.

Feedback zu JavaScript-Fehlern / Screenshots direkt an Gemini senden

Da Gemini Ihre Interaktion mit p5js nicht sehen kann, müssen Sie alle JavaScript-Fehler in Gemini einfügen. Gemini ist multimodal. Wenn Sie also Änderungen an der Benutzeroberfläche vornehmen (z. B. den Titel verkleinern oder die Punktzahl senken), können Sie auch Screenshots des Spiels anhängen. So viel Spaß hat das Coding-Feedback noch nie gemacht!

7. Glückwunsch!

🎉 Herzlichen Glückwunsch zum Abschluss des Codelabs.

Wir haben gesehen, wie einfach es ist, ein Spiel mit Gemini zu erstellen, und wie Firebase eine einfache Hostinglösung bietet, um Ihr Spiel zu speichern und mit anderen zu teilen.

Behandelte Themen

Ein Spiel mit Gemini 2.5 erstellen
In Firebase bereitstellen

Jetzt ist es an der Zeit, 👥 damit anzugeben! Warum teilst du dein neuestes Spiel (your-project.web.app) nicht auf LinkedIn oder Twitter mit dem Hashtag #VibeCodeAGameWithGemini (und taggst vielleicht den Autor auf LinkedIn)? So können wir herausfinden, wie ansprechend dieses Codelab ist, und möglicherweise mehr davon schreiben.

Ich möchte mehr!

Weitere Ressourcen finden Sie in diesen Spielen und Prompts:

Fünf Kinderspiele mit Gemini 2.5 und p5.js an einem Wochenende programmieren In diesem Artikel wird der Prozess der Vibe-Codierung eines Spiels anhand von sechs Beispielen erläutert.
palladius/genai-googlecloud-scripts (GitHub-Repository mit etwa 10 Apps – Code und Prompt): Tetris, Pacman, Vier gewinnt und sogar ein Rogue-Klon für Nostalgiker. Sie enthält die Prompts aller dieser Spiele. Wähle deinen Favoriten aus, passe den Prompt an und lass dich inspirieren.

Hier sind einige Beispiele für Spiele, die Sie erstellen können:

Das fertige Spiel könnte so aussehen:

Ein 3D-Tetris
Ein Sprachspiel
Ein betrügerischer Klon
Ein Pac-Man-Klon.

Auch hier gilt: Englisch ist die Grenze!

🎉 Viel Spaß beim Programmieren!