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

29 min restantes

À propos de cet atelier de programmation

Dernière mise à jour : mai 13, 2025

Rédigé par Riccardo Carlesso

1. Introduction

Le 25 mars 2025, Google a lancé Gemini 2.5. L'un des aspects les plus marquants 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 invite en une seule ligne

Dans cet atelier de programmation, vous allez découvrir le "code de vibe" d'une application pour enfants simple, en partant d'une invite courante, puis en la personnalisant à votre guise. Nous allons tester l'application sur p5.js. Enfin, nous allons transférer ces modifications vers Firebase Hosting. Le plus spectaculaire est que l'ensemble de la pile est actuellement sans frais.

Points abordés

Utilisez Gemini 2.5 pour créer une application de jeu avec Vibe Code.
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. Ce code n'est pas déterministe. Par conséquent, cet atelier de programmation contient des consignes, car l'auteur ne connaît pas votre sortie. Veuillez également NE PAS utiliser ce code en production.

Si vous avez aimé cet atelier de programmation, n'hésitez pas à découvrir 🔥 Firebase Studio, qui offre une expérience de codage fluide et intégrée.

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 compétences en codage. Pour ce faire, nous utiliserons notre UI Gemini ( gemini.google.com) et p5.js.
Environnement de codage local Pour ce faire, vous devez posséder quelques compétences en codage / script, et installer et utiliser npm / npx et un éditeur local, comme vscode ou IntelliJ. Cette deuxième partie est facultative et n'est nécessaire que si vous souhaitez conserver votre application pour que vos amis et votre famille puissent y jouer depuis leur mobile ou leur ordinateur.

La phase 1 ne nécessite qu'un navigateur et un ordinateur (un grand écran est recommandé). Pour la phase 2, lisez la suite.

IUGemini

gemini.google.com est une excellente plate-forme pour essayer tous vos derniers modèles Gemini, et créer vos propres images et vidéos. Il est doté d'intégrations Google, comme Google Maps et les hôtels/vols/avis, ce qui en fait le compagnon idéal pour planifier vos prochaines vacances.

Conseil:Si vous aimez coder, essayez également AI Studio, une interface similaire dans laquelle vous pouvez prototyper une interaction LLM (par exemple, créer une image) et obtenir le code Python directement depuis la page.

p5.js

p5.js est une bibliothèque JavaScript Open Source et sans frais qui rend le codage créatif accessible et inclusif pour les artistes, les concepteurs, les enseignants et toute autre personne. Basé sur le langage Processing, il simplifie le processus de création de contenus visuels et interactifs à l'aide de code dans le navigateur Web.

Codage local [facultatif]

Si vous souhaitez conserver votre application, vous devez effectuer d'autres configurations:

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.

Vous devez également posséder 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)
Capacité à interagir avec git (git add, git commit, git push).

Si vous trouvez que certaines informations sont difficiles à comprendre, n'oubliez pas que les LLM sont là pour vous aider. Vous pouvez utiliser le modèle "Gemini 2.0 flash" ou un modèle équivalent, par exemple, pour obtenir des suggestions. Si c'est toujours 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 de cet article, la meilleure option est la suivante:

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 première invite de jeu

Comme vous pouvez le voir dans cette vidéo, une invite initiale peut être aussi simple que celle-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:

Paramètres médiévaux / futuristes / cyberpunk
Des emoji en grande quantité ou un emoji en particulier ?
Vous aimez le jaune ou les différentes nuances de violet.
Votre enfant aime peut-être les licornes, les dinosaures ou les Pokémon.

Une fois que vous avez collé la requête dans votre navigateur, vous devriez observer Gemini penser. En effet, Gemini 2.5 est un modèle de réflexion. Il lance donc un certain nombre de tâches dont vous pouvez observer l'évolution au fil du temps. Vous pouvez cliquer sur le menu déroulant en cours de modification 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 de copie en haut de l'écran:

Tester le jeu sur p5.js

Il est maintenant temps de tester le jeu !

Ouvrez l'éditeur p5.js sur 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 PLAY (LECTURE).

Deux choses peuvent se produire: votre code fonctionne ou échoue. Suivez les instructions en fonction de votre situation:

Votre code échoue
Votre code fonctionne dès le premier essai.

Voyons dans les deux paragraphes suivants comment gérer ces deux conditions.

(Cas 1) Mon code échoue !

Si vous recevez une erreur semblable, 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 exécutez votre premier jeu avec IA !

Remarque:Même si vous disposez du code, l'application ne fonctionne que dans votre navigateur. Si vous souhaitez montrer l'application à votre famille et à vos amis, vous avez besoin d'une solution d'hébergement. Heureusement, nous avons une excellente solution à vous proposer. Lisez la suite.

Vous êtes maintenant prêt à passer au chapitre suivant.

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 ceci:

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

Vous pouvez modifier tout ce que vous voulez, les possibilités sont infinies ! Vous pouvez enregistrer le nom du personnage pour obtenir de meilleurs scores, augmenter la vitesse au fil du temps pour rendre le jeu plus difficile, etc. Votre requête est limitée à l'anglais.

Remarque:Gemini ne vous indique généralement que la modification que vous devez appliquer (par exemple, il s'agit de la modification de la fonction XYZ). Vous pouvez définir l'invite pour qu'elle vous fournisse le code complet mis à jour, par exemple :

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

Cela vous permettra de copier-coller plus facilement.

Mises en garde

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

4. Exécutons ce code en local

À ce stade, vous devez avoir:

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

Il s'agit de la partie la plus difficile de l'atelier de programmation. Vous devez disposer d'une certaine expérience de base en codage.

Installer les dépendances

Si npm et node ne sont pas installés, nous vous recommandons d'installer npm via un gestionnaire de versions, tel que nvm . Suivez les instructions d'installation pour votre système d'exploitation.

Nous supposons également que vous utilisez un IDE de codage. Nous utiliserons le code Visual Studio dans nos captures d'écran et exemples, mais tout autre code fonctionne.

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 de dossiers finale 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 de public/:

README.md ← Vous pouvez ici ajouter le lien permanent de Gemini Chat et la page de destination de l'application lorsqu'elle sera disponible.
PROMPT.md ← Vous pouvez ajouter ici toutes vos invites, séparées par un paragraphe H2. Si vous souhaitez expliquer pourquoi vous avez donné une requête spécifique, vous pouvez l'encadrer entre trois crochets arrière ( 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 éléments supplémentaires, comme un fichier PNG personnalisé.

5. Configurer et déployer sur Firebase

Configurer Firebase (première fois uniquement)

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, suivez les documents publics.

Initialisation de Firebase

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

Assurez-vous que vous vous trouvez dans le répertoire situé juste au-dessus du répertoire public/ qui contient vos fichiers. La liste (ls -al ou dir) devrait se présenter comme suit:

$ ls 
PROMPT.md
README.md
public/

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

Faites défiler l'écran jusqu'à "Hébergement: ..", puis saisissez ESPACE, puis ENTRÉE. (Pourquoi ? Comme il s'agit d'une question à choix multiples, vous devez à la fois sélectionner la 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 un projet Cloud existant, 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 les transformer en projets Firebase, ce qui est l'objectif de l'option 3.
Si vous ne savez pas quoi choisir, cliquez sur "Créer un projet" et ajoutez un nom tel que "p5js-VOTRENOM-VOTREAPPLICATION" (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 configuré public/ intentionnellement).

[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

[step 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 l'écrasez, 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 est plus longue que 16 lignes et/ou contient le mot "firebase", vous avez écrasé par erreur des fichiers p5js. Aucun problème. N'oubliez pas de récupérer l'ancien fichier index.html à partir de Git ou de l'éditeur p5js.

Test local

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

Pour ce faire, vous pouvez essayer la puissante suite de 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/) afin que vous puissiez effectuer des tests en local avant de pousser.

Déployer sur Firebase

Il est maintenant temps de passer à la dernière commande:

$ 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 alors obtenir l'URL d'hébergement. Essayez !

Si le déploiement réussit, mais que vous observez une page vide ou un déploiement défectueux, vous pouvez effectuer plusieurs opérations:

Ouvrez les "Outils pour les développeurs" de votre navigateur, recherchez l'erreur, puis demandez à 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 à envoyer des requêtes jusqu'à ce que les résultats vous conviennent.

Il est important de noter quelques points:

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éploiement dans Cloud Run > test de l'application dans le navigateur (appuyer sur "Actualiser").
Utilisez Git pour gérer les versions de l'invite et du code. Vous souhaitez peut-être pouvoir revenir à l'invite N et au code N. En particulier, vous devez effectuer un commit Git pour chaque sketch.js que vous poussez, car des bugs pourraient se cacher et ne pas être détectés.

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

6. Conseils concernant les requêtes

Voici quelques conseils que j'ai pu glaner après avoir créé de nombreux jeux.

Gérer les versions de votre requête

Vous trouverez probablement des erreurs dans votre requête initiale. 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 avec des requêtes secondaires ultérieures, il peut être intéressant de les suivre toutes quelque part (requêtes 1,2,3 - exemple1 à trois prises - example2).
Si vous n'êtes pas attaché à l'application créée par prompt1, vous pouvez plutôt perfectionner l'invite, supprimer le code et redémarrer avec le code modifié (invite 1 v1, invite 1 v2, invite 1 v3, etc.).

Vous pouvez bien sûr combiner les deux approches.

Fonctionnalités mobiles

Selon le jeu que vous créez, vous devrez peut-être interagir avec l'utilisateur. Cette interaction nécessite-t-elle un clavier ? Ou peut-on l'utiliser simplement en appuyant sur l'écran (par exemple, avec un mobile) ? Veillez à être explicite à ce sujet dans la requête. Vous devrez peut-être créer des boutons sur votre clavier (voir mon exemple Tetris 3D). Consultez également les problèmes de compatibilité mobile liés aux emojis de crottes de vache.

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

Comme Gemini ne peut pas voir votre interaction avec p5js, veillez à coller sur Gemini toutes les erreurs JavaScript. Notez que Gemini est multimodal. Si vous apportez des modifications à l'interface utilisateur (par exemple, en réduisant la taille du titre ou en diminuant le score), vous pouvez également joindre des captures d'écran du jeu. L'affichage des commentaires de codage n'a jamais été aussi amusant !

7. Félicitations !

🎉 Félicitations, vous avez terminé l'atelier de programmation.

Nous avons vu à quel point il est 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 via 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 à quel point cet atelier de programmation est attrayant et, éventuellement, d'en écrire d'autres.

Je veux en savoir plus !

Pour en savoir plus, consultez les jeux et les invites suivants:

Codez cinq jeux pour enfants avec Gemini 2.5 et p5.js en un week-end ! Cet article vous guidera tout au long du processus de codage d'un jeu avec six exemples.
palladius/genai-googlecloud-scripts (dépôt GitHub contenant environ 10 applications : code et invite) : Tetris, Pacman, Connect 4 et même un clone de Rogue pour les nostalgiques ! Il contient les requêtes de tous ces jeux. Choisissez votre musique préférée, adaptez l'invite et profitez-en !

Si ce que vous avez fait aujourd'hui vous semble trop compliqué, vous pouvez également essayer 🔥 Firebase Studio, où la boucle idée > requête > code > application est entièrement contenue dans une seule fenêtre de navigateur.

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

Le jeu final peut se présenter comme suit:

Un tetris 3D
Un jeu linguistique
Clone malveillant
Clone de Pac-Man.

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

🎉 À vous de jouer !

Signaler une erreur