Codez un jeu pour enfants avec Vibe Code et publiez-le avec Firebase.

1. Introduction

Le 25 mars 2025, Google a lancé Gemini 2.5. L'un des aspects les plus mémorables de ce lancement est qu'il a permis à tous les utilisateurs de tester la fonctionnalité "Codage avancé" [vidéo]:

Gemini 2.5 : créez votre propre jeu de dinosaures à partir d'une simple ligne de requête

Dans cet atelier de programmation, vous allez découvrir le "codage d'ambiance" avec une application simple pour enfants. Vous commencerez par une invite courante, puis vous la personnaliserez à votre guise. Nous allons tester l'application sur p5.js. Enfin, nous allons transférer ces modifications vers Firebase Hosting.Le plus spectaculaire, c'est que l'ensemble de la pile est actuellement sans frais !

Points abordés

Utilisez Gemini 2.5 pour coder une application de jeu.
Tester le code sur p5js.org
Comment itérer et affiner votre requête / application.
Héberger une application statique sur Firebase

Remarque : Cet atelier de programmation utilise du code généré par IA. Il n'est donc pas déterministe. Il contient des consignes, car l'auteur ne connaît pas votre résultat. De plus, n'utilisez PAS ce code en production !

2. Prérequis

Cet atelier de programmation se déroule en deux phases :

Développement Web uniquement. C'est là que vous vous amuserez le plus, et vous n'avez pas besoin de savoir coder. Pour ce faire, nous utiliserons notre interface utilisateur Gemini ( gemini.google.com) et p5.js.
Environnement de codage local : C'est là qu'un peu de compétences en programmation / scripting sont nécessaires, ainsi que l'installation et l'utilisation de npm / npx et d'un éditeur local, comme vscode ou IntelliJ, ou tout autre. Cette deuxième partie est facultative et n'est nécessaire que si vous souhaitez rendre votre application persistante pour que vos amis et votre famille puissent y jouer depuis leur mobile ou leur ordinateur.

La seule condition préalable pour la phase 1 est de disposer d'un navigateur et d'un ordinateur (un grand écran sera utile). Pour la phase 2, lisez la suite.

Interface utilisateur Gemini

gemini.google.com est une excellente plate-forme pour essayer les derniers modèles Gemini. Vous pouvez également créer vos propres images et vidéos. Il est doté de nombreuses intégrations Google, comme Google Maps, Hôtels, Vols et Avis, ce qui en fait le compagnon idéal pour planifier vos prochaines vacances !

Remarque : Si vous aimez coder, pensez également à tester AI Studio, une interface similaire qui vous permet de prototyper une interaction LLM (par exemple, créer une image) et d'obtenir le code Python directement depuis la page.

p5.js

p5.js est une bibliothèque JavaScript Open Source sans frais qui rend le codage créatif accessible et inclusif pour les artistes, les designers, les éducateurs et tous les autres utilisateurs. Il est basé sur le langage Processing et simplifie la création de contenus visuels et interactifs à l'aide de code dans le navigateur Web.

Codage local [facultatif]

Si vous souhaitez rendre votre application persistante, vous devez effectuer une configuration supplémentaire :

Un éditeur de code local ( Visual Studio Code, IntelliJ, etc.)
Un compte Git ( github / gitlab / bitbucket) où conserver votre code.
Un npm installé localement, de préférence dans l'espace utilisateur (via npx ou une technologie équivalente).

Nous allons également configurer un compte Firebase plus tard.

Nous exigeons également certaines compétences en codage, par exemple :

Possibilité d'installer un package npm
Possibilité d'interagir avec le système de fichiers (créer des dossiers et des fichiers)
Vous savez interagir avec git (git add, git commit, git push).

Si vous trouvez que tout cela est intimidant, n'oubliez pas que les LLM peuvent vous aider. Vous pouvez utiliser le modèle "Gemini 2.0 flash" ou un modèle équivalent, par exemple, pour obtenir des suggestions. Si cela reste trop difficile, vous pouvez ignorer complètement la phase 2. La phase 1 devrait être suffisamment gratifiante.

3. Créons notre premier jeu !

Ouvrez gemini.google.com et choisissez un modèle compatible avec le code, par exemple 2.5. Ce choix peut varier en fonction de la disponibilité, du coût et de la date. Au moment de la rédaction, la meilleure option serait :

Gemini 2.5 Flash (itération plus rapide)
Gemini 2.5 Pro (meilleure sortie)

Pour en savoir plus sur nos modèles Gemini, cliquez ici.

Notre premier prompt de jeu

Comme vous pouvez le voir dans cette vidéo, un prompt initial peut être aussi simple que celui-ci :

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

N'hésitez pas à personnaliser un peu cette réponse :

Univers médiévaux / futuristes / cyberpunk
Est-ce qu'il y a beaucoup d'emoji ou un emoji en particulier ?
Vous aimez le jaune ou différentes nuances de violet.
Peut-être que votre enfant aime les licornes, les dinosaures ou les Pokémon.

Une fois que vous avez collé la requête dans votre navigateur, vous devriez voir Gemini réfléchir. En effet, Gemini 2.5 est un modèle de réflexion. Il va donc lancer un certain nombre de tâches dont vous pourrez observer l'évolution au fil du temps. Vous pouvez cliquer sur le menu déroulant pour voir ce qui se passe, ou simplement attendre le résultat :

À la fin, vous devriez avoir un code JavaScript fonctionnel.

Vous pouvez maintenant cliquer sur le bouton "Copier" en haut :

Tester le jeu sur p5.js

Il est maintenant temps de tester le jeu !

Ouvrez l'éditeur p5.js : https://editor.p5js.org/
Sélectionnez et supprimez le code sketch.js existant.
Collez votre code.

Votre page doit se présenter comme suit :

Enfin, vous pouvez appuyer sur le bouton LECTURE.

Deux scénarios sont possibles : soit votre code fonctionne, soit il échoue. Suivez les instructions ci-dessous en fonction de votre situation :

Votre code échoue
Votre code fonctionne du premier coup !

Dans les deux prochains paragraphes, nous allons voir comment gérer ces deux conditions.

(cas 1) Mon code échoue !

Si vous obtenez une erreur de ce type, vous pouvez simplement la copier et la coller dans Gemini. Laissez-le corriger le code pour vous !

(cas 2) Mon code fonctionne !

Si votre code fonctionne, un jeu visuel devrait s'afficher à droite de la page.

👏 Félicitations, vous venez de lancer votre premier jeu d'IA !

Remarque : Bien que vous disposiez du code, l'application ne fonctionne que dans votre navigateur. Si vous souhaitez montrer l'application à vos proches, vous avez besoin d'une solution d'hébergement. Heureusement, nous avons une excellente option à vous proposer. Poursuivez votre lecture.

Vous êtes maintenant prêt à passer à la suite.

Autres itérations

Il est maintenant temps d'enregistrer votre code quelque part, au cas où vous le casseriez. Si vous le souhaitez, vous pouvez effectuer une itération. Par exemple, l'auteur aime beaucoup le double saut de Super Mario. Vous pouvez donc ajouter quelque chose comme :

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

Vous pouvez modifier ce que vous voulez, il n'y a pas de limite ! Vous pouvez, par exemple, enregistrer le nom du personnage pour les scores plus élevés ou augmenter la vitesse au fil du temps pour rendre le jeu plus difficile. Votre requête doit être rédigée en anglais.

Remarque : Gemini a tendance à ne vous donner que la modification à appliquer (par exemple, "voici la modification pour la fonction XYZ"). Vous pouvez définir l'invite de sorte qu'elle vous fournisse l'intégralité du code mis à jour, par exemple avec

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

: cela vous permettra de couper et coller plus facilement.

Mises en garde

Vous pouvez ajouter votre discussion Gemini à vos favoris. Vous pouvez par exemple le renommer "p5js my first game" ou noter le lien permanent vers Gemini, comme " https://gemini.google.com/app/abcdef123456789", pour plus tard.

4. Exécutons ce code en local

À ce stade, vous devriez avoir :

Fenêtre de navigateur Gemini ouverte avec du code fonctionnel.
Fenêtre de navigateur p5.js ouverte avec un jeu fonctionnel
Un environnement de programmation local avec npm installé.

Il s'agit de la partie la plus difficile de l'atelier de programmation. Vous devez avoir quelques connaissances de base en programmation.

Installer des dépendances

Si npm et node sont manquants, le mieux est d'installer npm à l'aide d'un gestionnaire de versions, tel que nvm . Suivez les instructions d'installation pour votre système d'exploitation.

Nous partons également du principe que vous utilisez un IDE de programmation. Nous utiliserons Visual Studio Code dans nos captures d'écran et nos exemples, mais n'importe quel outil convient.

Configurer l'environnement local

C'est le moment de créer votre propre structure de fichiers.

Un script de configuration est fourni à titre d'illustration. Vous pouvez le faire manuellement en créant des dossiers et des fichiers :

# 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

La structure finale des dossiers doit se présenter comme suit :

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

Vous devriez également pouvoir le trouver ici.

Ouvrez maintenant votre éditeur de code préféré (par exemple, code my-first-vibecoding-project/) et commencez à coller le contenu de editor.p5js.org dans les trois fichiers sous public/:

README.md ← Vous pouvez insérer ici le lien permanent de la discussion Gemini et la page de destination de l'application lorsqu'elle sera disponible.
PROMPT.md ← Ici, vous pouvez ajouter toutes vos requêtes, séparées par un paragraphe H2. Si vous souhaitez expliquer pourquoi vous avez donné un certain prompt, vous pouvez l'encadrer de trois guillemets inversés ( exemple).
**public/index.html** ← copiez votre code HTML ici
**public/sketch.js** ← copiez votre code JS ici
**public/style.css** ← copiez votre code CSS ici

Le dossier public peut héberger des composants supplémentaires, comme un fichier PNG personnalisé.

5. Configurer et déployer sur Firebase

Configurer Firebase (une seule fois)

Assurez-vous que npm est installé sur votre ordinateur.

Dans un terminal, saisissez l'une des commandes suivantes (les deux fonctionnent) :

# 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

Vous devriez maintenant pouvoir appeler la commande firebase. En cas de problème, consultez la documentation publique.

Initialisation de Firebase

Dans cette section, nous allons configurer Firebase Hosting. Il s'agit d'un flux très simple, mais il peut vous falloir un certain temps pour vous y familiariser la première fois.

Assurez-vous de vous trouver dans le répertoire situé juste au-dessus du répertoire public/ contenant vos fichiers. La fiche (ls -al ou dir) devrait se présenter comme suit :

$ ls 
PROMPT.md
README.md
public/

[Étape 1] : Sur la console, saisissez firebase init.

À l'aide des curseurs, accédez à "Hébergement : ..", puis saisissez ESPACE et ENTRÉE. (Pourquoi ? (Comme il s'agit d'une question à choix multiples, vous devez à la fois sélectionner une réponse et passer à la page suivante.)
[Étape 2] Vous pouvez maintenant choisir un projet existant (option 1) ou en créer un (option 2) :

Remarque : Si vous avez déjà un projet Cloud, il ne s'agit peut-être pas d'un projet Firebase. Les projets Firebase sont un sous-ensemble des projets GCP. Vous devez effectuer des tâches supplémentaires pour en faire un projet Firebase. C'est à cela que sert l'option 3.
Si vous n'êtes pas sûr, utilisez l'option "Créer un projet" et ajoutez un nom tel que "p5js-VOTRENOM-VOTREAPPLI" (par exemple, "p5js-riccardo-tetris").

[step 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
Appuyez sur ENTRÉE.

[step 4] ? What do you want to use as your public directory? (public)
Appuyez sur ENTRÉE (nous avons volontairement défini public/).

[step 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
appuyez sur ENTRÉE (non)

[step 6] ? Set up automatic builds and deploys with GitHub? No
Appuyez sur ENTRÉE : NON

[Étape 7] ? File public/index.html already exists. Overwrite? (y/N)
Appuyez sur ENTRÉE (non).
AVERTISSEMENT : Cette opération peut être source d'erreurs. Si vous écrasez le fichier, le nouvel index.html sera incompatible avec p5js.

Si tout fonctionne correctement, vous devriez voir ceci :

Ces actions devraient avoir créé quelques fichiers :

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

En particulier, .firebaserc doit contenir l'ID de votre projet, que vous pouvez extraire de manière programmatique avec la commande suivante : cat .firebaserc | jq .projects.default -r

Avertissement : Vérifiez le fichier index.html. Si elle comporte plus de 16 lignes et/ou le mot "firebase", cela signifie que vous avez écrasé les fichiers p5js par erreur. Pas de problème, il vous suffit de récupérer l'ancien fichier index.html depuis Git ou l'éditeur p5.js.

Test local

Pour réduire la latence de la boucle de rétroaction, vous pouvez d'abord essayer les choses localement.

Pour ce faire, vous pouvez essayer la puissante suite CLI de l'équipe Firebase. Exemple :

$ firebase emulators:start

doit démarrer un serveur Web sur le port 5000 ( http://127.0.0.1:5000/ ) pour que vous puissiez effectuer des tests en local avant d'envoyer le code.

Déployer sur Firebase

Il est maintenant temps d'exécuter la commande finale :

$ firebase deploy

Cela devrait déclencher un certain nombre d'actions. Les dernières lignes doivent se présenter comme suit :

$ 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

Vous devriez obtenir l'URL d'hébergement. Essayez !

Si le déploiement réussit, mais que vous constatez une page vierge ou un déploiement défectueux, vous pouvez procéder comme suit :

Ouvrez les outils pour les développeurs de votre navigateur et recherchez l'erreur. Demandez ensuite à Gemini de vous aider à la corriger à l'aide d'une requête comme celle-ci :

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

[ paste detailed JS console error ]

♾️ Itérez !

Vous pouvez répéter ces étapes autant de fois que vous le souhaitez. Vous pouvez continuer à saisir des requêtes jusqu'à ce que les résultats vous conviennent.

Il est important de noter les points suivants :

La boucle d'itération est beaucoup plus rapide dans la boucle Gemini > p5.js > Gemini que dans la boucle Gemini > hôte local > déployer sur Cloud Run > tester l'application dans le navigateur (actualiser).
Utilisez git pour gérer les versions des requêtes et du code. Vous pouvez revenir à l'invite N et au code N. En particulier, vous devez effectuer un commit Git pour chaque sketch.js que vous envoyez, car des bugs peuvent s'y cacher sans être détectés.

Notez que certains jeux fonctionnent bien avec un clavier, mais pas avec une souris ni avec le doigt sur un téléphone mobile. C'est le moment idéal pour améliorer le code.

6. Conseils pour rédiger des requêtes

Voici quelques conseils basés sur mon expérience de création de jeux.

Gérer les versions de votre requête

Vous trouverez probablement des erreurs dans votre requête d'origine. avoir une version git. Il existe plusieurs chemins de code :

Si vous aimez ce que vous voyez et que vous souhaitez itérer avec Gemini à l'aide de sous-requêtes ultérieures, il peut être intéressant de les suivre toutes quelque part (requêtes 1,2,3 – exemple 1 à trois reprises – example2).
Si vous n'êtes pas attaché à l'application créée par la requête 1, vous pouvez plutôt perfectionner la requête, supprimer le code et recommencer avec le code modifié (requête 1 v1, requête 1 v2, requête 1 v3, etc.).

Vous pouvez bien sûr combiner les deux approches.

Fonctionnalités mobiles

Selon le jeu que vous créez, vous aurez peut-être besoin d'une interaction avec l'utilisateur. Cette interaction nécessite-t-elle un clavier ? Ou peut-il être utilisé en appuyant simplement sur l'écran (par exemple, avec un mobile) ? Veillez à le préciser dans la requête. Vous devrez peut-être créer des boutons sur votre clavier (voir mon exemple de Tetris 3D). Consultez également les problèmes de compatibilité mobile liés à dungemoji.

Envoyer des commentaires sur les erreurs JavaScript / captures d'écran directement à Gemini

Comme Gemini ne peut pas voir votre interaction avec p5js, veillez à coller les erreurs JavaScript dans Gemini. Notez que Gemini est multimodal. Par conséquent, si vous avez des modifications de l'UI (par exemple, réduire la taille du titre ou diminuer le score), vous pouvez également joindre des captures d'écran du jeu. Les commentaires sur le code n'ont jamais été aussi amusants !

7. Félicitations !

🎉 Bravo ! Vous avez terminé cet atelier de programmation.

Nous avons vu à quel point il était facile de créer un jeu avec Gemini et comment Firebase fournit une solution d'hébergement simple pour conserver et partager votre jeu avec d'autres utilisateurs.

Points abordés

Créez un jeu avec Gemini 2.5.
Déployer sur Firebase

Il est maintenant temps de 👥 vous en vanter ! Pourquoi ne pas partager votre dernier jeu (your-project.web.app) sur LinkedIn ou Twitter avec le hashtag #VibeCodeAGameWithGemini (et peut-être taguer l'auteur sur LinkedIn) ? Cela nous permettra de savoir si cet atelier de programmation est accrocheur et, éventuellement, d'en écrire d'autres de ce type.

J'en veux plus !

Si vous recherchez d'autres ressources, consultez ces jeux et ces requêtes :

Coder cinq jeux pour enfants avec Gemini 2.5 et p5.js en un week-end ! Cet article vous guidera dans le processus de réflexion pour coder l'ambiance d'un jeu à l'aide de six exemples.
palladius/genai-googlecloud-scripts (dépôt GitHub avec une dizaine d'applications : code et invite) : Tetris, Pacman, Puissance 4 et même un clone de Rogue pour les nostalgiques ! Il contient les requêtes de tous ces jeux. Choisissez votre préférée, adaptez la requête et laissez-vous emporter !

Voici quelques exemples de jeux que vous pouvez créer :

Le jeu final peut se présenter comme suit :

Un Tetris en 3D
Un jeu linguistique
Un clone malveillant
Clone de Pac-Man.

Encore une fois, l'anglais est la seule langue acceptée.

🎉 Bonne programmation !