Ce jeu vidéo, Claude Code me l’a codé en moins de 24 heures.

Qu’est-ce que Claude Code a fabriqué ?

Un jeu en 3D, jouable sur téléphone et sur ordinateur. Tu es setter de nuit : tes prospects t’écrivent, et tu attrapes leurs messages avant qu’ils refroidissent. Tu évites les objections, tu cales des rendez-vous. Chaque rendez-vous avance l’horloge d’une heure, de 18 h jusqu’à l’aube. Claude Code a tout écrit : le jeu, le décor, le son, le classement et sa vérification.

• 18 h · La forêt
• 21 h · Le volcan
• Minuit · Les nuages
• 4 h · Les sommets
• 6 h · L’aube

• Le décor

  La forêt au coucher du soleil, puis le volcan (« le coup de feu »). La mer de nuages à minuit, les sommets gelés à 4 h, puis l’aube. Les arbres, la lave, les nuages et les pics sont dessinés par le code.

• Le classement

  Une seule piste pour tout le monde. Le jeu enregistre chaque geste de ta partie, et le serveur la rejoue avant d’accepter ton score.

• Le son

  Une musique qui change au fil de la nuit, et une note de piano par message attrapé. Le tout généré avec ElevenLabs.

• La fin de partie

  Ton score, ta place au classement, puis l’offre de WhatSetter, avec un seul bouton.

Le dossier du jeu a été créé le 16 octobre 2026 à 0 h 01. Le jeu était en ligne le même jour, vers 21 h, classement compris. Mon rôle : décrire, jouer, dire ce qui n’allait pas. Le premier habillage faisait « IA » : polices passe-partout, pastilles, émojis. Je l’ai dit en une phrase, et Claude Code a proposé trois directions artistiques.

Quelles sont les 4 règles d’un jeu qui sert ton business ?

Un bon jeu de marque se joue pour lui-même, et raconte ta promesse sans un mot de pub. Le joueur doit vivre le problème que ton produit règle. Voici les quatre règles que j’ai suivies pour Chaud devant, avec ce qu’elles donnent dans le jeu.

1. La règle du jeu, c’est la promesse de ton produit.

   WhatSetter répond à tes prospects avant qu’ils refroidissent. Dans le jeu, tout refroidit en permanence, et chaque réponse réchauffe.

2. On comprend en 3 secondes.

   Une chose à attraper (les messages), une chose à éviter (la glace des objections), un but (les rendez-vous). Si tu dois l’expliquer, c’est trop compliqué.

3. Un classement et un vrai lot.

   Sans enjeu, on joue une fois. Avec une place à gagner et un mois de WhatSetter à la clé, on rejoue. Et on envoie le jeu à un ami.

4. L’écran de fin, c’est ton offre.

   Le score, la place, puis une seule offre et un seul bouton. Chez nous : « Essayer gratuitement ».

Le joueur doit vivre le problème que ton produit règle.

Comment coder ton jeu avec Claude Code, étape par étape ?

Tu n’écris pas de code. Tu décris, Claude Code écrit, tu joues sur ton téléphone, tu dis ce qui ne va pas. Voici les huit étapes de Chaud devant, de la première page jouable à la mise en ligne. Chaque étape a son prompt : copie-le dans Claude Code et remplace ce qui est entre crochets.

Étape 1Une seule page, jouable au doigt

Commence petit : une page web, un seul mécanisme, jouable avec le pouce. Le décor, le son et le classement viendront après. Plus ta promesse est précise, plus le premier jet est bon (voir comment écrire une demande claire à Claude Code).

Fais-moi un petit jeu vidéo pour mon business, jouable sur téléphone, dans une seule page web.
Mon business : [ce que tu vends, et à qui].
La règle du jeu, c'est la promesse de mon produit : [ta promesse, en une phrase].
On doit comprendre en 3 secondes : une chose à attraper, une chose à éviter, un but.
Commandes : glisser le doigt à gauche et à droite sur téléphone, les flèches sur ordinateur.
Une partie dure de 30 secondes à 3 minutes, et devient plus dure petit à petit.
Ajoute un score et un écran de fin avec un bouton « Rejouer ».
Commence simple : je veux y jouer le plus vite possible, on améliorera ensuite.

Étape 2Joue-le sur ton téléphone, tout de suite

Ton jeu se jouera au doigt : teste-le au doigt, pas à la souris. Demande l’adresse à ouvrir sur ton téléphone.

Lance le jeu sur mon ordinateur et donne-moi l'adresse à ouvrir sur mon téléphone (il est sur le même Wi-Fi).

Joue cinq parties. Puis dis ce que tu ressens, avec tes mots. C’est toute la méthode : une phrase de retour, une nouvelle version.

J'ai joué cinq parties sur mon téléphone. Voilà ce qui ne va pas :
- [ex. trop lent au début, je m'ennuie pendant 20 secondes]
- [ex. je meurs sans comprendre pourquoi]
- [ex. les bulles sont trop petites sous mon pouce]
Corrige, puis dis-moi ce que tu as changé en trois lignes.

Pour Chaud devant, mes retours tenaient en une phrase : « ça fait IA », « le classement doit être à droite ». Pierre a joué sur son téléphone et a dit qu’on ne voyait pas où mettre son pseudo. Le soir même, une fenêtre le demandait à la fin de la partie.

Étape 3Demande trois directions artistiques

Le premier habillage a souvent un air de déjà-vu. Demande plusieurs pistes, comme à une équipe de designers, et choisis. Claude Code sait lancer des sous-agents qui travaillent en parallèle, chacun sur sa piste.

Le jeu marche, mais il fait générique. Lance trois designers en parallèle (des sous-agents).
Chacun propose une direction artistique complète : couleurs, typographie, ambiance, écran titre, écran de fin.
Contraintes : les couleurs de ma marque [tes couleurs], lisible sur téléphone en plein soleil, aucun émoji.
Montre-moi les trois côte à côte dans une page, avec une capture de chaque écran.

Pour Chaud devant, les trois pistes s’appelaient Argile, Laque et Service de nuit. J’ai gardé Service de nuit : une enseigne lumineuse en 3D, et la nuit verte de WhatSetter.

• Argile
• Laque
• Service de nuit, gardée

Étape 4Le décor, entièrement en code

Pas besoin d’acheter des modèles 3D ni des images. Claude Code dessine un décor entier avec Three.js, une bibliothèque de 3D pour le web. C’est la même technique que nos sites animés en 3D.

Ajoute un décor en 3D autour du jeu avec Three.js, entièrement dessiné par le code : aucun modèle 3D, aucune image.
Un décor par étape de la partie : [ex. une forêt au coucher du soleil, puis un volcan, puis une mer de nuages, puis l'aube].
Le décor change à chaque palier, en douceur, sans jamais gêner la lecture du jeu.
Il doit tourner à 60 images par seconde sur un téléphone moyen : prévois une version allégée qui s'active toute seule si le téléphone rame.

Dans Chaud devant, le jeu baisse tout seul la qualité quand le téléphone peine : moins d’arbres, moins de poussières. Résultat mesuré : 60 images par seconde dans les cinq décors, avec un processeur ralenti quatre fois.

Étape 5Le son, avec ElevenLabs

Le son donne le rythme. Dans Chaud devant, chaque message attrapé joue une note de piano. La musique, elle, change au fil de la nuit. Tout vient d’ElevenLabs, une IA qui fabrique de la musique et des bruitages.

Ajoute de la musique et des bruitages, générés avec l'API d'ElevenLabs.
Ma clé est dans le fichier .env : ne l'affiche jamais et ne l'écris nulle part ailleurs.
Écris un script qui génère : une musique par étape [ton style, ex. house mélodique], un son quand on attrape, un son quand on se cogne, un son de fin.
Le son démarre au premier toucher (les téléphones bloquent le son avant), et un bouton le coupe.

Étape 6Le classement et l’anti-triche

Dès qu’il y a un lot, quelqu’un essaiera de tricher. Un score envoyé tel quel par le téléphone peut être falsifié. La parade : le serveur rejoue la partie et recalcule le score lui-même.

Ajoute un classement en ligne, avec un anti-triche.
Le jeu enregistre chaque partie (les gestes du joueur, image par image) et l'envoie avec le score.
Le serveur rejoue la partie avec exactement les mêmes règles, et ne garde que le score qu'il retrouve.
Pour que la partie se rejoue à l'identique, les règles ne doivent dépendre ni de l'appareil ni de la vitesse d'affichage.
Une seule piste pour tout le monde pendant le concours.
Le joueur entre un pseudo et, s'il le veut, son @instagram pour être prévenu s'il gagne.
Stocke le classement dans une base gratuite (par exemple Upstash Redis) et garde-le en cache 60 secondes.
Écris un test qui enregistre 20 parties, les fait rejouer par le serveur et vérifie que les scores sont identiques.

C’est l’étape la plus technique, et Claude Code l’a écrite seul. Puis il l’a vérifiée : 24 parties enregistrées, rejouées par le serveur, toutes retrouvées au point près.

Étape 7L’écran de fin, c’est ton offre

C’est le seul moment où le joueur lève les yeux. Montre-lui où il en est, puis une seule offre, avec un seul bouton.

Refais l'écran de fin, dans cet ordre : le score en gros, la place au classement (et l'écart avec celui de devant), puis mon offre avec un seul bouton : [ton offre, ex. « Essayer gratuitement »] vers [ton lien].
Le bouton « Rejouer » reste visible sans faire défiler.
Si le joueur n'a pas encore de pseudo, ouvre une fenêtre qui le demande, avec le lot à gagner.
Vérifie tout sur un écran de 390 pixels de large, comme dans le navigateur d'Instagram.

• La fenêtre du pseudo
• Le rapport de fin

Étape 8La mise en ligne

Un jeu, c’est une page web : il s’héberge comme un site. Mets-le sur ton propre domaine, pour que le joueur reste chez toi.

Mets le jeu en ligne sur [Vercel] à l'adresse [tondomaine.com/jeu].
Explique-moi chaque étape où je dois cliquer moi-même.
À la fin, vérifie que le jeu et le classement marchent sur l'adresse publique, depuis un téléphone.

Chaud devant vit sur whatsetter.com/jeu, avec le site de WhatSetter. Le joueur ne quitte jamais la marque.

Quels pièges éviter avant de lancer ton jeu ?

Trois pièges coûtent cher : un concours sans règlement, un jeu testé seulement sur ordinateur, et un classement sans vérification. Le dernier se règle avec le prompt de l’étape 6. Les deux autres demandent dix minutes de ta part, avant le lancement.

• Le concours sans règlement. Dès qu’il y a un lot, écris un règlement. Il dit qui organise, les dates, qui peut jouer, comment on gagne, le lot et ce que tu fais des données. Le concours reste gratuit, sans obligation d’achat. Mets-le en ligne avant de lancer, et fais-le relire si le lot a de la valeur. Exemple : le règlement de Chaud devant.
• La phrase pour Instagram. Si tu annonces ton concours sur Instagram, écris qu’Instagram ne l’organise pas, ne le parraine pas et n’y est pas associé. Instagram le demande dans ses règles sur les promotions.
• Le navigateur d’Instagram. Tes joueurs ouvriront le lien depuis un DM ou une story. Le jeu s’ouvre alors dans le navigateur d’Instagram, avec une barre en bas qui mange de la place. Teste depuis un vrai lien envoyé en DM, sur un vrai téléphone.
• Le son bloqué. Les téléphones bloquent le son tant qu’on n’a pas touché l’écran. Fais démarrer la musique au premier toucher, sinon ton jeu paraît muet.
• Le classement qui coûte. Chaque lecture du classement est une requête à ta base. Garde-le en cache 60 secondes : le nombre de lectures ne dépend plus du nombre de joueurs.

Combien coûte un jeu comme celui-ci ?

Presque rien en plus de ton abonnement Claude. L’hébergement et la base du classement ont des offres gratuites qui suffisent pour démarrer. Le décor ne coûte rien : pas un seul modèle 3D à acheter. Voici ce qu’on a utilisé pour Chaud devant.

Pour toi ou pour ton business : quel jeu coder ?

La méthode est la même pour un jeu perso. Tu changes la promesse, le reste ne bouge pas : une chose à attraper, une chose à éviter, un but. Voici des idées pour te lancer ce soir.

Tu as ton idée ? Reprends le prompt de l’étape 1, remplace les crochets, et joue ta première version sur ton téléphone.

Questions fréquentes

Faut-il savoir coder pour faire un jeu avec Claude Code ?

Non. Tu décris ce que tu veux, Claude Code écrit le code, tu joues et tu dis ce qui ne va pas. Tu taperas seulement quelques commandes pour lancer Claude Code et mettre le jeu en ligne, et Claude Code te les donne.

Combien de temps faut-il pour coder un jeu comme Chaud devant ?

Pour Chaud devant, moins de 24 heures ont séparé le premier fichier du jeu en ligne, classement et anti-triche compris. Une première version jouable arrive dès le premier prompt : tu l’améliores ensuite, partie après partie.

Je peux organiser un concours sur Instagram avec mon jeu ?

Oui, avec un règlement en ligne avant le lancement : l’organisateur, les dates, qui peut jouer, comment on gagne, le lot et l’usage des données. Le concours doit rester gratuit, et tu dois écrire qu’Instagram ne l’organise pas et n’y est pas associé.

Faut-il payer pour jouer à Chaud devant ?

Non. Le jeu et le concours sont gratuits, sans obligation d’achat. Le meilleur score validé à la clôture gagne un mois de WhatSetter (formule Starter). La clôture : le dimanche 1^er novembre 2026 à 23 h 59, heure de Paris. Le règlement complet est sur whatsetter.com/jeu/reglement.