Splash Olympics

Ce que nous avons construit

Tout le jeu tient dans un seul fichier HTML autonome. Pas de fichiers image, pas de fichiers audio, pas de bibliothèques. Chaque graphisme est dessiné en code sur un canvas HTML, et chaque son (éclaboussures, saltos, vent, tics d’alerte) est généré en direct dans le navigateur avec la Web Audio API. Mon assistant IA, qui tourne sur Grok Bot, a tout fait.

En dessous, il y a une vraie physique de jeu. Il y a la gravité, et une eau dans laquelle on plonge pour prendre de la vitesse. Votre puissance de lancement grandit à chaque entrée dans l’eau réussie, et une entrée parfaite la fait grimper davantage. Un plat coûte de la puissance et votre combo.

La caméra s’éloigne à mesure que vous prenez de la vitesse. Vous pouvez grimper depuis la piscine, croiser des mouettes, des montgolfières, des avions, des satellites, des astronautes et des OVNI, puis dépasser la Lune et les planètes jusqu’à Pluton. Et il y a des easter eggs de geek en chemin: Hubble, l’ISS, une baleine qui tombe et un pot de pétunias, une serviette, un roadster dans l’espace, Voyager et une théière en orbite. À l’altitude 42, un bonus récompense « the answer to everything » (la réponse à tout), et tout en haut se trouve le Diner at the End of the Galaxy (« So long, and thanks for all the fish », soit en substance « Salut, et encore merci pour le poisson »).

Les saltos avant et arrière sont comptés séparément, avec un bonus si vous les mélangez. Si vous touchez le sable au fond de la piscine, la partie est terminée. Il y a un chronomètre de cinq minutes, un classement local des cinq meilleurs scores, et des alertes en direct quand vous approchez de votre record, entrez dans le top 5 ou le battez.

Cinq versions, guidées par le playtest

Je n’ai jamais écrit une ligne de code. Chaque tour se déroulait pareil: l’assistant livrait une version, j’y jouais, je décrivais en langage courant ce qui n’allait pas, et la version suivante le corrigeait.

1. La boucle de jeu principale. Plonger, se lancer, faire des saltos et retomber dans l’eau.
2. Un rapport de bug. « Quand je redescends depuis plus de 300 km, la caméra ne suit plus le dauphin. » L’assistant a ajouté une caméra qui garde toujours le dauphin dans le cadre, décalée vers le haut de l’écran quand vous tombez vite, pour que vous voyiez ce qui arrive.
3. Des changements de règles. Supprimer la limite de temps d’origine, faire de l’impact avec le fond de la piscine la fin de la partie, et compter saltos avant et saltos arrière comme deux bonus distincts. J’ai aussi demandé, à moitié pour rire, si le « restaurant au bout de la galaxie » existait. Il existe maintenant.
4. La sensation de jeu. « La chute vers la Terre est trop rapide, les easter eggs défilent sans qu’on les voie, et il est presque impossible de perdre. » L’assistant a supprimé l’accélération du temps pendant la descente et dézoomé à haute vitesse à la place. Il a resserré la marge d’erreur, rétabli une limite de temps totale de cinq minutes et ajouté le système de records.
5. La finition. Plus de variété (sept modèles de montgolfières différents), plus d’easter eggs, et un son complet.

Qui a fait quoi

L’assistant a fait tout le code, tous les graphismes et tout le design sonore, et il a testé son propre travail. Il a fait tourner le jeu dans un navigateur headless (un navigateur sans fenêtre, piloté par un script) avec un bot qui jouait tout seul, pris des captures d’écran pendant la descente depuis l’altitude maximale, et vérifié l’absence d’erreurs et un affichage fluide à 60 images par seconde. Ce test a révélé de vrais problèmes. Le Diner, par exemple, était hors d’atteinte même à pleine puissance, et l’assistant a corrigé ça en rééquilibrant le jeu avant même que je le voie.

Ma part, c’était la vision (« faites-le comme le jeu que j’adorais »), le playtest, et les décisions sur ce qui était amusant. L’assistant savait mesurer les images par seconde. Il ne pouvait pas sentir si une chute était ennuyeuse ou si un saut était satisfaisant, et il ne pouvait pas entendre ses propres effets sonores. Cette partie est restée humaine.

Ce que vous pouvez en retenir

• Décrivez des sensations, pas des solutions. « La chute est trop rapide et je ne vois pas les easter eggs » a mieux marché que de prescrire un correctif. L’assistant a trouvé une meilleure solution, dézoomer, que celle que j’aurais proposée.
• Livrez petit et jouez à chaque version. Cinq tours rapides valent mieux qu’un cahier des charges géant.
• Répartissez les tests. Laissez l’IA tester ce qu’elle peut mesurer: les erreurs, la performance, la possibilité d’atteindre un objectif. Gardez pour vous ce qu’elle ne peut pas mesurer: le plaisir de jeu, le timing, le son.
• Gardez une copie de chaque version, pour pouvoir toujours revenir en arrière.
• Attendez-vous à un peu de friction. Pendant les longues séquences de travail, je me suis parfois demandé si quoi que ce soit se passait. Demander un point d’étape est normal et tout à fait légitime.
• Les contraintes aident. « Un seul fichier HTML, aucune ressource » a gardé le projet simple à héberger et facile à partager.

Le même jeu, cinq autres modèles

Quand le jeu a été terminé, j’ai écrit tout ce que ces cinq tours m’avaient appris sous forme d’un seul brief et je l’ai donné à cinq autres modèles d’IA, chacun avec un seul essai et aucun retour. Même concept, des jeux très différents. Jouez aux six versions et comparez-les.

Un peu hors sujet, mais pas tant que ça

À l’époque, ce genre de jeu demandait le plugin Flash, et ça ramait. Aujourd’hui, c’est un fichier HTML autonome qui tourne sans accroc dans pratiquement tous les navigateurs.

Les modèles d’IA actuels sont incroyablement bons pour fabriquer ce genre de fichiers HTML interactifs et autonomes. Vous pouvez en envoyer un par messagerie ou par e-mail, et ils font passer l’information très efficacement. Chez Carewell, nous les utilisons tout le temps pour nous expliquer des choses: des règles, des processus, des concepts, n’importe quoi. C’est bien plus efficace qu’une présentation PowerPoint ou qu’un fichier texte ennuyeux. Si vous voulez voir l’idée appliquée à quelque chose de pratique, Le week-end avec sa propre application en est un exemple.