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

Restzeit 29 Min.

Informationen zu diesem Codelab

Zuletzt aktualisiert: Mai 13, 2025

Verfasst von Riccardo Carlesso

Diese Seite wurde von der Cloud Translation API übersetzt.

1. Einführung

Am 25. März 2025 hat Google Gemini 2.5 veröffentlicht. Einer der denkwürdigsten Aspekte dieser Einführung war, dass alle die Funktion „Erweitertes Codieren“ ausprobieren konnten [ Video]:

Gemini 2.5: Dinosaurierspiel aus einem Prompt mit einer Zeile erstellen

In diesem Codelab erfahren Sie, wie Sie mit dem „Vibe-Coding“ eine einfache Kinder-App erstellen. Sie beginnen mit einem gängigen Designvorschlag und passen ihn dann nach Ihren Wünschen an. Wir testen die App mit p5.js. Schließlich werden wir diese Änderungen auf Firebase Hosting übertragen. Das Beste daran ist, dass der gesamte Stack derzeit kostenlos ist.

Lerninhalte

Mit Gemini 2.5 eine Game-App mit Vibe-Code erstellen
Code auf p5js.org testen
Wie Sie Ihren Designvorschlag / Ihre App iterieren und optimieren.
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 des Autors nicht bekannt ist. Verwenden Sie diesen Code NICHT in der Produktionsumgebung.

Wenn Ihnen dieses Codelab gefallen hat, sollten Sie sich 🔥 Firebase Studio ansehen. Es bietet eine elegante und integrierte Umgebung für das Programmieren von Vibes.

2. Vorbereitung

Dieses Codelab besteht aus zwei Phasen:

Nur Webentwicklung Hier haben Sie am meisten Spaß und es sind keine Programmierkenntnisse erforderlich. Dazu verwenden wir unsere Gemini-Benutzeroberfläche ( gemini.google.com) und p5.js.
Lokale Codierungsumgebung Hier sind ein wenig Programmier-/Scripting-Kenntnisse sowie die Installation und Verwendung von npm / npx und eines lokalen Editors wie vscode oder IntelliJ erforderlich. Dieser zweite Teil ist optional und wird nur benötigt, wenn Sie Ihre App speichern möchten, damit 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). Weitere Informationen zu Phase 2 finden Sie weiter unten.

Gemini-Benutzeroberfläche

gemini.google.com ist eine großartige Plattform, auf der Sie alle neuesten Gemini-Modelle ausprobieren und eigene Bilder und Videos erstellen können. Die App bietet viele Google-Integrationen wie Google Maps und Hotels/Flüge/Rezensionen und ist damit der ideale Begleiter für die Planung Ihres nächsten Urlaubs.

Tipp:Wenn Sie gerne programmieren, sollten Sie sich auch AI Studio ansehen. Das ist eine ähnliche Oberfläche, mit der Sie einen Prototyp für eine LLM-Interaktion erstellen (z. B. ein Bild) 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, Pädagogen und alle anderen zugänglich und inklusiv macht. Es basiert auf der Processing-Programmiersprache und vereinfacht das Erstellen interaktiver visueller und interaktiver Inhalte mit Code im Webbrowser.

Lokales Codieren [optional]

Wenn Sie Ihre Anwendung dauerhaft speichern möchten, ist eine weitere Einrichtung erforderlich:

Einen lokalen Code-Editor ( Visual Studio Code, IntelliJ usw.)
Ein Git-Konto ( github, gitlab oder bitbucket), in dem Ihr Code gespeichert werden soll.
Ein lokal installierter npm, vorzugsweise 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
Interaktion mit dem Dateisystem (Ordner und Dateien erstellen)
Interaktion mit git (git add, git commit, git push)

Wenn Ihnen etwas hier zu entmutigend erscheint, denken Sie daran: LLMs sind eine gute Hilfe. 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, können Sie Phase 2 vollständig überspringen. Phase 1 sollte lohnenswert genug sein.

3. Erstellen wir unser erstes Spiel.

Öffnen Sie gemini.google.com und wählen Sie ein codefähiges Modell aus, z. B. 2.5. Diese Auswahl kann je nach Verfügbarkeit, Kosten und Datum variieren. Zum Zeitpunkt der Erstellung dieses Artikels ist die beste Wahl:

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

Weitere Informationen zu unseren Gemini-Modellen

Unser erster Designvorschlag für ein Spiel

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

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 Logo auch ein wenig anpassen:

Mittelalterliche / futuristische / Cyberpunk-Settings
Enthält die Nachricht viele Emojis oder ein bestimmtes Emoji?
Sie lieben die Farbe Gelb oder verschiedene Lilatöne.
Vielleicht liebt Ihr Kind Einhörner, Dinosaurier oder Pokémon.

Nachdem Sie den Prompt in Ihren Browser eingefügt haben, sollten Sie beobachten, wie 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 sich ändernde 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 jetzt oben auf die Schaltfläche „Kopieren“:

Spiel in p5.js testen

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

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

Ihre Seite sollte so aussehen:

Drücken Sie abschließend die Schaltfläche WIEDERGABE.

Jetzt können zwei Dinge passieren: Entweder funktioniert Ihr Code oder er funktioniert nicht. Folgen Sie der Anleitung je nach Fall:

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

In den nächsten beiden Abschnitten erfahren Sie, wie Sie beide Bedingungen verwalten.

(Fall 1) Mein Code funktioniert nicht

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.

👏 Glückwunsch, Sie führen Ihr erstes KI-Spiel durch.

Hinweis:Solange Sie den Code haben, funktioniert die App nur in Ihrem Browser. Wenn Sie die App Ihren Familienmitgliedern und Freunden zeigen möchten, benötigen Sie eine Hosting-Lösung. Zum Glück haben wir eine gute Option für Sie. Lesen Sie weiter.

Sie sind jetzt bereit für das nächste Kapitel.

Weitere Iterationen

Jetzt ist es an der Zeit, den Code an einem sicheren Ort zu speichern, für den Fall, dass er beschädigt wird. Sie können die Iteration auch einmal wiederholen. Angenommen, der Autor mag den Doppelsprung von Super Mario besonders. Sie könnten dann Folgendes hinzufügen:

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

Du kannst alles anpassen, was du möchtest – der Kreativität sind keine Grenzen gesetzt. 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. Dein Prompt darf nur auf Englisch verfasst sein.

Tipp:Gemini zeigt in der Regel nur die Änderung an, die Sie vornehmen müssen (z. B. „Dies ist die Änderung für Funktion XYZ“). Sie können den Prompt so einstellen, dass er stattdessen den gesamten aktualisierten Code anzeigt, z. B.

"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 als Lesezeichen speichern. Vielleicht möchten Sie es in „p5js my first game“ umbenennen oder den Permalink zu Gemini notieren, z. B. " https://gemini.google.com/app/abcdef123456789" für später.

4. Führen wir diesen Code lokal aus

Sie sollten jetzt Folgendes haben:

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

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

Abhängigkeiten installieren

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

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

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

Diese Informationen sollten Sie auch hier finden.

Öffnen Sie jetzt 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 Gemini Chat-Permalink und später die Landingpage für die App einfügen.
PROMPT.md ← Hier können Sie alle Prompts hinzufügen, getrennt durch einen H2-Absatz. Wenn Sie erklären möchten, warum Sie einen bestimmten Prompt gegeben haben, können Sie ihn in drei Backticks setzen ( Beispiel).
**public/index.html** ← HTML-Code hier einfügen
**public/sketch.js** ← JS-Code hier einfügen
**public/style.css** ← CSS-Code hier kopieren

Der öffentliche Ordner kann zusätzliche Assets wie ein benutzerdefiniertes PNG enthalten.

5. Einrichten und in Firebase bereitstellen

Firebase einrichten (nur bei der Ersteinrichtung)

npm muss auf Ihrem Computer installiert sein.

Geben Sie in einem Terminal einen der folgenden Befehle ein (beides funktioniert):

# 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. Wenn Probleme auftreten, folgen Sie der Anleitung in den öffentlichen Dokumenten.

Firebase-Initialisierung

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

Sie müssen sich im 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 Console Folgendes ein: firebase init

Bewegen Sie den Cursor nach unten zu „Hosting: ..“ und drücken Sie die LEERTASTE und dann die EINGABETASTHE. Warum? Da es sich um eine Multiple-Choice-Frage handelt, müssen Sie eine Antwort auswählen und zur nächsten Seite gehen.
[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, handelt es sich dabei möglicherweise nicht um ein Firebase-Projekt. Firebase-Projekte sind eine Teilmenge von GCP-Projekten. Sie müssen zusätzliche Schritte ausführen, um daraus ein Firebase-Projekt zu machen. Dazu dient Option 3.
Wenn Sie sich noch nicht sicher sind, wählen Sie „Neues Projekt erstellen“ aus und geben Sie einen Namen wie „p5js-IHRNAME-IHREAPP“ ein (z. B. „p5js-riccardo-tetris“).

[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 so 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: Das kann zu Fehlern führen. Wenn Sie sie überschreiben, ist die neue index.html-Datei nicht mit p5js kompatibel.

Wenn alles richtig funktioniert, sollte Folgendes angezeigt werden:

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:Prü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. Denken Sie nur daran, die alte index.html aus Git oder dem p5js-Editor wiederherzustellen.

Lokales Testen

Um die Latenz der Feedbackschleife zu verkürzen, sollten Sie die Dinge zuerst lokal ausprobieren.

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

$ firebase emulators:start

sollte einen Webserver auf Port 5000 ( http://127.0.0.1:5000/) starten, damit Sie vor dem Pushen lokal testen können.

In Firebase bereitstellen

Jetzt ist es an der Zeit für den letzten Befehl:

$ firebase deploy

Dadurch sollten eine Reihe von 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

Daraufhin sollte die Hosting-URL angezeigt werden. Jetzt ausprobieren!

Wenn die Bereitstellung erfolgreich war, Sie aber eine leere Seite oder eine anderweitig fehlerhafte Bereitstellung sehen, haben Sie folgende Möglichkeiten:

Öffnen Sie die Entwicklertools Ihres Browsers, suchen Sie den Fehler und bitten Sie Gemini, Ihnen bei der Behebung zu helfen. Geben Sie dazu einen Prompt wie diesen ein:

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

[ paste detailed JS console error ]

♾️ Iterieren

Sie können diese Schritte beliebig oft wiederholen. Sie können so lange Vorschläge machen, bis Sie mit den Ergebnissen zufrieden sind.

Beachten Sie dabei Folgendes:

Die Iterationsschleife ist in der Schleife „Gemini > p5.js > Gemini“ viel schneller als in der Schleife „Gemini > lokaler Host > in der Cloud bereitstellen > App im Browser testen (Aktualisieren drücken)“.
Verwenden Sie Git, um sowohl Prompt als auch Code zu versionieren. Vielleicht möchten Sie zu Prompt N zurückkehren und N codieren. Insbesondere sollten Sie jeden einzelnen sketch.js, den Sie pushen, mit Git committen, da dort möglicherweise unentdeckte Fehler lauern.

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

6. Tipps zu Prompts

Hier sind einige Tipps, die ich mir aus meiner Erfahrung mit der Erstellung von Spielen geholt habe.

Prompt versionieren

Sie werden wahrscheinlich Fehler in Ihrem ursprünglichen Prompt finden. Sie haben eine git-Version davon. Hier gibt es einige Codepfade:

Wenn dir das Ergebnis gefällt und du mit Gemini mit nachfolgenden Unteraufforderungen iterieren möchtest, kann es interessant sein, sie alle irgendwo zu speichern (Aufgabe 1, 2, 3 – 3-Shot-Beispiel 1 – example2).
Wenn Sie die von prompt1 erstellte App nicht so wichtig finden, können Sie stattdessen den Prompt optimieren, den Code verwerfen und mit dem geänderten Code neu beginnen (prompt1 v1, prompt1 v2, prompt1 v3 usw.).

Sie können natürlich beide Ansätze kombinieren.

Mobilgerätefunktionen

Je nach Art des Spiels, das Sie erstellen, ist möglicherweise eine Interaktion mit dem Nutzer erforderlich. Ist für diese Interaktion eine Tastatur erforderlich? Oder kann es durch einfaches Tippen auf das Display verwendet werden (z. B. auf einem Smartphone)? Geben Sie dies im Prompt deutlich an. Möglicherweise müssen Sie einige Tasten auf der Tastatur erstellen (siehe Tetris-3D-Beispiel). Weitere Informationen zu Problemen mit der Kompatibilität mit Mobilgeräten finden Sie unter dungemoji.

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 Änderungen an der Benutzeroberfläche vornehmen möchten (z. B. den Titel kleiner machen oder die Punktzahl verringern), können Sie auch Screenshots des Spiels anhängen. Das Feedback zum Code war noch nie so unterhaltsam!

7. Glückwunsch!

🎉 Herzlichen Glückwunsch zum Abschluss des Codelabs.

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

Behandelte Themen

Erstellen Sie ein Spiel über Gemini 2.5.
In Firebase bereitstellen

Jetzt ist es an der Zeit, 👥 damit anzugeben! Warum teilen Sie Ihr neuestes Spiel (your-project.web.app) nicht auf LinkedIn oder Twitter mit dem Hashtag #VibeCodeAGameWithGemini und taggen Sie vielleicht den Autor auf LinkedIn? So können wir herausfinden, wie ansprechend dieses Codelab ist, und möglicherweise weitere dieser Art erstellen.

Mehr davon!

Weitere Ressourcen finden Sie in diesen Spielen und Aufgaben:

Fünf Kinderspiele mit Gemini 2.5 und p5.js an einem Wochenende programmieren In diesem Artikel werden Sie anhand von sechs Beispielen durch den Denkprozess beim Vibe-Coding eines Spiels geführt.
palladius/genai-googlecloud-scripts (GitHub-Repository mit etwa 10 Apps – Code und Prompt): Tetris, Pacman, Connect 4 und sogar ein Rogue-Klon für Nostalgiker! Diese enthält die Prompts aller dieser Spiele. Wähle deinen Favoriten aus, passe den Prompt an und lass es krachen!

Wenn Ihnen das heute zu viel Aufwand erscheint, können Sie auch 🔥 Firebase Studio ausprobieren. Dort finden Sie die gesamte Loop von Idee > Prompt > Code > App in einem einzigen Browserfenster.

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

Das Endspiel könnte so aussehen:

Ein 3D-Tetris
Ein Sprachspiel
Ein Rogue-Klon
Ein Pacman-Klon.

Auch hier gilt: Englisch ist die einzige Sprache, die wir unterstützen.

🎉 Viel Spaß beim Programmieren!

Fehler melden