Créer un jeu avec l’IA gratuitement : Gemini dessine, Claude construit (sans coder)

Tu peux faire un jeu jouable avec l’IA sans écrire une seule ligne de code : Gemini dessine les images, tu les donnes à Claude pour qu’il en fasse un jeu, et tu joues dans ton navigateur. La première version jouable du jeu ci-dessous était prête en moins de 10 minutes. Un jeu comme celui-ci demandait avant quelques semaines.

Voici le jeu dont je parle. Clique dessus une fois, puis joue : le clic gauche tire, le clic droit lance une grenade. Il y a un bouton plein écran dans la barre du haut.

L’idée : une IA dessine, une autre IA construit

Une IA de discussion écrit très bien le code d’un petit jeu, mais elle ne sait pas te dessiner une ville en ruines sombre, une meute de zombies et une tourelle laser dans le même style. Une IA d’images dessine tout ça, mais elle ne peut pas faire bouger les images. Alors j’ai pris deux outils et j’ai donné à chacun le travail qu’il fait le mieux.

• Gemini a dessiné les images : le décor, les zombies et les armes.
• Claude a pris ces images, les a découpées en morceaux séparés, a monté la scène et fait les niveaux.

Tu n’es pas lié à ces deux-là. N’importe quelle IA qui fait des images peut dessiner, et n’importe quelle IA de discussion qui écrit du code peut construire. ChatGPT et Gemini peuvent aussi écrire la partie code, et ils suffisent pour des jeux plus simples faits de formes et de couleurs unies. Ce sont les images qui donnent à un jeu l’air d’un vrai jeu.

Ce qu’il te faut

• Une IA qui fait des images. J’ai utilisé Gemini.
• Une IA de discussion qui écrit du code. J’ai utilisé Claude, et ChatGPT ou Gemini marchent aussi.
• Le navigateur Chrome. Tu n’as aucun programme à installer.

Tu peux commencer gratuitement, mais les formules gratuites ont des limites quotidiennes d’images et de messages, et les règles changent d’une formule à l’autre. Beaucoup d’outils d’images n’autorisent l’usage commercial des images que dans une formule payante, alors lis ce que dit la tienne si tu comptes partager ou vendre ton jeu. Cet article explique comment faire vite un jeu avec l’IA, ce n’est pas un conseil juridique.

Pour l’hébergement, l’endroit sur internet où le jeu est stocké pour que tout le monde puisse l’ouvrir, j’ai utilisé mon propre site web, celui sur lequel tu lis ceci. Tu peux faire pareil avec le tien, et il existe d’autres options, que j’explique plus bas.

Si tu n’as pas encore de site web, il te faut d’abord un hébergement. Une solution simple est Bluehost. C’est un hébergeur dont le créateur de sites par IA associe l’hébergement à un site de départ, ce qui t’évite la page blanche, et la plupart des offres d’hébergement te laissent téléverser tes propres fichiers, par exemple un seul fichier de jeu. Regarde sur leur page les offres et les prix actuels avant de décider, car les promotions changent.

Étape 1 : choisis le jeu, puis demande les images à l’IA d’images

Avant de dessiner quoi que ce soit, réfléchis au genre de jeu que tu veux. Un jeu de défense où tu tiens un mur face à des ennemis, un shooter spatial, un labyrinthe, un jeu de cartes ? Et à quoi doit-il ressembler : une ville en ruines sombre, une forêt lumineuse, l’espace ? De quels personnages as-tu besoin : un héros, quelques ennemis, un boss ? Tu n’as pas à tout décider tout seul. Demande d’abord des idées à l’IA, et tu en auras une poignée en quelques secondes.

Tu peux commencer par une demande comme celle-ci : « Je veux faire un jeu simple qui tourne dans le navigateur, dans un seul fichier HTML. Donne-moi cinq idées de jeux faciles à construire. Pour chacune, dis en une phrase ce que fait le joueur, à quoi ressemblerait le décor et de quels personnages ou objets j’aurais besoin d’images. »

Choisis l’idée qui te plaît le plus, change ce que tu veux, et tu sais maintenant exactement quelles images demander. Un jeu simple en demande trois types : un décor, les ennemis et les armes. Demande chacun séparément, et demande toujours le même style, pour que tout ait l’air de faire partie du même ensemble. Voici le genre de demande qui marche.

Pour le décor, j’ai demandé quelque chose comme ça : « Dessine un fond de jeu vu de dessus pour un jeu de défense de base : une route en ruines fissurée en haut et un solide mur de métal avec un portail en bas. Style pixel art sombre et crasseux, image large en 16:9, sans texte et sans personnages. »

Pour les ennemis : « Dessine une planche de sprites d’un cyber-zombie vert dans six poses : deux en marchant, une les bras tendus, une qui attaque et deux autres. Le même personnage et la même taille dans chaque pose, vu de face, avec un espace net entre les poses, sur un fond gris uni. Le même style pixel art que le fond. »

Et pour les armes et les effets : « Dessine une tourelle de science-fiction en six images, immobile et en train de tirer, un portail laser lumineux, une explosion en quatre images et un trait d’énergie bleu. Le même style pixel art, sur un fond gris uni. »

Une chose que j’ai apprise : si tu demandes un « fond transparent », beaucoup d’outils d’images dessinent dans l’image un faux damier gris et blanc, comme s’il faisait partie du dessin. Une couleur unie marche mieux. Claude peut l’enlever ensuite.

Étape 2 : donne les images à l’IA de discussion

Ouvre Claude, joins les images et décris le jeu avec des mots simples. Tu n’as pas besoin de savoir comment fonctionne un jeu. Dis ce que tu veux voir et faire, et laisse l’IA s’occuper du code. Par exemple :

« Voici trois images : un décor, une planche de sprites de zombies et une planche de tourelle. Découpe toi-même les planches en images séparées et fais un jeu pour navigateur en un seul fichier. Une tourelle en bas défend un mur contre des zombies qui arrivent en 10 vagues. La tourelle vise avec la souris et tire avec le bouton gauche, le bouton droit lance une grenade. Chaque zombie rapporte des crédits pour acheter des améliorations. Ajoute des effets sonores et un boss aux vagues 5 et 10. Fais un écran de départ et un écran de victoire ou de fin de partie. »

Dans mon cas, Claude a découpé les planches en morceaux, placé le décor, monté la scène et écrit les niveaux. Quelques minutes plus tard, la première version était déjà jouable. Ensuite, j’ai passé plus de temps sur les extras, c’est l’étape 4.

Étape 3 : joue sans rien enregistrer

Claude affiche beaucoup de réponses dans un aperçu directement dans la discussion. Si ton code vient plutôt de ChatGPT ou de Gemini, il y a un moyen encore plus rapide : AI Code Harvester, notre extension Chrome gratuite, trouve le code dans la réponse, et le bouton Afficher le lance en direct dans un nouvel onglet. Tu n’enregistres aucun fichier et tu ne copies-colles rien.

C’est ce qui fait de Harvester un complément puissant pour tout ce qui peut tourner dans le navigateur sans enregistrer de fichiers : un jeu, un petit outil, une maquette de page. Tu demandes, tu appuies sur Afficher, tu regardes le résultat, tu demandes un changement et tu regardes de nouveau. Il fonctionne sur les pages de ChatGPT et de Gemini, et notre guide Comment exécuter le code HTML de ChatGPT ou Gemini et voir la page en direct l’explique pas à pas.

Étape 4 : améliore-le une demande à la fois

La première version n’est jamais la dernière, et c’est ça qui est amusant. Après la première version, j’ai modifié le jeu avec des demandes simples, une par une. En voici quelques-unes :

• « Affiche de petites lettres de touches au bord de l’écran, avec un court texte, pour que le joueur sache quelle touche achète quoi. »
• « Ajoute un soldat qui lance tout seul des grenades sur le zombie le plus proche. » Pour lui, j’ai donné à Claude de nouvelles images de Gemini.
• « Ajoute une tourelle automatique qui vise et tire toute seule, mais plus lentement que la principale. »
• « Les zombies ne doivent perdre de l’énergie que quand je les touche au corps ou à la tête, pas aux jambes. »
• « Ajoute un bouton pause dans le coin en haut à gauche et un bouton plein écran. »
• « Rends la dernière vague beaucoup plus grande. »

La règle qui fait gagner le plus de temps : demande un changement, teste-le, puis demande le suivant. Si quelque chose casse, dis « annule le dernier changement ». L’IA se souvient de ce qu’elle a fait et peut le réparer.

Teste-le sur ton ordinateur avant de le mettre en ligne

Avant de partager le jeu, essaie-le chez toi, là où personne ne voit les erreurs. Un jeu comme celui-ci est une page web, et ton ordinateur peut l’ouvrir sans aucun serveur.

1. Enregistre le code dans un seul fichier, par exemple game.html. Si le jeu utilise des images d’un dossier, garde le dossier à côté du fichier. Ou demande à l’IA : « Mets les images à l’intérieur du fichier, pour que ce soit un seul fichier. » Comme ça, rien ne risque de se perdre.
2. Double-clique sur le fichier. Il s’ouvre dans ton navigateur.
3. Clique une fois sur le jeu, puis utilise les touches. Le navigateur a besoin de ce premier clic pour que le jeu puisse entendre le clavier.
4. Vérifie tout : la souris et les touches, le son, le plein écran, la pause, et si on peut jouer jusqu’au bout.
5. Corrige ce qui ne va pas en disant précisément à l’IA ce que tu as vu.

Quand ça marche, mets-le en ligne pour que d’autres puissent jouer. Pour ça, il te faut un hébergement web, c’est-à-dire simplement un endroit sur internet qui stocke tes fichiers et leur donne une adresse. Un seul fichier de jeu fonctionne chez presque tous les hébergeurs, y compris les gratuits. Notre guide Où publier la page web créée par ton IA passe en revue les options avec des mots simples. Sur notre propre site, nous utilisons Firebase Hosting.

Pour afficher le jeu dans une page de ton propre site, ajoute-le comme ceci :

<iframe src="https://yoursite.com/game.html" width="1024" height="572" allow="fullscreen"></iframe>

La partie allow="fullscreen" permet aux joueurs d’utiliser le bouton plein écran. Si tu téléverses une nouvelle version et que tu vois encore l’ancienne, appuie sur Ctrl+F5 pour que le navigateur la recharge à neuf.

Il n’y a pas de limite

Une fois la base en place, tout le reste n’est qu’une demande de plus : un nouvel ennemi, un nouveau décor pour le niveau suivant, un boss plus coriace, une autre arme, un nouveau type de jeu. Pour un nouveau look, demande à l’IA d’images un autre jeu d’images et donne-les à l’IA de discussion. Ce qui demandait une équipe et des semaines de travail demande aujourd’hui une soirée et un peu d’imagination.

Bon à savoir avant de commencer

Ce que tu fais du jeu, c’est toi qui décides

Quand le jeu est prêt, c’est à toi de décider de la suite. Partage-le sur les réseaux sociaux, envoie le lien à tes amis, mets-le sur ton propre site ou garde-le rien que pour toi. Il n’y a pas de bonne réponse, et le plaisir, c’est que tu l’as fait.

FAQ