🧱 Le projet de Maxance

👥 L'équipe : qui fait quoi

Comme dans un vrai studio de jeux vidéo, chacun a son rôle. Le code, c'est Claude. Les idées et les décisions, c'est Maxance.

🔁 Comment se passe une étape

Rythme conseillé : une étape = 1 à 2 séances d'environ 45 minutes. Pas besoin d'aller vite : le but est de comprendre et de s'amuser.

✍️ Passer commande à Claude

Un développeur fait exactement ce qu'on lui demande. Si la demande est floue, le résultat sera au hasard. Savoir écrire une bonne demande, c'est le vrai super-pouvoir d'un directeur de jeu.

📋 La fiche de demande

Remplis la fiche, puis clique sur Préparer le message : le texte à envoyer à Claude apparaît, prêt à copier. La fiche est sauvegardée dans ce navigateur.

🏃 Étape 1 : courir, sauter, esquiver ✅ livrée

Le point de départ du projet : un héros qui court à gauche et à droite, qui saute, et des obstacles en blocs à esquiver.

🏗️ L'architecture : comment le jeu est organisé

Un jeu, ce n'est pas un seul gros fichier : c'est une équipe de petits morceaux de code, chacun avec un seul travail. Ils sont rangés en 4 familles (4 dossiers) :

La règle d'or : la logique ne dessine jamais, et le rendu ne change jamais les règles. Le rendu lit le monde et le peint, c'est tout. Grâce à ça, quand on passera aux blocs façon Minecraft, on pourra changer le dessin sans casser la physique, ou l'inverse.

❤️ La boucle de jeu : le cœur qui bat

Un jeu vidéo, c'est une boucle qui ne s'arrête jamais. Environ 60 fois par seconde, l'écran demande une nouvelle image. À chaque fois, le jeu :

1. regarde combien de temps s'est écoulé ;
2. met à jour le monde par petits pas de 1/120 s (8,3 millisecondes) : lire les touches, bouger, appliquer la gravité, tester les collisions ;
3. dessine le résultat.

Pourquoi des pas de temps fixes ? Pour que le saut ait exactement la même hauteur sur un ordinateur rapide et sur un ordinateur lent. Sur un vieil ordi, on affiche moins d'images, mais le monde avance pareil. Dans le panneau « État en direct », compare « images par seconde » et « mises à jour par seconde ».

⚡ Le voyage d'une touche : de ton doigt à l'écran

1. 0 ms · Tu appuies sur Espace. Le navigateur envoie un message « keydown, code = Space ».
2. 0 ms · entrees.js le reçoit et note : « intention sauter en attente ».
3. ≤ 8 ms · À la mise à jour suivante, joueur.js consomme l'intention. Il vérifie son état : est-il au-sol ? Si oui…
4. ≤ 8 ms · … il fixe sa vitesse verticale : vy = -860 px/s (négatif = vers le haut), passe dans l'état monte et annonce saut à la radio.
5. ≤ 8 ms · La radio prévient la sauvegarde (qui compte le saut) et le journal (qui l'écrit).
6. ≤ 17 ms · rendu.js dessine le héros un peu plus haut. Tu vois le saut commencer.
7. + 8 ms, + 8 ms… · À chaque pas, la gravité ajoute 20 px/s à vy. Le héros ralentit, s'arrête en l'air, puis retombe.
8. ≈ 720 ms · physique.js détecte qu'il touche le sol : on le pose dessus, vy = 0, état au-sol, annonce atterrissage.

Tout ça en moins de 2 centièmes de seconde, c'est pour ça que le jeu paraît instantané. Pour le voir en vrai : touche Échap pour mettre en pause, puis N pour avancer d'un pas à la fois.

🔀 La machine à états du joueur

Le héros est toujours dans un seul état à la fois. Selon son état, il n'a pas les mêmes droits.

🍎 La physique du saut : joue avec les nombres

Le saut dépend de deux réglages de config.js : la force du saut (vitesse de départ vers le haut) et la gravité (qui freine la montée puis accélère la chute). Bouge les curseurs pour voir ce qui change :

Les formules (pour les curieux) : hauteur = force² ÷ (2 × gravité), durée = 2 × force ÷ gravité. La trajectoire est une parabole, comme un ballon qu'on lance.

🎮 Les astuces invisibles qui rendent le jeu agréable

🧠 Mémoire vive ou base de données ?

Pour l'instant, la base est rangée dans ton navigateur (« localStorage »), au format JSON, une façon d'écrire des objets sous forme de texte. Dans Minecraft, le monde entier est sauvegardé de cette manière, bloc par bloc. On y arrivera à l'étape 17.

🔍 Missions d'exploration

Ouvre le jeu, active les rayons X (X) et mène l'enquête :

1. Mets le ralenti (L) et regarde la flèche verte pendant un saut. Que devient-elle au sommet ?
2. En pause (Échap), appuie sur N plusieurs fois pendant un saut. De combien change vy à chaque pas ?
3. Joue une partie et surveille « obstacles en mémoire ». Monte-t-il à l'infini ? Pourquoi ?
4. Fais une partie, puis regarde la base de données. Ferme la page, rouvre-la : qu'est-ce qui est resté, qu'est-ce qui a disparu ?
5. Appuie sur saut juste avant d'atterrir. Que dit le journal ?

❓ Quiz

🗺️ Étape 2 : un monde en blocs ✅ livrée · à valider

Le héros ne reste plus au même endroit : il explore un monde sans fin, fait de blocs, avec des trous, des plateformes et des drapeaux. La caméra le suit.

🧮 Comment le jeu sait sur quelle case tu es

Le héros connaît sa position en pixels : par exemple x = 1 300. Une case fait 40 pixels de large. Pour trouver le numéro de la case, le jeu fait une division et garde seulement la partie entière (il « jette » ce qui est après la virgule) :

C'est grâce à ce calcul que le jeu sait s'il y a du sol sous tes pieds : il regarde la case juste en dessous. Si elle contient 0 (de l'air), tu tombes. C'est aussi comme ça que la physique t'empêche de rentrer dans un mur : avant de te laisser avancer, elle vérifie les cases que ton corps va toucher.

🗄️ Comment on range un monde entier dans la mémoire

Le monde est une grille de numéros, comme une feuille à petits carreaux où chaque carreau contient un chiffre : 0 air, 1 herbe, 2 terre, 3 planche. Le jeu la range colonne par colonne, comme des tiroirs posés côte à côte : chaque tiroir contient les 14 cases d'une colonne, de haut en bas.

On appelle ça un tableau à 2 dimensions : un tableau (la liste des colonnes) qui contient des tableaux (les cases de chaque colonne). Dans le code : terrain.colonnes[colonne][ligne]. Le panneau 🗺️ La carte en mémoire, sous le jeu, te montre ces numéros en direct.

🎥 La caméra : coordonnées « monde » et coordonnées « écran »

Le monde est bien plus large que l'écran. La caméra est une fenêtre qui glisse au-dessus du monde. Elle ne retient qu'un seul nombre : camera.x, la position du bord gauche de l'écran dans le monde.

La formule magique : x sur l'écran = x dans le monde − camera.x. Le héros vit à x = 2 320 dans le monde, mais il est dessiné à 320 px du bord de l'écran.

La caméra ne saute pas d'un coup : à chaque pas de 1/120 s, elle parcourt une partie de l'écart qui reste. Au début l'écart est grand, alors elle va vite ; puis elle ralentit en arrivant. Réglage : camera.tempsDeReaction = 0,07 s. Après une demi-seconde, il reste moins de 0,1 % de l'écart : même quand tu réapparais 30 blocs en arrière, elle t'a rattrapé.

🧱 Les collisions avec la grille

À l'étape 1, le sol était une simple ligne (y = 440). Maintenant, le héros peut toucher des cases partout : sol, bord d'un trou, dessous ou dessus d'une plateforme. À chaque pas, moteur/physique.js :

1. déplace le héros à l'horizontale. Si son bord avant entre dans une case solide, il est remis contre le bord de la case : c'est un mur ;
2. puis à la verticale. S'il entre dans une case solide en descendant, il est posé dessus (au sol) ; en montant, sa tête cogne (tete-cognee dans le journal).

Pourquoi en deux temps ? Pour savoir de quel côté on a touché. Si on bougeait en diagonale d'un coup, le jeu ne saurait pas si le héros a cogné un mur ou atterri sur le sol.

🔍 Missions d'exploration

Ouvre le jeu, active les rayons X (X) et mène l'enquête :

1. Mets-toi en pause (Échap) et lis la case du héros. Vérifie le calcul toi-même : x ÷ 40 donne bien la colonne ?
2. Dans « La carte en mémoire », trouve un trou et une plateforme. Quels numéros vois-tu ?
3. Monte sur une plateforme. Que devient « case sous les pieds » dans l'état en direct ?
4. Cours vers la droite et surveille « cases en mémoire ». De combien augmente-t-il à chaque tronçon ? Pourquoi ?
5. Tombe dans un trou en ralenti (L). Regarde l'écart de la caméra : combien de temps met-elle pour revenir à 0 ?
6. Regarde « x sur l'écran » quand tu cours : pourquoi reste-t-il presque toujours autour de 305 ?
7. Ouvre la base de données : trouve ton ancien record de l'étape 1. Où a-t-il été rangé ?

❓ Quiz

🔥 Étape 3 : solide ou liquide ✅ livrée · à valider

Avant, toucher un bloc, c'était perdu, même en atterrissant dessus. Maintenant, chaque bloc est soit solide, soit liquide.

🧪 Comment le jeu sait qu'un bloc est solide ou liquide

Chaque case de la grille contient un numéro (tu l'as vu à l'étape 2). Maintenant, le jeu a aussi une fiche de propriétés pour chaque numéro : une liste qui dit « solide : oui ou non ». Quand la physique veut savoir si le héros peut avancer, elle lit le numéro de la case, puis regarde dans la fiche.

Dans le code (logique/terrain.js), la fiche ressemble à ça : SOLIDES = [non, oui, oui, oui, oui, oui, non]. La case n° 4 de la liste dit si le bois est solide. Changer une seule valeur dans cette liste suffit pour que tout le jeu traite ce bloc autrement !

💡 La grande idée : les obstacles sont entrés dans la grille

À l'étape 2, les obstacles étaient rangés à part, avec leur propre règle « toucher = perdu ». Maintenant, une caisse est écrite dans la grille, comme le sol, avec le numéro 4. Résultat : la physique la traite exactement comme le sol. On n'a rien eu à coder pour pouvoir marcher dessus ou s'y cogner : c'est la même règle que pour une plateforme.

Seule la lave a une règle spéciale, dans logique/monde.js : si la zone rouge du héros touche une mare de lave, c'est perdu. On garde aussi la liste monde.obstacles, mais seulement pour donner un nom et un numéro à chaque obstacle (journal, rayons X).

🔍 Missions d'exploration

1. Pousse contre une tour. Que dit le journal ? Et « contre un mur ? » dans l'état en direct ?
2. Monte sur une caisse. Que devient « case sous les pieds » ?
3. Dans « La carte en mémoire », trouve une tour, une caisse et une mare de lave. Quels numéros ont-elles ?
4. Avec les rayons X, compare le cadre d'une caisse (blanc) et celui de la lave (rouge). Pourquoi ces couleurs ?
5. En pause (Échap), avance pas à pas (N) au-dessus de la lave : à quel moment exact perds-tu ?

❓ Quiz

❤️ Étape 4 : 5 vies et fosses de lave ✅ livrée · à valider

Tu as maintenant 5 vies. Tomber ne veut plus dire tout recommencer : tu réapparais, soit devant le trou, soit au dernier drapeau. Et une grande fosse de lave t'attend entre chaque paire de drapeaux.

🔢 Comment le jeu retient tes vies

C'est tout simple : le monde contient une case mémoire monde.vies, qui vaut 5 au début de la partie. Chaque chute fait vies = vies − 1. Ensuite, le jeu pose une question : « reste-t-il des vies ? »

Les vies sont dans la mémoire vive (le monde), pas dans la base de données : quand la partie recommence, elles reviennent à 5. Le nombre 5 est rangé dans config.js (vies: 5). Change-le, et tout le jeu suit : même le nombre de cœurs dessinés !

📍 Comment le jeu sait où te faire réapparaître

🗃️ Le problème des versions mélangées (et sa solution)

Pour aller plus vite, ton navigateur garde une copie de chaque fichier pendant 10 minutes : c'est le cache. Après une mise à jour, il pouvait mélanger un vieux fichier de règles avec les nouveaux. C'est pour ça que tu mourais encore en atterrissant sur les blocs !

La solution : chaque fichier porte maintenant un numéro de version (config.js?v=4). Pour le navigateur, un nouveau numéro veut dire un nouveau fichier. La page affiche « version 4 » en haut ; si les fichiers ne correspondent pas, elle affiche « ⚠️ versions mélangées : fais Ctrl + F5 ».

🔍 Missions d'exploration

1. Tombe dans un trou et lis le journal : quelle est la colonne du bord du trou, et celle où tu réapparais ?
2. Regarde « vies » dans l'état en direct pendant que tu tombes. Quand change-t-il exactement ?
3. Trouve une fosse avec les rayons X. Note sa colonne, puis celle de la suivante : quelle différence ?
4. Dans « La carte en mémoire », repère les trois 6 côte à côte de la fosse.
5. Tombe exprès 5 fois. Que contient la base de données après la partie ? Les vies y sont-elles ?

❓ Quiz

📦 Étape 5 : attention au bois ! ✅ livrée · à valider

Les caisses et les murets en bois sont redevenus des pièges. Seules les tours en pierre restent sans danger.

🧪 Changer tous les blocs en bois d'un coup

Tu te souviens de la fiche de propriétés de l'étape 3 ? Pour faire ta demande, il a suffi de changer deux cases dans les listes de logique/terrain.js, pour le numéro 4 (le bois) :

La nouvelle liste MORTELS dit quels blocs coûtent une vie. La règle, dans logique/monde.js, ne parle plus de « lave » : elle dit « si le héros touche un obstacle mortel, il perd une vie et retourne au drapeau ». Toutes les caisses et tous les murets du monde, même ceux qui ne sont pas encore fabriqués, obéissent donc à la nouvelle règle.

C'est l'avantage de décrire les blocs par des données (des listes de oui/non) plutôt que par du code : pour changer le jeu, on change une valeur.

🔍 Missions d'exploration

1. Touche une caisse. Que dit le journal ? Et « pièges en bois touchés » dans l'état en direct ?
2. Avec les rayons X, compte les cadres rouges et les cadres blancs sur l'écran.
3. Pousse contre une tour. Le journal dit « Bloqué par un mur de pierre » : pourquoi pas pour le bois ?
4. Perds ta dernière vie sur une caisse : que dit l'écran « Aïe ! » ?

❓ Quiz

🏆 Étape 6 : pseudo, arrivée et classement ✅ livrée · classement en ligne à venir

Chaque joueur écrit son pseudo, la course s'arrête au drapeau n° 10, et un tableau d'honneur range les 10 meilleurs.

🥇 Comment le jeu range les joueurs dans l'ordre

Pour trier, l'ordinateur compare les joueurs deux par deux, et une petite fonction répond à la question « qui passe devant ? ». Elle suit tes 3 règles, dans l'ordre :

🌍 Pourquoi un classement en ligne a besoin d'un serveur

Bonne nouvelle : tout ce qui touche au rangement du classement est dans un seul fichier, donnees/sauvegarde.js. Pour passer en ligne, c'est le seul fichier du jeu à changer. Les règles du tri (logique/classement.js) ne changeront pas.

⚠️ Un classement en ligne pose de nouvelles questions de directeur de jeu : que faire si quelqu'un écrit un gros mot comme pseudo ? Et si un tricheur envoie un faux score ? On en reparlera à ce moment-là.

🛡️ Un pseudo, ce n'est que du texte

Si quelqu'un écrit <b>Zoé</b> comme pseudo, le jeu doit l'afficher tel quel, et pas le comprendre comme du code de page web. C'est pour ça que le panneau écrit les pseudos avec textContent (« écris ce texte ») et jamais avec innerHTML (« fabrique ce code »). C'est une règle de sécurité importante dès qu'on affiche ce que quelqu'un d'autre a tapé.

🔍 Missions d'exploration

1. Joue avec 3 pseudos différents, puis regarde le panneau « 🏆 Classement » et la clé classement dans la base de données.
2. Rejoue avec le premier pseudo, mais fais moins bien. Que dit le journal ? La ligne a-t-elle changé ?
3. Pendant une partie, surveille « blocs avant l'arrivée » dans l'état en direct.
4. Avec les rayons X, trouve le drapeau d'arrivée : quelle est sa colonne ? Pourquoi celle-là ?
5. Regarde la base de données : quel est son numéro de version maintenant ? Pourquoi a-t-il changé ?

❓ Quiz

🔥 Étape 7 : les flammes de la lave ✅ livrée · validée par Maxance

Tomber dans la lave, maintenant, ça se voit : le héros brûle une seconde sur place, entouré d'une trentaine de petites flammes.

✨ Comment on fabrique des flammes : les particules

Une flamme de jeu vidéo, ce n'est pas un dessin tout fait : c'est plein de particules. Chaque particule est un tout petit objet, juste quelques nombres :

⏸️ Une petite pause dans les règles

Avant, toucher la lave te renvoyait tout de suite au drapeau. Maintenant, le monde retient que le héros « est en train de brûler » : monde.brulure = { reste: 1 }. Tant que reste est plus grand que 0, le héros ne peut plus bouger. À chaque pas, on enlève un peu de temps et on allume des flammes. À 0, il perd sa vie et réapparaît.

🔍 Missions d'exploration

1. Tombe dans la lave et regarde « flammes en mémoire » : jusqu'où monte le nombre ? Et ensuite ?
2. Avec les rayons X, en pause, avance pas à pas (N) : regarde « brûle encore … s » descendre.
3. Quelle est la couleur d'une flamme qui vient de naître ? Et juste avant de s'éteindre ?
4. Pourquoi les flammes restent-elles dans la lave alors que tu es déjà reparti au drapeau ?

❓ Quiz

💀 Étape 8 : demi-tour, bras levés et squelette qui danse ✅ livrée · à valider

Plus de moonwalk : le héros se retourne quand il recule. Il lève les bras en tombant dans un trou. Et s'il touche un muret à pics… il devient un petit squelette qui danse !

🪞 Retourner un dessin sans le redessiner

Le héros est toujours dessiné comme s'il regardait à droite. Pour qu'il regarde à gauche, on ne refait pas le dessin : on demande au peintre de travailler dans un miroir.

🕺 Faire danser un squelette

Le squelette a 4 poses (bras en l'air, bras en bas, jambes écartées, petit saut), qui se suivent en boucle, 6 fois par seconde. Pour choisir la pose, le peintre fait un petit calcul avec le temps écoulé :

🧱 Un nouveau bloc : le bois à pics

La caisse et le muret étaient faits du même bois (n° 4). Pour qu'un seul des deux soit mortel, il a fallu un nouveau numéro : 7 = bois à pics, avec sa propre fiche : solide « non », mortel « oui ». La caisse garde le n° 4, qui redevient solide et sans danger.

🔍 Missions d'exploration

1. Va à gauche puis à droite plusieurs fois. Combien de « Demi-tour » le journal affiche-t-il ?
2. Touche un muret et regarde « squelette qui danse ? » dans l'état en direct. Et avec les rayons X ?
3. En pause, avance pas à pas (N) pendant la danse : combien de pas faut-il pour changer de pose ?
4. Dans « La carte en mémoire », trouve un muret : quel numéro a-t-il ? Et une caisse ?
5. Tombe dans un trou en ralenti (L) : à quel moment exact le héros lève-t-il les bras ?

❓ Quiz

🧱 Étape 9 : un muret tous les 50 blocs ✅ livrée · à valider

Les murets à pics ne tombent plus au hasard : ils t'attendent à des rendez-vous, environ tous les 50 blocs.

📍 Des rendez-vous plutôt que du hasard

Avant, le jeu tirait au sort un obstacle à chaque place libre. Maintenant, le muret a des rendez-vous fixes : bloc 50, 100, 150… Le cartographe (logique/terrain.js) réserve sa place avant de creuser les trous, exactement comme pour la fosse de lave.

⚠️ Effet de bord : les places réservées laissent moins de place aux trous vides (environ un tous les 20 blocs). Avec les fosses de lave et les murets, il y a toujours un danger à peu près tous les 10 blocs.

❓ Quiz

🎒 Étape 10 : lacs de lave et inventaire ✅ livrée · à valider

Trois grands lacs de lave barrent la route. Pour passer, il faut monter sur la plateforme au-dessus… en posant des blocs, comme dans Minecraft !

🧱 Poser un bloc = écrire un numéro dans la grille

Tu te souviens de la grille de l'étape 2 ? Poser un bloc, c'est juste changer un 0 (air) en 8 (brique) dans la bonne case. Dès l'image suivante, le peintre dessine une brique, et la physique la traite comme du sol, car la brique est « solide ».

🌋 Pourquoi on ne peut pas tricher

On l'a vérifié avec des dizaines de sauts d'essai : sans bloc, personne n'atteint la plateforme. Avec 1 à 3 blocs, oui.

🔍 Missions d'exploration

1. Avec les rayons X, saute à côté d'un lac et regarde la case encadrée. Quand devient-elle verte ?
2. Pose un bloc et trouve le 8 dans « La carte en mémoire ».
3. Combien de blocs te faut-il, au minimum, pour monter sur la plateforme ?
4. Appuie sur P au sol. Que dit le journal ?
5. Si tu gaspilles tes 10 blocs avant le 3ᵉ lac, que se passe-t-il ?

❓ Quiz

⚔️ Étape 11 : épée, monstres, bouclier et potion ✅ livrée · à valider

Ton héros part à l'aventure en armure rigolote, épée à la main. Trois monstres gardent le chemin.

⏱️ Pas du tour par tour : des minuteurs

Dans un jeu au tour par tour, chacun attend son tour. Ici, tout se passe en même temps, 120 fois par seconde. Comment le monstre sait-il quand frapper ? Il a un minuteur.

❤️ Les PV et les cœurs

Dans beaucoup de jeux, c'est comme ça : les PV sont la santé « de tous les jours », les cœurs (ou vies) sont les « essais ».

🧩 Qui fait quoi dans le code

Tout le combat est dans un nouveau fichier, logique/combat.js (« l'arbitre du combat »). Il ne dessine rien : il décide qui perd des PV. Le peintre dessine ensuite l'armure, l'épée, le monstre et sa barre de PV. Comme toujours, chaque action est annoncée à la radio : « coup d'épée », « riposte », « bouclier arrête le coup », « monstre vaincu »… Regarde le journal !

🔍 Missions d'exploration

1. Approche un monstre avec les rayons X et regarde son minuteur descendre.
2. Frappe dans le vide, loin du monstre : que dit le journal ?
3. Compte combien de fois le monstre riposte pendant un combat.
4. Surveille « bouclier (coups restants) » dans l'état en direct pendant un combat.
5. Bois la potion avec tous tes PV : que se passe-t-il ?

❓ Quiz

⛏️ Étape 12 : 1 000 blocs, fer et pioche ✅ livrée · à valider

Le voyage est trois fois plus long : 1 000 blocs, 10 monstres. Heureusement, du fer t'attend tous les 20 blocs pour réparer ton équipement.

🔧 L'usure : un compteur qui descend

L'épée a un compteur : epee = 20. Chaque coup qui touche un monstre fait epee = epee − 1. À 0, le jeu refuse de faire des dégâts. Réparer, c'est juste remettre le compteur à 20. Le bouclier marche pareil, avec 3.

📏 1 000 blocs, et un drapeau d'arrivée pas comme les autres

Les drapeaux sont tous les 30 blocs, mais 1 000 n'est pas dans la table de 30 (30 × 33 = 990). Le drapeau d'arrivée n'est donc plus au début d'un tronçon : il est placé pile au bloc 1 000, dans le dernier tronçon, tout plat. Tous les rendez-vous (monstres, lacs, murets, fer) sont calculés avec la même petite fonction : « premier, premier + écart, … jusqu'à dernier ».

Quand deux rendez-vous tombent au même endroit (un fer sur un trou, un muret sur un monstre…), le plus important garde sa place et l'autre se décale, ou saute son tour. Résultat : environ 40 blocs de fer sur 49, et 16 murets sur 20.

🔍 Missions d'exploration

1. Casse un bloc de fer et trouve le 9 qui disparaît dans « La carte en mémoire ».
2. Compte combien de monstres tu peux battre avant que ton épée casse.
3. Abîme ton bouclier et ton épée, puis répare une seule fois : lequel est réparé ? Pourquoi ?
4. Dans l'état en direct, surveille « épée (coups restants) » et « fer dans le sac ».

❓ Quiz

🐷 Étape 13 : grottes, charbon, cochons et cuisine ✅ livrée · à valider

Sous terre, des grottes de pierre cachent du charbon. En surface, des cochons se promènent. Avec les deux, on cuisine de quoi reprendre des forces !

🎥 Une caméra qui descend

Jusqu'ici, la caméra ne bougeait que de gauche à droite (camera.x). Pour les grottes, le monde est devenu plus profond (24 lignes au lieu de 14), et la caméra a gagné un deuxième nombre : camera.y. La règle : « les pieds du héros ne doivent pas descendre plus bas que 440 px sur l'écran ». En surface, camera.y = 0 ; au fond de la grotte, elle vaut 280.

La formule de l'étape 2 devient : x écran = x monde − camera.x, et y écran = y monde − camera.y.

🏗️ Comment on creuse une grotte

🐷 Les cochons : une toute petite intelligence

Chaque cochon suit une seule règle : « avance ; si tu es trop loin de chez toi, au bord d'un trou ou devant un mur, fais demi-tour ». Avec juste ça, il a l'air de se promener tout seul ! C'est le début de l'intelligence artificielle des jeux vidéo.

🍳 Une recette

1 charbon + 1 viande crue → 1 viande cuite. Pour le jeu, une recette, c'est juste : « si j'ai tout ce qu'il faut, j'enlève les ingrédients et j'ajoute le résultat ». Sinon, le journal dit ce qui manque.

🔍 Missions d'exploration

1. Descends dans une grotte et regarde « camera.y » dans les rayons X.
2. Dans « La carte en mémoire », trouve les 10 (roche) et les 11 (charbon). Les numéros de lignes changent quand tu descends : pourquoi ?
3. Observe un cochon : quand fait-il demi-tour ?
4. Appuie sur K sans charbon : que dit le journal ?
5. Mange de la viande crue, puis de la viande cuite : combien de PV chacune ?

❓ Quiz

🧱 Étape 14 : 100 blocs pour construire ✅ livrée · à valider

Le héros devient bâtisseur : 100 briques dans le sac, un clic de souris pour les poser où on veut (pas trop loin), et la pioche pour les reprendre.

🖱️ Du clic à la case

Quand tu cliques, le navigateur donne la position de la souris sur l'écran. Mais le monde est bien plus grand que l'écran ! On fait donc le chemin inverse de l'étape 2 :

📏 La portée : le théorème de Pythagore

Pour savoir si une case est « proche », on mesure la distance entre le milieu du héros et le milieu de la case : distance = √(dx² + dy²). Si elle dépasse 4 blocs, c'est refusé. Dans les rayons X, le cercle vert en pointillés montre cette portée.

🚦 Le gardien des règles

Avant de poser, le jeu pose des questions, dans l'ordre. Dès qu'une réponse est « non », il s'arrête et le journal dit pourquoi :

1. Reste-t-il des blocs dans le sac ?
2. La case est-elle dans le monde, et vide (de l'air) ?
3. Est-on assez loin d'un monstre vivant (plus de 6 blocs) ?
4. La case est-elle à portée (4 blocs) ?
5. Personne n'est dedans (toi, un cochon, un monstre) ?

Le cadre vert ou rouge sous la souris utilise exactement les mêmes questions : c'est pour ça qu'il ne se trompe jamais.

🔍 Missions d'exploration

1. Dans « L'état en direct », regarde la ligne « case sous la souris » en bougeant la souris.
2. Active les rayons X (X) près d'un monstre : trouve la zone rouge « construction interdite ».
3. Pose une brique, puis cherche le 8 dans « La carte en mémoire ».
4. Dépense 30 blocs, puis passe un drapeau : que dit le journal ?
5. Essaie de construire un pont au-dessus d'un lac de lave.

❓ Quiz

🔫 Étape 15 : pistolets, hache, épée dorée et armure ✅ livrée · à valider

Une barre d'inventaire en bas de l'écran, 3 pistolets aux balles infinies, une hache qui casse les caisses, une épée dorée, et une vraie armure en fer à fabriquer.

🧰 Un catalogue d'armes

Chaque arme est une petite fiche dans config.js : son nom, ses dégâts, son usure et son attente. Le jeu n'a pas une règle par arme : il a une seule règle (« enlève les dégâts de l'arme en main ») qui lit la fiche. Pour inventer une nouvelle arme, il suffit d'ajouter une fiche !

⏳ L'attente : un compte à rebours

Après chaque coup ou tir, un nombre (attente) se met à 0,25, 0,6 ou 1,2. À chaque pas de temps, on lui enlève 1/120 de seconde. Tant qu'il n'est pas à 0, T ne fait rien et le journal dit « pas encore prêt ». C'est comme ça que des balles infinies ne deviennent pas une mitraillette !

💨 La vie d'une balle

🦺 L'armure : une soustraction

Un monstre frappe 3 PV. Avec l'armure : 3 − 2 = 1 PV seulement. À chaque coup, l'armure s'use (20 coups). Le bouclier passe avant : il arrête les 3 premiers coups tout seul.

🔍 Missions d'exploration

1. Active les rayons X (X) avec un pistolet en main : trouve la ligne de portée, puis tire et regarde la balle avancer (pause, puis N).
2. Tire au gros pistolet, puis appuie tout de suite encore sur T : que dit le journal ?
3. Combien de coups d'épée dorée faut-il pour vaincre un monstre de 30 PV ? Et au gros pistolet ?
4. Casse 5 fers, fabrique l'armure, et compare « PV » avant et après un coup de monstre.
5. Dans l'état en direct, regarde « attente avant le prochain coup » descendre.

❓ Quiz

🎵 Étape 16 : musique et bruitages ✅ livrée · à valider

Le jeu n'est plus muet ! Une petite musique rétro, des pas qui font « chhh » sur l'herbe et « toc » sur le bois, un « boom, bring » au saut… et aucun fichier de son : tout est fabriqué avec des nombres.

〰️ Un son, c'est de l'air qui vibre

Le haut-parleur pousse l'air très vite, en avant, en arrière… Le nombre d'allers-retours par seconde, c'est la fréquence, en hertz (Hz). 440 Hz, c'est la note La. Plus la fréquence est grande, plus le son est aigu. Et la forme de la vibration change le « goût » du son :

📈 L'enveloppe : « toc » ou « bong » ?

Chaque son a une enveloppe : le volume monte très vite (l'attaque), puis redescend jusqu'au silence. Si ça redescend en 0,04 s, ça fait « toc » (un pas). En 0,8 s, ça fait « pschhh » (la lave). Et si la fréquence glisse de 160 Hz à 55 Hz pendant le son, ça fait « boom » !

🎼 La musique : une partition et un séquenceur

La musique est une liste de notes (8 mesures de 4 temps) : quelle note, à quel temps, pendant combien de temps. Chaque note a un numéro (60 = Do, 69 = La) et on calcule sa fréquence : 440 × 2^{(numéro − 69) ÷ 12}. Monter de 12 numéros, c'est monter d'une octave : la fréquence double. Toutes les 0,1 s, le séquenceur prépare les notes des 0,3 secondes suivantes, pour que la musique ne boite jamais.

👂 Qui décide des sons ?

L'orchestre (affichage/sons.js) écoute les événements du jeu, comme le journal : « saut » → boom, « tir » → pan… Pour les pas, il regarde le bloc sous les pieds du héros (le même nombre que dans « La carte en mémoire ») et choisit herbe, bois ou pierre.

🔍 Missions d'exploration

1. Dans l'état en direct, regarde « sous les pieds » et « dernier bruit » pendant que tu cours.
2. Regarde « musique » : sur quelle mesure est-on ? Combien y en a-t-il ?
3. Coupe la musique (J) : que dit le journal ?
4. Cours sur tes propres briques : quel bruit font-elles ?
5. Dans config.js, trouve le tempo et la fréquence des pas.

❓ Quiz

⛏️ Étape 17 : pelle, casser les blocs et mitrailleuse ✅ livrée · à valider

On creuse ! La pelle, la hache et la pioche cassent les blocs d'un clic de souris, et chaque bloc cassé va dans le sac. Et une mitrailleuse, mais avec des balles comptées.

🧰 Le bon outil pour le bon bloc

🧠 Le jeu se souvient du bloc que tu tapes

Pour les blocs à 3 clics, le monde garde une petite fiche : cassage = { colonne, ligne, clics, besoin }. À chaque clic sur le même bloc, clics augmente (et une fissure apparaît). Si tu cliques sur un autre bloc, la fiche recommence à zéro. Quand clics atteint besoin, on écrit 0 (l'air) dans la grille… et le bloc disparaît.

🎲 Le butin : le hasard et les compteurs

La mitrailleuse a un compteur de balles : −1 à chaque tir. À 0, clic, plus rien ! Quand un monstre est vaincu, le jeu tire un nombre au hasard entre 0 et 1 : s'il est plus petit que 0,5 (1 chance sur 2), il tire un deuxième nombre entre 10 et 25… et c'est ton butin.

🔍 Missions d'exploration

1. Creuse un puits jusqu'au fond du monde. Regarde « La carte en mémoire » : les cases deviennent des 0.
2. Dans l'état en direct, regarde « bloc en train d'être cassé » pendant tes 3 clics de pioche.
3. Clique 2 fois sur un bloc, puis 1 fois sur un autre, puis reviens : combien de clics faut-il encore ?
4. Garde T appuyée 2 secondes avec la mitrailleuse : combien de balles as-tu tirées ?
5. Bats 4 monstres et note le butin de chacun dans le journal.

❓ Quiz

🥁 Étape 18 : un cri dans les trous et une batterie sur les murets ✅ livrée · à valider

Deux nouveaux bruitages rigolos : le héros crie de surprise quand il tombe dans un trou, et le squelette danse sur un vrai rythme de batterie.

🗣️ Un cri, c'est une fréquence qui monte puis descend

Le cri est fait de deux notes collées : la première glisse de 330 Hz à 880 Hz (la voix monte, « ouh-OUH »), la seconde redescend de 880 Hz à 420 Hz (« oh ? »). C'est la même astuce que le « boom » du saut, mais dans l'autre sens.

🥁 Une batterie avec seulement 3 sons

❓ Quiz

🚀 Étape 19 : le Magnum et le bazooka ✅ livrée · à valider

Un Magnum qui recule quand il tire (le héros gesticule et l'écran tremble), et un bazooka qui tire des roquettes explosives. Pour recharger le bazooka, il faut miner de la pierre.

🔙 Le recul : action et réaction

Quand une arme pousse une balle très fort vers l'avant, la balle pousse l'arme vers l'arrière : c'est le recul. Dans le jeu, le héros recule de 8 px, sans traverser les murs, grâce à la même règle de collision que pour marcher. Pendant 0,35 s, le dessin du héros se penche et son bras remonte, puis tout revient en place.

Le tremblement de l'écran ne change pas le monde : c'est seulement le peintre qui décale un peu son dessin (quelques pixels, en suivant un sinus). La caméra, elle, ne bouge pas.

💥 L'explosion : une zone de 3 × 3

🔍 Missions d'exploration

1. Active les rayons X (X), tire une roquette et mets en pause (Échap) : trouve le carré orange de la zone d'explosion.
2. Tire au Magnum et regarde « recul du Magnum » dans l'état en direct.
3. Mine de la pierre dans une grotte et regarde « pierres minées » monter jusqu'à 10.
4. Tire une roquette dans la terre : combien de blocs sont cassés ? Et contre le fond du monde ?

❓ Quiz

🖱️ Étape 20 : cliquer sur la barre pour choisir ✅ livrée · à valider

Plus besoin de chercher la bonne touche : un clic sur une case de la barre, et l'objet est dans la main du héros.

🎯 Sur quelle case ai-je cliqué ?

Chaque case de la barre est un rectangle : x, y, largeur (46 px), hauteur (46 px). Quand tu cliques, le jeu regarde si la souris est dedans : x plus grand que le bord gauche ET plus petit que le bord droit, et pareil en hauteur. C'est exactement la même idée que les collisions de l'étape 1 (« est-ce que deux rectangles se touchent ? »), avec un tout petit rectangle : la pointe de la souris.

Le peintre et le jeu utilisent la même fonction (caseDeLaBarre) pour connaître la place des cases : comme ça, on clique toujours exactement là où c'est dessiné.

❓ Quiz

🔄 Étape 21 : mitrailleuse infinie et rechargement du bazooka ✅ livrée · à valider

La mitrailleuse ne s'arrête plus jamais, et le héros recharge son bazooka avec une roquette prise dans son dos.

🎞️ Une animation en 3 temps

Le rechargement dure 1,2 s. Le jeu calcule un nombre k qui va de 0 (début) à 1 (fin), et place la main du héros selon k :

1. de 0 à 0,35 : la main va de devant jusque dans le dos ;
2. de 0,35 à 0,75 : elle revient avec une roquette jusqu'au bout du tube ;
3. de 0,75 à 1 : elle pousse la roquette dedans.

Pour trouver un point entre deux points, on fait « départ + (arrivée − départ) × t ». C'est une interpolation : c'est comme ça que presque toutes les animations des jeux vidéo sont faites.

🐞 Un petit bug d'arrondi

La mitrailleuse tirait 47 balles en 5 s au lieu de 50. Pourquoi ? Pour un ordinateur, 0,1 − 12 × (1/120) ne fait pas exactement 0, mais 0,0000000000001 ! Alors il attendait un pas de plus avant chaque tir. La réparation : en dessous de 0,000001, on arrondit à 0.

❓ Quiz

🎯 Étape 22 : cinq nouvelles armes à feu ✅ livrée · à valider

Fusil à pompe, fusil de sniper, pistolet laser, lance-flammes et pistolet à eau : chacun a son dessin, son éclair, son bruit, ses douilles et son rechargement.

🧰 Le catalogue des armes à feu

📐 L'éventail du fusil à pompe

Jusqu'ici, les balles allaient tout droit : seulement une vitesse horizontale vx. Maintenant elles ont aussi une vitesse verticale vy. Les 5 plombs partent avec 5 angles différents (−0,22 ; −0,11 ; 0 ; 0,11 ; 0,22 radian) : vx = vitesse × cos(angle), vy = vitesse × sin(angle). Plus on est loin, plus les plombs s'écartent… c'est pour ça qu'il faut tirer de près !

⚡ Le laser : chercher sur une ligne

Le laser n'envoie pas de balle. Le jeu avance sur la ligne de tir, 4 pixels par 4 pixels, et s'arrête à la première chose qu'il trouve : un monstre, un cochon ou un bloc solide. C'est le lancer de rayon. Le laser rouge du sniper utilise exactement la même méthode, mais juste pour le dessin.

💧 Les gouttes retombent : la gravité

Les gouttes du pistolet à eau ont une gravité : à chaque pas, vy augmente un peu, alors elles font une courbe, comme le héros quand il saute. Les douilles aussi tombent, et elles rebondissent : quand elles touchent un bloc, vy change de signe et perd 65 % de sa force.

🔁 Le rechargement, juste pour le style (corrigé à l'étape 23)

D'abord, Claude avait mis un chargeur à chaque arme : à 0, il fallait s'arrêter pour recharger. Mais Maxance voulait des balles vraiment infinies ! Maintenant, il n'y a plus de chargeur. Les armes lentes (Magnum, sniper, pompe, gros pistolet) font leur animation de rechargement pendant l'attente normale entre deux tirs : la main va à la ceinture et revient, mais ça ne ralentit jamais le tir.

🔍 Missions d'exploration

1. Tire au fusil à pompe de loin, puis de près : combien de PV perd le monstre à chaque fois ?
2. Regarde « chargeur de l'arme en main » dans l'état en direct pendant que tu tires.
3. Arrose un monstre plusieurs fois : jusqu'où recule-t-il ?
4. Mets le jeu en pause juste après un tir de laser : trouve le rayon bleu.
5. Compte les douilles quand tu recharges le Magnum.

❓ Quiz

🧍 Étape 24 : un héros de 2 blocs de haut ✅ livrée · à valider

Le héros grandit : 2 blocs de haut, plus large, il saute plus haut et il peut se baisser. Ses armes grandissent avec lui. Et le bazooka ne manque plus jamais de roquettes.

🔍 Agrandir un dessin : une échelle

Le dessin du héros a été fait pour 46 px de haut. Pour qu'il mesure 80 px, on ne redessine rien : on dit au peintre « dessine tout 80 ÷ 46 ≈ 1,74 fois plus grand » (ctx.scale). Quand il se baisse, on l'écrase seulement en hauteur : 38 ÷ 46 ≈ 0,83. Les armes, elles, sont agrandies un peu moins (× 0,85), pour ne pas être énormes.

📏 Tout ce que la taille change

🧎 Se relever : vérifier la place

Pour se relever, le héros a besoin de 42 px de plus au-dessus de sa tête. Le jeu regarde toutes les cases de la grille à cet endroit : s'il y a un bloc solide, il reste baissé, et le journal le dit.

❓ Quiz

🐉 Étape 25 : des dragons, des grottes à conquérir, miner avec T ✅ livrée · à valider

Tous les 100 blocs, un dragon mutant de 500 PV garde le passage. Les petits monstres se cachent dans les grottes : bats-les, et la grotte est à toi. Et pour miner, il suffit d'appuyer sur T.

👀 La zone de vue : « il m'a vu ! »

Chaque monstre a une zone de vue : 10 blocs pour le dragon, 6 pour les monstres des grottes. À chaque pas de temps, le jeu mesure l'écart entre le héros et le monstre. S'il est plus petit que la zone de vue, le monstre marche vers le héros. Sinon, il attend. Dans les rayons X (X), la zone de vue est un rectangle violet, qui devient rouge quand il t'a vu.

🦮 La laisse : il ne va pas partout

Un monstre ne s'éloigne jamais trop de sa place : c'est sa laisse (12 blocs pour le dragon, 5 pour les monstres des grottes). Et avant chaque pas, il vérifie qu'il y a du sol devant lui et pas de mur : les monstres ne tombent pas dans les trous !

🧠 Une petite intelligence artificielle

🏴 La grotte conquise : un nouveau point de retour

Quand le dernier monstre d'une grotte est vaincu, le jeu plante ton drapeau au milieu de la salle et se souvient de cet endroit (retourGrotte). Si tu perds une vie, tu réapparais là, sur le sol de la grotte, et plus au dernier drapeau. Dès que tu atteins un nouveau drapeau, c'est lui qui redevient ton point de retour.

⛏️ Miner avec T : 3 règles dans l'ordre

1. La souris vise un bloc solide à portée ? → C'est lui.
2. Sinon, tu es baissé (S) ? → Le bloc sous tes pieds (pour creuser vers le bas).
3. Sinon → le bloc juste devant toi.

🔍 Missions d'exploration

1. Approche-toi du dragon bloc par bloc : à combien de blocs se met-il à bouger ? Vérifie dans les rayons X.
2. Combien de tirs de sniper (25 dégâts) pour vaincre un dragon ? Et de roquettes (20) ?
3. Regarde « point de retour » dans l'état en direct avant et après avoir conquis une grotte.
4. Creuse un puits : baisse-toi avec S, prends la pioche et appuie sur T.

❓ Quiz

📷 Étape 26 : la caméra qui monte ✅ livrée · à valider

Quand tu grimpes sur tes blocs, la caméra monte avec toi. Tu ne sors plus jamais de l'écran par le haut.

🖼️ Deux lignes invisibles

La caméra garde le héros entre deux lignes de l'écran : sa tête ne monte pas plus haut que 250 px, et ses pieds ne descendent pas plus bas que 440 px. S'il dépasse une ligne, la caméra bouge juste assez pour le remettre dedans. Entre les deux, elle revient doucement à sa place (camera.y = 0). Active les rayons X (X) pour voir ces deux lignes en pointillés verts.

Quand la caméra monte au-dessus du monde, camera.y devient négatif : on regarde plus haut que la ligne 0. C'est la même formule qu'à l'étape 13 : y écran = y monde − camera.y.

❓ Quiz

🧱 Étape 27 : un monde sur mesure, et tirer à couvert ✅ livrée · à valider

Le monde a été réglé pour le héros de 2 blocs. Et caché derrière un bloc, le héros lève son arme par-dessus pour tirer, pendant que les monstres ne peuvent pas le toucher.

📐 Des mesures qui vont ensemble

🔫 Tirer par-dessus un bloc

Avant chaque tir, le jeu regarde la case juste devant le héros, à la hauteur de sa main. Si c'est un bloc solide et qu'il y a de l'air juste au-dessus, le tir part 6 px au-dessus du bloc, et le héros lève le bras. Dans l'état en direct, regarde « arme levée par-dessus un bloc ».

🛡️ Caché : les coups ne passent pas

Avant de frapper, un monstre vérifie maintenant s'il y a un bloc solide entre lui et le héros, à la hauteur de leurs deux corps. Si oui, le héros est à couvert : le coup ne part pas.

❓ Quiz

🌳 Étape 28 : des arbres, des portes et des escaliers ✅ livrée · à valider

Des arbres poussent le long du chemin. Coupe-les à la hache pour avoir du bois, et fabrique des portes et des escaliers. Et maintenant, tu peux construire où tu veux, aussi haut que tu veux !

🌲 Un arbre, ce sont des cases

Un arbre, c'est juste des numéros dans la grille : 12 pour le tronc (solide) et 13 pour les feuilles (pas solides). Le jeu se souvient de chaque arbre (sa colonne et ses feuilles) : quand la dernière case de tronc est coupée, il écrit 0 (l'air) à la place de toutes ses feuilles.

🚪 Une porte qui choisit qui passe

Une porte est solide… sauf pour le héros ! Le jeu a maintenant deux questions : « est-ce solide ? » (pour les monstres et les balles) et « est-ce solide pour le héros ? ». Pour la seconde, une porte répond non. Le peintre la dessine ouverte quand le héros la touche.

🪜 Monter une marche sans sauter

Quand le héros marche, le jeu regarde la case juste devant ses pieds. Si c'est une marche d'escalier et qu'il y a de la place au-dessus, il pose le héros dessus : y = haut de la marche − sa taille. C'est aussi simple que ça !

⬆️ Construire sans limite, au-dessus du monde

Plus aucune limite : les briques sont illimitées, on pose à n'importe quelle distance, et même près d'un dragon. La grille avait 24 lignes, de 0 à 23. Pour construire plus haut, on utilise des lignes négatives : −1, −2, −3… Une case jamais remplie, c'est de l'air. Et la caméra n'a plus de limite vers le haut.

🐷 La danse du cochon

Quand un cochon est vaincu, il reste encore 1,5 seconde dans le monde avec un compte à rebours (danseMort). Pendant ce temps, le peintre le dessine debout, en faisant bouger ses pattes avant avec un sinus (comme les ailes du dragon), puis il le rend de plus en plus transparent.

🥁 Silence pour la batterie

Sur un muret à pics, la musique Game Boy se tait pendant que le squelette danse : on n'entend que le « tac-tac-tac-tac-TAC » et la batterie. Pour l'orchestre, c'est juste une condition de plus : « je joue la musique seulement si le squelette ne danse pas ».

❓ Quiz

📏 Étape 29 : le monde à ta taille ✅ livrée · à valider

Ton héros mesure 2 blocs : maintenant, le monde aussi a grandi ! Caisses, tours, murets, cochons, monstres et arbres sont à sa taille. Tu as aussi une loupe (V), un son qui se tait quand tu regardes ailleurs, un son au ralenti, et la touche Entrée pour poser un bloc en sautant.

📐 Les « métriques » du monde

Dans un jeu, les tailles vont ensemble. Le héros mesure 2 blocs et saute 4,5 blocs. Alors :

• une caisse de 2 blocs, c'est un saut facile ;
• une tour de 4 blocs, c'est un saut difficile (saute d'abord, puis avance) ;
• un muret de 2 blocs de haut et 2 de large, il faut bien prendre son élan.

Tous ces nombres sont dans config.js. Par exemple, hauteurs: { caisse: 2, tour: 4, muret: 2 }. Changer un nombre suffit à changer le monde !

🔍 La loupe : le zoom

Pour dessiner avec le zoom, le peintre dit au crayon : « tout ce que tu dessines, fais-le 2 fois plus grand » (ctx.scale(2, 2)). Mais l'écran ne grandit pas : il montre donc 2 fois moins de monde.

x à l'écran = (x dans le monde − caméra) × zoom
x dans le monde = x à l'écran ÷ zoom + caméra   ← pour savoir quelle case vise la souris

Les compteurs et la barre du bas sont dessinés après la loupe : ils restent à leur taille.

⛏️ Un muret qu'on casse

Avant, le jeu disait « tu touches le rectangle du muret → tu meurs ». Maintenant, il regarde aussi la grille : il ne pique que si une case touchée contient encore un pic (numéro 7). Un pic cassé, c'est une case 0 (l'air).

😴 Le son qui s'endort

Le navigateur prévient le jeu quand la fenêtre perd le « focus » (blur) ou quand l'onglet est caché (visibilitychange). Le synthétiseur se met alors en pause (suspend). Il repart (resume) quand tu reviens.

🐢 Le son au ralenti

Au ralenti, le temps du monde avance 4 fois moins vite (× 0,25). Pour le son, on fait pareil :

• chaque durée est divisée par 0,25 (donc 4 fois plus longue) ;
• chaque fréquence est multipliée par 0,25 (donc plus grave : 2 octaves plus bas).

C'est exactement ce qui arrive à un disque qu'on freine avec le doigt !

⌨️ Une touche, deux actions

Entrée veut dire « valider » dans les menus, et « poser un bloc » pendant la partie. Le livre des touches (entrees.js) peut maintenant donner plusieurs actions à une même touche : chaque partie du jeu ne lit que la sienne.

🔎 Missions d'exploration

• Rayons X (X) + zoom ×2 : la grille et les cases grandissent aussi. Combien de colonnes vois-tu ?
• Dans l'état en direct, regarde la ligne « zoom » : combien de pixels fait un bloc à ×1,5 ?
• Casse un seul pic d'un muret, puis touche les autres : lesquels piquent encore ?
• Mets le ralenti et lis la ligne « vitesse du son ». Puis va sur une autre fenêtre : que dit le journal ?

❓ Quiz

🎒 Étape 30 : l'arme dans le dos, et les lasers ✅ livrée · à valider

Quand ton héros saute, il range son arme dans son dos, comme une épée dans son fourreau, et il la ressort en atterrissant. Collé à un mur, il fait un petit saut tout seul pour tirer par-dessus. Et tes meilleures armes ont un laser vert d'élite !

🐛 Le bug du lance-flammes

Le réservoir du lance-flammes était dessiné avec l'arme. Le peintre déplaçait tout le dessin de l'arme au même endroit que la main. Quand la main se levait au-dessus d'un bloc (étape 27), le réservoir montait avec elle et s'envolait !

La réparation : le réservoir (et le carquois du bazooka) est maintenant dessiné avec le corps, pas avec la main. Il reste accroché au dos, quoi que fasse l'arme.

🎒 Une petite machine à états pour l'arme

L'arme a maintenant 4 états, comme le héros (au sol, monte, descend…) :

✋ en main ──(il saute, ou collé à un mur)──▶ 🎒 dans le dos
🎒 dans le dos ──(il atterrit, ou T)──▶ 🗡️ il la sort (0,6 s, ou 0,15 s avec T) ──▶ ✋ en main
✋ en main ──(une marche d'escalier)──▶ 🪖 soldat (arme vers le bas)

Pour voir l'atterrissage, le jeu se souvient de l'état du héros au pas d'avant : « avant : en l'air, maintenant : au sol » → il vient d'atterrir !

🔄 Faire tourner un dessin

Une « pose » de l'arme, c'est 3 nombres : où est la main (x, y), et un angle. Pour la sortie, le jeu glisse doucement de la pose « dos » à la pose « main ». À la moitié du temps, il est à la moitié du chemin et à la moitié de l'angle : c'est une interpolation. Le peintre utilise ctx.rotate(angle) pour tourner le dessin.

🦘 Le petit saut et le tir en haut

Collé à un mur, T donne au héros une vitesse vers le haut de 480 px/s. La gravité le ralentit. En haut du saut, sa vitesse devient 0 (ou positive) : c'est là que le tir part. Hauteur du saut : 480 × 480 ÷ (2 × 2400) = 48 px.

🟢 Le laser de visée

Le jeu avance sur la ligne du tir, 4 px par 4 px, jusqu'à toucher un bloc, un monstre ou un cochon. Le peintre trace un trait vert jusque-là, avec un point qui clignote. C'est le même calcul que pour le pistolet laser, mais sans dégâts !

🔊 Un bruit de science-fiction

Le nouveau bruit du pistolet laser, ce sont 4 sons en même temps :

• une note qui descend de 2 600 Hz à 120 Hz (« vwiiiou ») ;
• la même note une octave plus bas (pour le corps) ;
• un grésillement électrique ;
• 3 petits échos de plus en plus graves (« ou-ou-ou »).

🔎 Missions d'exploration

• Dans l'état en direct, regarde la ligne « l'arme » pendant un saut, puis à l'atterrissage.
• Prends le sniper et regarde « viseur laser » : à combien de blocs touche-t-il le prochain bloc ?
• Mets le ralenti (L) et le zoom ×2 (V), puis saute : regarde l'épée tourner en sortant du dos.
• Prends la hache et saute : est-ce qu'elle va dans le dos ? Pourquoi ?

❓ Quiz

🚦 Étape 31 : le carrefour et la voiture ✅ livrée · à valider

Après le dragon du bloc 100, c'est toi qui choisis la suite : sous terre, dans le ciel, ou tout droit, sur la route, en voiture !

🧭 Un monde qui attend ta décision

Le monde est fabriqué morceau par morceau, juste avant que tu le voies (les tronçons de 30 blocs). Au carrefour, le jeu arrête de fabriquer : il ne sait pas encore quoi mettre ! Quand tu choisis, il range un mot dans sa mémoire : monde.chemin = "souterrain", "ciel" ou "route". Ensuite, chaque nouveau tronçon est fabriqué selon ce mot.

tronçon 0, 1, 2, 3 → normal (le dragon du bloc 100 est dans le 3)
tronçon 4          → le carrefour (tout plat, avec le panneau)
tronçon 5 … 32     → selon monde.chemin
tronçon 33         → l'arrivée (pareil pour tous)

C'est comme un livre dont tu es le héros : « si tu descends, va à la page 12 ».

🚗 La voiture, un « corps » comme le héros

La voiture a les mêmes nombres que le héros : x, y, largeur, hauteur, vitesse. Elle utilise la même gravité et la même façon d'avancer dans la grille. Quand tu es au volant, le héros ne bouge plus tout seul : il est « collé » au milieu de la voiture.

La rampe : quand la voiture monte une marche, le jeu lui donne une vitesse vers le haut (620 px/s). Comme elle va vite vers l'avant, elle s'envole au-dessus du trou.

⛽ L'essence, un compteur qui descend

Le réservoir compte des blocs : 50 au départ. À chaque pas, le jeu enlève la distance parcourue (en blocs). À 0, les flèches ne font plus avancer la voiture. G enlève 1 bidon du sac et remet 50 dans le réservoir.

⛏️ Sous terre et ☁️ dans le ciel

Sous terre, chaque colonne est remplie ainsi :

• de l'herbe et de la terre en haut ;
• un couloir d'air (lignes 13 à 17) ;
• de la roche en bas, avec des mares de lave.

Les drapeaux sont plantés sur le sol du couloir : on y réapparaît.

Dans le ciel, le jeu fabrique un tronçon normal, puis il pose une ligne de planches tout en haut (ligne 2). Les dragons ne gardent pas le passage quand tu es bien au-dessus d'eux.

🔎 Missions d'exploration

• Dans l'état en direct, regarde « chemin » avant et après le carrefour.
• Au volant, regarde « voiture » : la vitesse, « au sol » ou « en l'air ✈️ », et l'essence qui baisse.
• Avec les rayons X (X), regarde les numéros des cases de la route : quel numéro a le goudron ?
• Dans le journal, cherche les lignes « Tronçon n° … [souterrain] ».

❓ Quiz

🏎️ Étape 32 : un nouveau jeu, le circuit en 3D ✅ livrée · à valider

Un deuxième jeu, à côté du premier : une voiture qui fait la course sur un circuit, en 3D. Il s'ouvre ici : ▶ le circuit 3D.

🔺 Tout est fait de triangles

Une carte graphique ne sait dessiner qu'une forme : le triangle. La voiture, les sapins, la route, la tribune… tout est découpé en triangles, comme une sculpture en papier plié. Une boîte (le bas de la voiture) = 6 faces = 12 triangles. Une roue = 48 triangles.

Appuie sur X : tu vois les arêtes de tous les triangles en vert. Dans « sous le capot », la ligne « triangles dessinés » te dit combien il y en a : environ 9 000, dessinés 60 fois par seconde !

📐 Trois nombres pour une position : x, y, z

Dans le jeu de plateforme, une position avait 2 nombres : x (gauche-droite) et y (haut-bas). En 3D, il en faut 3 :

x = gauche ↔ droite
y = bas ↕ haut        (le sol est à y = 0)
z = avant ↔ arrière   (la profondeur)

Ici, on compte en mètres, pas en pixels. La voiture fait 4,2 m de long, comme une vraie.

🎥 La caméra et la perspective

Pour dessiner, l'ordinateur se pose une question pour chaque coin de triangle : « ce point du monde, où tombe-t-il sur l'écran plat ? ». Il fait 2 calculs :

1. La caméra : où est l'œil, et vers où il regarde (11 m derrière la voiture, 4,5 m de haut) ;
2. La perspective : on divise par la distance. Ce qui est 2 fois plus loin paraît 2 fois plus petit. C'est pour ça que la route devient toute fine au loin.

Ces calculs sont rangés dans des matrices (des tableaux de 16 nombres), dans circuit/moteur/maths3d.js.

🧭 Avancer en biais : cos et sin

La voiture a un angle (vers où elle regarde) et une vitesse. Pour avancer, il faut découper « tout droit » en « un peu vers x » et « un peu vers z » :

x = x + cos(angle) × vitesse × temps
z = z + sin(angle) × vitesse × temps

Avec un angle de 0, cos = 1 et sin = 0 : on avance seulement vers x. Avec un angle de 90°, c'est l'inverse.

🚪 Les portes invisibles

Comment le jeu sait qu'un tour est fini ? Le circuit est coupé en 4 : la ligne (porte 0) et 3 portes invisibles. Il faut les passer dans l'ordre : 1, 2, 3, puis la ligne. Sinon, on pourrait tricher : passer la ligne, reculer, la repasser… Aux rayons X, les portes sont violettes, et la prochaine est verte.

🔎 Missions d'exploration

• Roule tout droit et regarde « angle » dans l'état en direct : il ne bouge pas. Tourne : il change.
• Mets-toi dans l'herbe : regarde « écart au milieu ». À partir de combien de mètres es-tu dans l'herbe ?
• Recule à travers la ligne d'arrivée : que dit le journal ?
• Vue du ciel (C) et rayons X : trouve le « squelette » orange caché au milieu du stade.
• Combien de triangles en vue « capot » ? Pourquoi moins qu'en vue « poursuite » ?

❓ Quiz

📏 Étape 33 : un circuit 3 fois plus grand ✅ livrée · à valider

Tu as testé le circuit, tu aimes le style, mais il était trop petit. Le voici 3 fois plus grand : ▶ le circuit 3D.

🎛️ Deux nombres ont suffi

Pour agrandir tout le circuit, on a changé seulement 2 nombres dans circuit/config.js :

longueurDroite: 120  →  360
rayon:           40  →  120

La route, les bordures, le damier, la tribune, les portes invisibles, les rayons X : tout est calculé à partir de ces nombres. Personne n'a redessiné le circuit à la main ! C'est la force d'un fichier de réglages.

🧮 Combien de mètres dans un tour ?

Un tour = 2 lignes droites + 2 demi-cercles (= 1 cercle entier) :

tour = 2 × 360 + 2 × 3,14 × 120
     = 720 + 754
     ≈ 1 474 m        (avant : 491 m, donc 3 fois plus)

À 42 m/s (150 km/h), ça fait 1 474 ÷ 42 ≈ 35 secondes.

🌫️ La brume et la mini-carte

Au loin, les objets se fondent dans la couleur du ciel : c'est la brume. Elle cache le bord du monde, et elle aide l'ordinateur (il n'a pas besoin de dessiner très loin). Avec un circuit plus grand, on l'a repoussée : elle commence à 300 m au lieu de 180 m.

La mini-carte, elle, calcule toute seule son échelle : 130 pixels ÷ la largeur du circuit. Aujourd'hui, 1 m = 0,21 pixel. Si tu agrandis encore le circuit, elle s'adaptera.

🔎 Missions d'exploration

• Vue du ciel (C) : est-ce que tu vois encore le virage en entier ?
• Dans l'état en direct, regarde « progression » : sur combien de mètres compte-t-on maintenant ?
• Aux rayons X (X), regarde où sont les portes : à combien de mètres chacune ?
• Combien de triangles dessinés maintenant ? Pourquoi plus qu'avant ?

❓ Quiz

🔵 Étape 34 : une voiture adverse ✅ livrée · à valider

Tu n'es plus seul sur la piste : une voiture bleue, conduite par l'ordinateur, veut gagner la course ! ▶ le circuit 3D

🤖 Comment l'ordinateur conduit : la carotte

La voiture bleue est exactement la même que la tienne : même fichier, mêmes calculs. La seule différence, c'est qui appuie sur les touches. Pour toi, c'est le clavier. Pour elle, c'est un petit cerveau, le pilote (circuit/logique/pilote.js). 120 fois par seconde, il fait 3 choses :

1. il regarde un point 18 m devant lui, au milieu de sa voie : c'est la « carotte » ;
2. si la carotte est à sa gauche, il appuie sur ←, et si elle est à sa droite, sur → ;
3. il garde toujours le pied sur l'accélérateur.

Comme la carotte avance avec lui, il ne l'attrape jamais… et il fait le tour du circuit ! Aux rayons X (X), tu vois la carotte en bleu clair, et ce que pense le pilote : « cible à 3° → à droite ».

Pour te doubler : si tu es devant lui, sur sa voie, à moins de 22 m, il change de voie (intérieure ↔ extérieure).

💥 Comment savoir si deux voitures se touchent : les cercles

Tester si deux rectangles tournés se touchent, c'est compliqué. L'astuce des jeux vidéo, c'est de remplacer chaque voiture par 2 cercles, un à l'avant et un à l'arrière. Deux cercles se touchent si la distance entre leurs centres est plus petite que 2 rayons. C'est un seul calcul !

rayon d'un cercle = 1,05 m
ça touche si : distance entre les centres < 2 × 1,05 = 2,1 m

Quand ça touche, le jeu fait 2 choses (circuit/moteur/chocs.js) :

1. il écarte les voitures, pour qu'elles ne se rentrent plus dedans ;
2. il les fait rebondir : chacune reçoit une poussée dans la direction du choc. Le réglage rebond: 0.3 dit si elles rebondissent peu (0) ou beaucoup (1).

Aux rayons X, tu vois les cercles blancs autour des deux voitures. Ils deviennent rouges quand ça touche.

🥇 Qui est devant ?

Pour savoir qui est 1er, le jeu calcule la distance parcourue par chaque voiture depuis le départ : (tour − 1) × 1 474 m + la progression sur le tour en cours. La plus grande est devant.

🔎 Missions d'exploration

• Aux rayons X, suis la carotte bleue : à combien de mètres devant la voiture bleue est-elle ?
• Dans l'état en direct, regarde « cible » : quand la voiture bleue est dans un virage, que dit-elle ?
• Mets-toi devant elle sur sa voie : que dit le journal ?
• Fais exprès de la cogner, et regarde « Vitesse du choc » dans le journal. Que se passe-t-il si tu la cognes plus fort ?
• Dans la base de données, trouve tes victoires et tes défaites.

❓ Quiz

🔊 Étape 35 : le bruit du moteur ✅ livrée · à valider

Vroum ! Ta voiture a maintenant un gros moteur grave, et tu entends la voiture bleue arriver. ▶ le circuit 3D

🎛️ Un son fabriqué avec des nombres

Le jeu n'a aucun fichier de son : il fabrique ses sons, comme un synthétiseur (circuit/moteur/son.js). Un son, c'est de l'air qui vibre. Le nombre de vibrations par seconde s'appelle la fréquence, en hertz (Hz) : plus c'est grand, plus c'est aigu.

fréquence du moteur = 38 Hz + 52 Hz × (vitesse ÷ vitesse max)
à l'arrêt  :  38 Hz   (très grave)
à fond     :  90 Hz

Pour faire un gros moteur, on mélange 3 vibrations « en dents de scie » (un son rugueux), on fait trembler le volume (les explosions dans les cylindres), et on passe le tout dans un filtre qui étouffe les aigus, comme une main devant la bouche.

📏 Entendre la distance

Le volume de la voiture bleue dépend de la distance entre vous deux : à 0 m, à fond ; à 70 m, plus rien. Le jeu calcule aussi si elle est à ta gauche ou à ta droite, et il envoie le son plus dans une oreille que dans l'autre : c'est le panoramique.

🔎 Missions d'exploration

• Dans l'état en direct, regarde « ton moteur » : combien de Hz à l'arrêt ? Et à fond ?
• Regarde « moteur bleu » quand elle s'éloigne : que devient son volume ?
• Mets un casque et regarde « côté » : −1, c'est quelle oreille ?
• Mets-toi en pause (Échap) : que devient le son ?

❓ Quiz

🏠 Étape 36 : le garage, 5 voitures et les pièces ✅ livrée · à valider

Le jeu commence maintenant au garage. Ramasse les pièces dorées sur le circuit pour t'acheter des voitures plus rapides ! ▶ le circuit 3D

🗂️ Une voiture, c'est une fiche

Les 5 voitures sont rangées dans circuit/config.js, comme des fiches :

{ nom: "Le Taureau", prix: 50, vitesseMax: 44.4, acceleration: 15,
  couleurs: [jaune, noir], son: { ralenti: 55, max: 150 } }

Le code de la voiture est le même pour toutes : il lit simplement la fiche de la voiture choisie. Pour ajouter une 6e voiture, il suffirait d'ajouter une fiche (et sa forme). C'est ce qu'on appelle décrire avec des données.

🛠️ Sculpter une voiture avec des tranches

Pour donner une forme à chaque voiture (circuit/affichage/modeles.js), on empile des tranches : des boîtes qu'on peut pincer (plus étroites en haut) et pencher (plus basses à l'avant). Le Taureau est un grand coin pointu, la Flèche a un dos qui plonge, la Fusée est longue avec une calandre en fer à cheval, et la Formule 1 est un corps tout fin avec 2 ailerons et un pilote au casque jaune. Appuie sur X au garage : tu verras les triangles de chaque voiture !

🪙 Les pièces : une marche au hasard

Les 50 pièces sont posées tous les 29 m environ (1 474 m ÷ 50), sur une des 3 voies : gauche, milieu ou droite. Pour qu'on puisse les enchaîner, la voie change petit à petit : la plupart du temps on reste sur la même voie, parfois on passe à la voisine. Pour savoir si tu prends une pièce, le jeu mesure la distance entre le milieu de ta voiture et la pièce : moins de 2,4 m, et elle est à toi !

💾 Le porte-monnaie dans la base de données

Tes pièces, tes voitures achetées et ta voiture choisie sont rangées dans la base de données (version 3). Elles survivent quand tu fermes la page. Le garage ne touche jamais au tiroir lui-même : il annonce « achat » à la radio, et c'est la sauvegarde qui enlève les pièces et range la nouvelle voiture.

🔎 Missions d'exploration

• Dans l'état en direct, regarde « prochaine pièce devant » : à combien de mètres, et sur quelle voie ?
• Dans la base de données, regarde pieces pendant la course, puis à l'arrivée.
• Achète une voiture et lis le journal : qui annonce l'achat ? Qui range ?
• Avec chaque voiture, regarde « ton moteur » dans « Le son » : combien de Hz à fond ?

❓ Quiz

🎢 Étape 37 : choisir sa carte, et le parcours ✅ livrée · à valider

Le jeu commence maintenant par « Choisis ta carte ». Nouvelle carte : le parcours, une grande map plate pleine de tremplins, de loopings et de tunnels, avec son propre garage de tout-terrain. ▶ le circuit 3D

🧱 Un relief fait de 2 formes

Tout le relief du parcours (circuit/logique/parcours.js) est fait de 2 formes seulement :

• le bloc : une boîte au dessus plat (un plateau, un mur de tunnel) ;
• la pente : une boîte dont le dessus monte de 0 m d'un côté à sa hauteur de l'autre.

Une montée = une pente + un bloc + une pente. Un tremplin = une pente toute seule : au bout, le sol disparaît… et tu t'envoles !

Sol ou mur ? Le jeu compare la hauteur du dessus avec la hauteur de ta voiture. Moins de 0,7 m plus haut : c'est une marche, tu montes. Plus haut : c'est un mur, BOUM.

✈️ Le saut : la gravité

Quand tu montes une pente, ta voiture gagne une vitesse vers le haut (vy). Au bout du tremplin, le sol disparaît : la voiture garde cette vitesse et monte… mais la gravité enlève 20 m/s à vy chaque seconde. Elle ralentit, s'arrête de monter, puis retombe. C'est une courbe en forme d'arc : une parabole.

à chaque pas :  vy = vy − 20 × temps
                 y  = y  + vy × temps
                 si y touche le sol → atterrissage !

Le monster truck saute 1,5 fois plus haut : sa vy est multipliée par 1,5 au décollage.

🎢 Le looping : un rail en cercle

À l'entrée du looping, le jeu vérifie 3 choses : tu es bien à l'entrée, tu roules dans le bon sens, et tu vas à au moins 54 km/h. Si oui, ta voiture est « accrochée » au rail. Un nombre, θ (thêta), compte l'angle parcouru, de 0° à 360°. La position vient du cercle :

avancer = rayon × sin(θ)
hauteur = rayon × (1 − cos(θ))     → à θ = 180°, tu es tout en haut, la tête en bas !

Encore cos et sin, comme pour avancer en biais à l'étape 32 !

📦 Les cartons qui volent

Chaque carton a sa position et sa vitesse (vx, vy, vz). Quand tu fonces dedans, il reçoit la vitesse de ta voiture, plus un bond vers le haut et un peu de hasard. Ensuite, la même gravité que pour tes sauts le fait retomber, en tournant sur lui-même.

🏠 Un garage par carte

Chaque garage est une liste de fiches dans config.js. Les fiches du parcours ont des nombres en plus : virage (le buggy tourne mieux), saut (le monster truck saute plus haut) et ecrase (le monster truck ne ralentit pas dans les cartons). Tes pièces et tes voitures achetées sont les mêmes sur toutes les cartes.

🔎 Missions d'exploration

• Saute d'un tremplin et lis le journal : combien de mètres, combien de secondes en l'air ?
• Essaie le même tremplin avec le monster truck : tu sautes plus loin ?
• Arrive trop lentement à un looping : que dit le jeu ?
• Aux rayons X (X), lis la hauteur des plateaux et regarde « y » et « vy » au-dessus de ta voiture pendant un saut.
• Combien de pièces trouves-tu en une balade ? Où sont les plus difficiles ?

❓ Quiz

✨ Étape 38 : un rendu réaliste avec Three.js ✅ livrée · à valider

Fini les blocs : des voitures arrondies et brillantes, de vraies ombres, de l'herbe et du goudron qui ont l'air vrais. ▶ le circuit 3D

📚 Three.js, une « bibliothèque »

Jusqu'ici, on dessinait tout avec notre propre moteur 3D. Pour faire plus beau, on utilise Three.js : un moteur 3D écrit par des milliers de développeurs. C'est une bibliothèque : du code tout prêt qu'on range dans le projet (circuit/vendor/three.min.js). Les règles du jeu (la physique, les tours, les pièces) n'ont pas changé : seul « le peintre » a changé.

🚗 Une voiture : un profil « extrudé »

On dessine le profil de la voiture vu de côté (le nez, le capot, le toit, les passages de roues), avec des coins arrondis. Puis on l'extrude sur la largeur de la voiture, comme un emporte-pièce dans de la pâte : le dessin plat devient un volume (circuit/affichage/modeles.js).

☀️ Lumière, ombres, matériaux, textures

• Les ombres : le soleil « regarde » la scène ; tout ce qu'il ne voit pas est à l'ombre.
• Les matériaux : la peinture est vernie et reflète le ciel, le pneu est mat, le chrome brille, les phares émettent leur propre lumière.
• Les textures : des images collées sur les objets. Ici, elles sont peintes par le code, point par point, avec un peu de hasard (circuit/affichage/textures.js).
• Les instances : pour 260 arbres, on envoie la forme d'un seul arbre à la carte graphique, puis juste leurs positions.

🔎 Missions d'exploration

• Dans « sous le capot », regarde « triangles dessinés » : combien maintenant ? (avant : environ 24 000)
• Fais le tour d'une voiture au garage : vois-tu le ciel se refléter sur la peinture ?
• Aux rayons X (X), regarde de quels triangles est faite une voiture arrondie.

❓ Quiz

🏙️ Étape 39 : la ville ✅ livrée · à valider

Une vraie ville : immeubles, feux rouges, voitures qui circulent, parcs… et ton personnage qui descend de la voiture pour en prendre une autre ! ▶ le circuit 3D

🗺️ Une ville en damier

La ville est une grille : 6 rues dans un sens, 6 dans l'autre, et 36 carrefours. Pour trouver où est la rue numéro k, une seule formule : position = début + k × (pâté + rue). Entre les rues, des pâtés de maisons, coupés en 4 par une ruelle.

🚦 Le code de la route de l'ordinateur

Chaque voiture de la circulation va d'un carrefour au carrefour voisin, sur la voie de droite. Au carrefour, elle tire au hasard : tout droit, à gauche ou à droite. Pour tourner en douceur, elle suit une courbe de Bézier : un départ, une arrivée, et un point au coin qui « tire » la courbe. Avant d'avancer, elle regarde : le feu est rouge ? quelqu'un est juste devant ? Alors elle freine.

🚶 Le personnage

Ton personnage est comme une toute petite voiture : une position, un angle, une vitesse. Il se cogne aux immeubles avec les mêmes calculs que les voitures. Ses jambes et ses bras se balancent comme un pendule (avec sin) quand il marche.

🔎 Missions d'exploration

• Dans l'état en direct, regarde « feux de ce carrefour » quand tu attends au feu.
• Aux rayons X, chaque voiture de la circulation a un trait vers le carrefour où elle va (rouge si elle attend).
• Mets-toi à pied devant une voiture de la circulation : que fait-elle ?
• Trouve le monster truck garé quelque part en ville !

❓ Quiz

🛣️ Étape 40 : le grand parcours ✅ livrée · à valider

Un circuit comme un Carrera géant : des montées, des descentes, des ponts, une grande rampe, une plateforme à trous, des nitros partout et un énorme saut ! Et de nouveaux véhicules dans tous les garages. ▶ le circuit 3D

〰️ Une route faite avec une liste de points

La route est écrite dans config.js comme une liste de 30 points : [x, z, hauteur]. Pour passer d'un point à l'autre sans faire d'angle, le jeu trace une courbe (une « spline de Catmull-Rom ») qui passe par tous les points, comme un fil souple tendu entre des clous. Puis il la découpe en morceaux de 3 m : environ 640 petits rectangles de route, les tronçons.

🏢 Une route à plusieurs étages

Sous un pont, il y a deux sols : la route d'en haut et la route d'en bas. Le jeu garde le sol le plus haut qui soit sous la voiture (pas plus de 0,7 m au-dessus d'elle). Si la voiture est sur le pont, c'est le pont ; si elle est en bas, le pont est trop haut : elle passe dessous. Et s'il n'y a plus rien sous les roues (le bord, un trou, le creux) : la gravité la fait tomber.

🔥 Le nitro

Une plaque de nitro donne 2,5 secondes de poussée : la vitesse max est multipliée par 1,5 (sans gagner plus de 58 km/h, depuis l'étape 41), et la voiture accélère même sans appuyer. Après, elle ralentit doucement jusqu'à sa vitesse normale. Pour sauter le creux de 50 m, il faut aller vite : le saut est une parabole, et plus on va vite, plus on va loin.

🔎 Missions d'exploration

• Aux rayons X, en l'air : une courbe orange montre où ta voiture va passer. C'est la parabole !
• Dans l'état en direct, regarde « sous la voiture » quand tu passes sous le pont, puis dessus.
• Essaie de sauter le creux SANS nitro : jusqu'où vas-tu ? (regarde « dernier saut »).
• Dans config.js, trouve nitro : que se passerait-il avec facteur: 2 ?
• Achète la police, et allume la sirène en ville (H) : regarde le journal.

❓ Quiz

☁️ Étape 41 : les méga-rampes ✅ livrée · à valider

Une piste en bois toute seule dans le ciel, avec des bords relevés comme un toboggan, des motos à doubler, de grands sauts, une barre de dégâts et un chrono ! ▶ le circuit 3D

🛷 Des bords relevés

La coupe de la piste ressemble à un U très plat : le milieu est plat, et les bords montent en quart de cercle, comme dans un skatepark. Pour le jeu, c'est simple : si ta voiture va trop loin sur le côté, on la remet sur la piste et on la tourne un peu dans le bon sens. Elle glisse contre le bord au lieu de rebondir. Seul un choc très fort compte comme un choc.

🚩 Les points de contrôle

Le jeu retient le plus loin où tu es allé (en mètres depuis le départ). Dès que tu dépasses un drapeau, il devient « le dernier drapeau ». Si ta hauteur descend 45 m sous lui, tu es perdu dans les nuages : le jeu te remet sur ce drapeau.

💥 La barre de dégâts

Chaque choc a une vitesse (en m/s). Les dégâts augmentent de vitesse du choc × 3 %. Un choc à 10 m/s, c'est donc 30 % ! À 100 %, ta voiture est cassée.

🔎 Missions d'exploration

• Aux rayons X, regarde la longueur de chaque saut et la vitesse de chaque moto.
• Dans l'état en direct, regarde « progression » et « dernier drapeau » pendant que tu roules.
• Dans la base de données, trouve recordRampes après ta première arrivée.
• Essaie le saut n° 3 sans nitro : que se passe-t-il ?

❓ Quiz

🏝️ Étape 42 : la ville géante, ses ponts, ses aéroports et ses magasins ✅ livrée · à valider

La ville est maintenant sur une île, au milieu de la mer ! Deux grands ponts mènent à des îles avec un aéroport, des motos roulent partout, et ton personnage peut faire les magasins. ▶ le circuit 3D

🗺️ Un plan d'architecte qu'on pose sur la carte

Les 3 aéroports sont pareils. Le jeu dessine UN plan, avec ses propres coordonnées : u le long de la piste, w en travers. Pour chaque île, il tourne le plan et le pose au bon endroit : x = centre + cos × u − sin × w. C'est ce qu'on appelle un « repère local ». Avec la même formule, la piste de l'aéroport du Nord est tournée d'un quart de tour.

🌉 Un pont qui monte en arc

La hauteur de la route sur le pont, c'est 16 × sin(π × u ÷ 500) : 0 m au début, 16 m au milieu (u = 250 m), 0 m à la fin. La fonction sinus dessine exactement une bosse bien ronde.

🌊 Pas de voiture dans la mer

À chaque pas de calcul, le jeu regarde si ta voiture est sur la terre (une île ou un pont). Si le pas qu'elle vient de faire mène dans l'eau, il l'annule : la voiture revient où elle était, et elle rebondit un peu.

🔎 Missions d'exploration

• Dans l'état en direct, regarde « hauteur du sol » quand tu traverses le pont : elle monte jusqu'à 16 m.
• Aux rayons X, des ronds violets montrent la porte de chaque magasin, et des traits orange le bord des îles.
• Dans la base de données, trouve objets après ton premier achat.
• Trouve les 7 magasins grâce aux carrés violets de la mini-carte.
• Dans config.js, trouve archipel : que se passerait-il avec hauteur: 40 pour un pont ?

❓ Quiz

💼 Étape 43 : les petits boulots ✅ livrée · à valider

Ton personnage peut travailler pour gagner des pièces : livreur de pizzas, chauffeur de taxi, vendeur au magasin et éboueur ! ▶ le circuit 3D

🤖 Une machine à états

Chaque boulot est dans une « étape ». Pour le taxi : chercher (aller au client) → il monte → deposer (l'emmener) → il paie → chercher le suivant… Un événement (« je suis arrêté à côté du client ») fait passer à l'étape suivante. C'est la même idée que les phases de la course (garage → décompte → course → arrivée).

🧭 La flèche qui montre le chemin

Le jeu calcule l'angle vers la cible avec atan2, puis enlève l'angle de ta voiture. Si le résultat vaut 0, la cible est droit devant : la flèche pointe vers le haut. C'est exactement le calcul du pilote de la voiture bleue (étape 34) !

🔎 Missions d'exploration

• Dans l'état en direct, regarde « étape » pendant le boulot de taxi : elle passe de « chercher » à « deposer ».
• Aux rayons X, un trait jaune relie ta voiture à la cible.
• Dans la base de données, trouve boulots et piecesGagneesAuTravail.
• Emmène un client du taxi à l'aéroport : combien gagnes-tu ? Et avec le vrai taxi ?
• Dans config.js, trouve boulots : que se passerait-il avec temps: 20 pour les pizzas ?

❓ Quiz

✈️ Étape 44 : les avions, l'hélico et l'avion de chasse ✅ livrée · à valider

Tous les appareils des aéroports se pilotent ! Le petit avion, l'avion de ligne (d'un aéroport à l'autre), l'hélicoptère… et l'avion de chasse avec sa mitrailleuse et ses missiles. ▶ le circuit 3D

🪶 Pourquoi un avion vole (et pourquoi il décroche)

Les ailes d'un avion ne le portent que s'il va assez vite : l'air qui passe dessus et dessous le pousse vers le haut. C'est la portance. Dans le jeu : sous 75 % de la vitesse de décollage, la portance disparaît. L'avion décroche, et la gravité le fait tomber. Il faut remettre les gaz pour qu'il vole de nouveau. L'hélico, lui, a un rotor qui souffle vers le bas : il peut rester immobile en l'air.

🚀 Un missile qui suit sa cible

Au départ, le missile choisit la cible la plus proche devant le nez de l'avion (dans un « cône »). Ensuite, à chaque pas de calcul, il tourne un petit peu vers elle, sans pouvoir tourner trop vite. C'est le même principe que la voiture bleue qui vise sa « carotte » à l'étape 34 !

🔎 Missions d'exploration

• Dans l'état en direct, regarde « tangage, roulis » quand tu vires et montes.
• Ralentis en l'air jusqu'au décrochage : que se passe-t-il ? Comment t'en sortir ?
• Aux rayons X, chaque missile a un trait rouge vers sa cible.
• Dans la base de données, trouve vols.
• Dans config.js, trouve vehiculesAir : change la montee de l'hélico.

❓ Quiz

🚓 Étape 45 : la police aux 5 étoiles ✅ livrée · à valider

Emboutis une voiture et la police arrive ! Plus le choc est fort, plus il y a d'étoiles. À 5 étoiles, l'hélico de la police te suit avec son projecteur… Sème-les ou c'est le commissariat ! ▶ le circuit 3D

👀 Comment un policier « voit »

Le jeu trace une ligne droite entre le policier et toi, et regarde un point tous les 6 m sur cette ligne. Si un de ces points est dans un immeuble, le policier ne te voit pas. S'il est à plus de 150 m, non plus. L'hélico, lui, voit par-dessus les immeubles !

🧭 Comment la police te trouve

Si elle te voit, elle fonce droit sur toi. Sinon, elle va de carrefour en carrefour. À chaque carrefour, elle choisit la rue qui la rapproche le plus de toi. C'est une recherche gourmande : on prend toujours ce qui semble le meilleur tout de suite. Ça ne marche pas toujours (une impasse…), mais c'est simple et rapide.

⭐ Une jauge qui monte et qui descend

Les étoiles montent d'un coup (une bêtise) et descendent lentement (une toutes les 5 s quand tu es caché). Beaucoup de jeux font comme ça : la « jauge de recherche ».

🔎 Missions d'exploration

• Aux rayons X : un cercle de 150 m autour de toi (rouge si on te voit), et des traits bleus vers là où va chaque voiture de police.
• Dans l'état en direct, regarde « on te voit ? » pendant que tu te caches.
• Avec l'avion de chasse, abats l'hélico de la police (5 étoiles !).
• Dans config.js, trouve police et ses seuils.
• Dans la base de données, trouve police : combien de fois as-tu été attrapé ?

❓ Quiz

🔧 Étape 46 : la voiture ne tremble plus ✅ corrigée · à valider

Tu as trouvé un bug : la voiture tremblait dans les montées et les descentes. Voici l'enquête ! ▶ le circuit 3D

🕵️ L'enquête

Pour trouver le bug, Claude a mesuré : à chaque pas de calcul (120 par seconde), il a noté la pente de la voiture et additionné tous les changements. C'est la « secousse ». Sur la grande rampe, elle valait 15,5. Sur un pont de la ville, seulement 0,2. Le coupable était donc sur les routes en tronçons de 3 m.

Les tronçons se chevauchent un peu (60 cm), pour qu'il n'y ait pas de fente dans les virages. Mais dans ce chevauchement, le jeu croyait que la route était plate, puis elle remontait d'un coup. Ça faisait une petite marche tous les 3 m : à 110 km/h, ça fait 10 marches par seconde. La voiture tremblait ! Maintenant, la pente continue dans le chevauchement, et la secousse ne vaut plus que 0,5.

En plus, la voiture penche maintenant en douceur : à chaque image, elle rattrape seulement un quart de l'écart avec la bonne pente, comme une vraie suspension.

❓ Quiz

🌦️ Étape 47 : la météo et le ciel ✅ livrée · à valider

Soleil, vent, brouillard, pluie, orage, neige, blizzard : la météo change toute seule sur toutes les cartes, et elle change la conduite ! ▶ le circuit 3D

☁️ Des nuages calculés pixel par pixel

Les nuages ne sont pas des images : la carte graphique les calcule pour chaque pixel du ciel. Elle additionne des « vagues de hasard » de plus en plus petites : une grosse vague pour la forme du nuage, puis des petites pour les détails. C'est le bruit fractal. Les montagnes et les nuages des films sont souvent faits comme ça !

🚗 Pourquoi la voiture glisse

Sur le sec, la voiture va toujours là où pointe son nez. Sur la neige, elle a deux directions : celle de son nez, et celle où elle va vraiment (son déplacement). À chaque pas de calcul, le déplacement rattrape un petit morceau de l'écart avec le nez. Plus l'adhérence est faible, plus le morceau est petit. La voiture « dérape » : elle continue un peu tout droit quand tu tournes.

⚡ L'éclair, puis le tonnerre

La lumière de l'éclair arrive presque tout de suite. Le bruit du tonnerre, lui, va à 340 m/s. Si l'éclair est à 1 020 m, le tonnerre arrive 3 secondes plus tard. Le jeu fait exactement ça !

🔎 Missions d'exploration

• Aux rayons X : la flèche bleu clair du vent au-dessus de toi, et une flèche orange quand la voiture dérape (là où elle va vraiment).
• Dans l'état en direct, regarde « adhérence » et « dérapage » dans un virage sous la neige.
• Dans le journal, compte les secondes entre l'éclair et le tonnerre.
• Dans config.js, trouve meteo : change l'adherence de la neige.

❓ Quiz

🌿 Étape 48 : la nature et l'eau ✅ livrée · à valider

De l'herbe en touffes qui plie au vent, des fleurs, des rochers, 3 espèces d'arbres, et une mer et des étangs qui ondulent. ▶ le circuit 3D

🌱 Des milliers de plantes, sans ralentir

Une carte a environ 14 000 touffes d'herbe. Dessiner 14 000 objets un par un serait très lent. L'astuce : les instances. On envoie une touffe à la carte graphique, puis une liste de places. Et l'herbe est rangée par parcelles de 80 m : on ne dessine que celles à moins de 230 m de la caméra.

🌊 La carte des pentes

L'eau est toute plate ! Mais une image spéciale dit, pour chaque point, dans quel sens l'eau « penche ». La lumière en tient compte : on croit voir des vagues. On fait glisser l'image un peu à chaque image : les vagues bougent.

🔎 Missions d'exploration

• Dans l'état en direct, section « La nature » : combien de brins d'herbe, de fleurs, de rochers, d'arbres sur chaque carte ?
• Roule loin et regarde « parcelles d'herbe dessinées » changer.
• Dans circuit/config.js, trouve nature : mets flexion: 0.1 et regarde l'herbe dans le vent.
• Toujours dans nature, change especes pour faire une forêt de sapins.

❓ Quiz

🏎️ Étape 49 : les vraies voitures ✅ livrée · à valider

Une vraie Bugatti Chiron, une vraie Porsche 911, une vraie Lamborghini Aventador, une Honda NSX, et des voitures de tous les jours plus réalistes. Le monster truck rebondit sur ses ressorts ! ▶ le circuit 3D

✏️ Comment on dessine une vraie voiture

1. On dessine son profil, vu de côté. 2. On le « pousse » sur toute la largeur, comme de la pâte à modeler dans un emporte-pièce. 3. On le galbe : chaque point de la carrosserie est rapproché du milieu, plus près du nez (vu de dessus, les coins deviennent ronds) et plus en haut (les flancs rentrent vers le toit). 4. On ajoute ce qui la rend reconnaissable : les phares ronds de la 911, le Y de la Lamborghini, le C de la Bugatti.

🌀 La loi du ressort

Plus on écrase un ressort, plus il pousse fort. Quand le monster truck atterrit, les roues s'arrêtent d'un coup, mais la caisse est lourde : elle continue à descendre et écrase les ressorts. Ils la repoussent, elle remonte trop haut, redescend… L'amortisseur freine ce mouvement, sinon elle rebondirait pour toujours.

🔎 Missions d'exploration

• Saute avec le monster truck et regarde « ressorts » dans l'état en direct : de combien de cm s'écrasent-ils ?
• Dans circuit/config.js, trouve ressorts : mets amortissement: 1. Que se passe-t-il ?
• Toujours dans config.js, change les couleurs de la Chiron pour la peindre comme tu veux.
• Dans affichage/voitures-reelles.js, cherche les mots « phares RONDS » : c'est là qu'on dessine les yeux de la 911.

❓ Quiz

🏙️ Étape 50 : les routes et la ville ✅ livrée · à valider

Du goudron fissuré, des traces de pneus, des trottoirs en dalles, des façades détaillées, des fenêtres qui s'allument quand il fait sombre, des panneaux et le nom des rues. ▶ le circuit 3D

💡 La lumière « émise »

Une façade a DEUX images : la façade normale, et une image toute noire sauf les fenêtres allumées. La deuxième est une lumière émise : elle brille toute seule, même sans soleil. Le jeu règle sa force avec la météo : lumière = 0,05 + 1,3 × (1 − soleil). Plein soleil → presque rien ; orage → les fenêtres brillent.

🪧 Sur quelle rue es-tu ?

Les rues sont rangées comme les lignes d'un cahier, tous les 88 m. Pour savoir sur laquelle tu es, le jeu divise ta position par 88 et arrondit : il trouve le numéro de la rue la plus proche. Si tu es à moins de 8 m de son milieu, tu es dessus ! Si tu es sur deux rues en même temps, c'est un carrefour.

🔎 Missions d'exploration

• Sous le capot, regarde « fenêtres allumées » changer quand la météo change.
• Dans circuit/config.js, trouve nomsRues et donne ton nom à une rue.
• Dans config.js, change limiteVitesse : que devient l'écriture des panneaux ?
• Fais le tour d'un pâté de maisons et compte les noms de rue dans le journal.

❓ Quiz

🏎️ Étape 51 : les voitures ultra réalistes ✅ livrée · à valider

La Bugatti Chiron, la Porsche 911, la Lamborghini Aventador, la Honda NSX, la Peugeot 508, la Mercedes Vito et la Kawasaki Ninja, refaites avec leurs vraies mesures, des courbes partout et des roues comme dans la réalité. ▶ le circuit 3D

🛶 Construire une voiture comme une coque de bateau

Avant, on dessinait le profil de la voiture, puis on le « poussait » sur toute la largeur : la voiture restait un peu « boîte ». Maintenant, on la décrit par une dizaine de tranches, vues de face (comme si on coupait la voiture en rondelles) : le bas, les épaules, le dessus, la largeur. Le jeu invente une tranche tous les 4 cm entre elles, en suivant une courbe douce, puis il les relie par des milliers de petits triangles. Les vitres font partie de la peau : chaque triangle est rangé « peinture » ou « vitre », selon sa place.

🛞 Une vraie roue

Le pneu est « tourné » (comme un vase sur un tour de potier), avec des rainures et des lettres moulées. La jante est creuse, avec ses rayons, 5 écrous et un cache. Derrière, le disque percé et l'étrier, la pince qui serre le disque pour freiner. Le disque tourne avec la roue, l'étrier non !

🔎 Missions d'exploration

• Dans circuit/affichage/voitures-marques.js, trouve la Porsche 911 et compte ses tranches (les lignes { x: …, yb: … }).
• Dans circuit/config.js, trouve ressorts : mets roulis: 0.02 et prends un virage.
• Dans affichage/roues.js, trouve les styles de jante (« turbine », « y », « fins »…) : lequel a quelle voiture ?

❓ Quiz

🏁 Étape 53 : le drift, le crissement et la fumée ✅ livrée · à valider

À fond dans un virage, la voiture part en drift : elle glisse en biais, les pneus crissent, fument et laissent des traces noires. Une sportive qui démarre à fond fait patiner ses pneus. ▶ le circuit 3D

(L'étape 52, les vraies maquettes 3D, est mise de côté : elle demandait un compte Sketchfab.)

🦀 Pourquoi la voiture avance « en crabe »

Depuis l'étape 47, la voiture a deux directions : celle de son nez et celle où elle va vraiment. D'habitude, la deuxième rattrape la première 14 fois par seconde : on ne voit rien. En drift, elle ne la rattrape plus que 4,5 fois par seconde, et le nez tourne 1,3 fois plus vite. Les deux directions s'écartent : environ 30°. C'est l'angle de drift !

💨 Les particules

La fumée, ce sont 220 petits nuages qu'on réutilise. Chacun naît derrière une roue, monte, grossit et devient transparent, puis « meurt » au bout de 1,8 s : il est alors prêt à renaître ailleurs.

🔎 Missions d'exploration

• Dans circuit/config.js, trouve drift : mets entree: 0.4 pour drifter plus facilement.
• Toujours là, change adherence : à 2, quel angle de drift as-tu ?
• Dans le journal, regarde la durée et l'angle maximum de ton meilleur drift.

❓ Quiz

🏜️ Étape 54 : le rallye-raid, un nouveau jeu ✅ livrée · à valider

Un désert comme au Dakar : des dunes, de la boue, des cailloux, une rivière avec un gué, et 7 véhicules de rallye-raid (4x4, buggys, motos et camion). Balade libre ! ▶ le rallye-raid

🧭 Chaque terrain a sa fiche

Le jeu ne « voit » pas le sable : à chaque pas, il demande à logique/terrain.js « qu'y a-t-il en (x, z) ? ». La réponse est un nom ("sable", "boue"…), et ce nom ouvre une fiche dans config.js :

L'adhérence, c'est la force avec laquelle les pneus « s'accrochent » : faible, le véhicule glisse dans les virages. Le frottement freine tout le temps. Et chaque véhicule a sa motricité : le camion (1,3) passe mieux dans la boue que les motos (0,9).

⛰️ Le relief et les sauts

Le sol est fait avec du « bruit » : une formule qui donne une hauteur un peu au hasard mais toujours la même au même endroit (grâce à la graine 2017). On additionne plusieurs bruits, des grands pour les collines et des petits pour les bosses. Quand le sol descend plus vite que la gravité ne peut tirer le véhicule vers le bas, il décolle : il est en l'air jusqu'à toucher le sol. Le jeu mesure la longueur du saut.

🔎 Missions d'exploration

• Dans raid/config.js, trouve boue et mets vitesse: 1 : la boue te ralentit-elle encore ?
• Change graine: 2017 en graine: 7 : le désert entier change de forme !
• Sous le capot, regarde « pente devant » quand tu montes une dune, et la vitesse qui baisse.
• Quel véhicule fait le plus grand saut ? Regarde ton record en haut à gauche.

❓ Quiz

🏙️ Étape 55 : voitures, routes et immeubles très réalistes ✅ livrée · à valider

Les voitures ont de vrais phares à LED, des feux, des plaques et une ombre douce ; la Rouge devient une Peugeot 208. La ville a des boutiques, des balcons, des corniches et des toits pleins de machines. ▶ le circuit 3D

💡 Pourquoi une voiture a l'air « vraie »

Ton cerveau reconnaît une vraie voiture grâce à de petits détails : des phares avec un verre et des lampes dedans (pas une tache blanche), une plaque, le nom de la marque, une vitre qui penche vers l'intérieur, et surtout l'ombre de contact : juste sous la voiture, c'est tout noir, parce que la lumière du ciel n'arrive pas. Sans elle, une voiture a l'air de flotter.

🔩 Recoller les pièces (pour que le jeu reste rapide)

Une voiture a maintenant environ 170 pièces. Pour la carte graphique, chaque pièce est un « dessin » à faire. Alors, une fois la voiture construite, on recolle toutes les pièces de la même matière (tout le chrome ensemble, toutes les LED ensemble…). La voiture a la même allure, mais elle n'a plus qu'une cinquantaine de pièces. Résultat : la ville se dessine en 1 536 fois par image, alors qu'avant c'était 1 969, et pourtant il y a beaucoup plus de détails !

🏢 Le relief des façades

Avant, un immeuble était une boîte avec une image de fenêtres collée dessus : tout plat. Maintenant, on ajoute de vrais morceaux qui dépassent du mur : le soleil fait des ombres dessous, et ça change tout. Il y en a plus de 5 000, mais ce sont des « instances » : une seule forme de boîte, et une liste de places et de tailles.

🔎 Missions d'exploration

• Sous le capot, regarde « dessin de la voiture » : combien de pièces a ta voiture ? Combien brillent ?
• Toujours sous le capot, regarde « objets envoyés à la carte graphique » en ville.
• Dans circuit/config.js, trouve reliefs et mets boutique: 16 : les boutiques deviennent deux fois plus larges.
• Lis la plaque d'immatriculation de la Rouge !

❓ Quiz

🐢 Étape 56 : le circuit ne rame plus ✅ livrée · à valider

Tu as dit : « ça rame, ça saccade ». On a mené l'enquête, trouvé le coupable (trop d'ordres de dessin) et réparé. ▶ le circuit 3D

🕵️ L'enquête

Un bon développeur ne devine pas : il mesure. On a chronométré chaque morceau du jeu. Les règles : 1 ms par image. Le tableau de bord : moins de 1 ms. Le dessin 3D en ville : 256 ms ! Le coupable, c'était le nombre d'ordres de dessin : à chaque image, le jeu disait 1 535 fois à la carte graphique « dessine ça ». Chaque ordre prend un peu de temps, même pour une toute petite pièce.

🧩 Les réparations

• Recoller : toutes les pièces d'une voiture qui ont la même matière deviennent une seule pièce. Pareil pour tous les immeubles d'un même style.
• Les instances : les 102 pièces d'or sont une seule forme, dessinée 102 fois d'un coup.
• Ne pas dessiner ce qu'on ne voit pas : en ville, les voitures à plus de 170 m sont cachées par les immeubles.
• La qualité automatique : si une image met plus de 30 ms, le jeu peint moins de pixels. C'est ce que font les vrais jeux vidéo.

🔎 Missions d'exploration

• Sous le capot, regarde combien de millisecondes met une image sur ton ordinateur.
• Dans circuit/config.js, trouve qualite et mets distanceVehiculesVille: 60 : que vois-tu au bout des rues ?

❓ Quiz

🚗 Étape 57 : des voitures plus grandes, plus vraies, et plus dorées ✅ livrée · à valider

Les voitures grandissent de 15 %, la moto de 50 %. Les phares et les rétros rétrécissent, et la peinture n'est plus dorée. ▶ le circuit 3D

✨ Pourquoi les voitures avaient l'air dorées

Une surface en métal reflète la lumière avec sa propre couleur, une surface en peinture la reflète blanche. Notre peinture était réglée à 55 % de métal : elle prenait la couleur chaude du soleil (un peu orange) et avait l'air dorée. Une vraie peinture de voiture, c'est une couleur sous un vernis transparent : presque pas de métal. On est passé à 12 %.

📏 Agrandir sans tout refaire

Chaque voiture est un groupe de pièces. Pour l'agrandir, on ne refait pas chaque pièce : on dit au groupe « × 1,15 », et toutes les pièces grandissent ensemble. Comme la voiture est posée au sol (en y = 0), elle grandit vers le haut et reste sur la route.

🔎 Missions d'exploration

• Dans circuit/config.js, trouve peinture et mets metal: 0.9 : tes voitures redeviennent dorées !
• Toujours là, change taille : moto: 2. Elle est énorme !

❓ Quiz

🏎️ Étape 58 : la course à 12 et le métier de policier ✅ livrée · à valider

Sur le circuit, tu cours contre 11 adversaires qui ont tous la même voiture que toi, chacun de sa couleur. En ville, tu peux devenir policier et poursuivre des voitures en fuite. ▶ le circuit 3D

🏁 Qui est 1er ?

Pour chaque voiture, le jeu calcule sa progression : combien de mètres elle a parcourus depuis le départ, en comptant les tours (tour × 1 474 m + où elle est sur le tour). Ta place, c'est 1 + le nombre d'adversaires qui ont une plus grande progression que toi. Simple !

🤖 Comment pensent les 11 pilotes

• La carotte : chacun vise un point 18 m devant lui, sur sa voie (intérieur, milieu ou extérieur).
• Doubler : si une voiture lui bouche sa voie juste devant, il prend la voie libre la plus proche.
• Les virages : il regarde 45 m devant ; si la route tourne trop pour sa vitesse, il lève le pied.
• L'allure : chacun a son nombre entre 0,85 et 0,97, qui multiplie la vitesse max. Le plus rapide va à 97 % : avec la même voiture, tu peux le battre… si tu ne fais aucune erreur !

🚓 La voiture en fuite

Elle va aussi vite que toi en ligne droite. Mais à chaque carrefour où elle tourne, elle doit freiner jusqu'à 43 km/h : c'est là que tu gagnes du terrain. Pour freiner juste ce qu'il faut, elle utilise une formule de physique : la vitesse qu'on peut avoir à une distance d avant le virage, c'est √(43² + 2 × freinage × d). Et pour s'échapper, 3 fois sur 4, elle tourne du côté qui l'éloigne le plus de toi.

🔎 Missions d'exploration

• Dans circuit/config.js, trouve allure et mets [0.6, 0.7] : tu gagnes facilement !
• Toujours là, dans course, change placeJoueur: 0 : tu pars en pole position.
• Dans policier, mets ruse: 0 : la voiture en fuite tourne au hasard. Est-ce plus facile ?

❓ Quiz

🌦️ Étape 59 : des voitures encore plus vraies, et choisir sa météo ✅ livrée · à valider

On voit le conducteur à travers les vitres, les ailes sont bombées, la peinture reflète l'horizon. Et avant de rouler, tu choisis ta météo. ▶ le circuit 3D

🪞 Pourquoi les reflets changent tout

Une voiture brillante est un miroir un peu flou. Si elle ne reflète qu'un ciel tout gris, elle a l'air en plastique. Maintenant, on fabrique un petit monde rien que pour les reflets : le ciel en haut, une ligne d'horizon, le sol sombre en bas, des immeubles au loin et le soleil. Three.js le transforme en « carte des reflets ». Résultat : le haut des portières est clair (le ciel), le bas est sombre (le sol), et on voit la forme de la voiture.

🔔 La cloche des ailes

Au-dessus de chaque roue, la carrosserie gonfle de 4,5 cm. Pour que ce soit doux, on utilise une courbe en forme de cloche : e^{−(écart ÷ largeur)²}. Au milieu de la roue, ça vaut 1 (tout le gonflement) ; en s'éloignant, ça descend doucement vers 0.

🔎 Missions d'exploration

• Dans circuit/config.js, mets vitres: { opacite: 1 } : les vitres redeviennent noires. Laquelle tu préfères ?
• Mets formes: { ailes: 0.15 } : des ailes énormes, comme un monster truck !
• Dans meteo.choix, ajoute "brouillard" : un 7e choix apparaît.

❓ Quiz

🛡️ Étape 60 : la bataille de tanks, un nouveau jeu ✅ livrée · à valider

Toi et 3 alliés contre 4 tanks ennemis, dans une campagne avec un village en ruines. Avec un Leclerc, un Abrams ou un Leopard 2. ▶ les tanks

🔄 Deux machines en une

Un tank, c'est la caisse (avec les chenilles) et la tourelle (avec le canon), qui tournent chacune de leur côté. Le jeu garde deux angles : celui de la caisse, et celui de la tourelle par rapport à la caisse. L'angle du canon dans le monde, c'est la somme des deux. Pour tourner sur place, une chenille avance et l'autre recule : regarde « chenilles » sous le capot.

🎯 Pourquoi l'obus monte un peu

Un obus retombe en volant (la gravité). Pour toucher loin, il faut donc tirer un peu vers le haut. La visée assistée calcule l'angle juste : ½ × arcsin(gravité × distance ÷ vitesse²). Plus la cible est loin, plus le canon monte.

🤖 Le cerveau des 7 autres tanks

• Toutes les 4 s, il choisit sa cible : l'ennemi le plus proche (de préférence celui qu'il voit).
• Il roule jusqu'à 90 m d'elle, en se faisant repousser par les maisons, les arbres et les autres tanks, comme des aimants.
• Il tire quand son canon est presque aligné et qu'il VOIT sa cible (aucune maison ni colline entre les deux).
• S'il ne la voit plus depuis 3 s, il la contourne ; touché, il fait un écart.

🔎 Missions d'exploration

• Dans tanks/config.js, mets vie: 1 : un seul obus suffit !
• Mets ennemis: 8 : 8 tanks rouges contre vous.
• Mets gravite: 20 dans obus : regarde l'obus retomber beaucoup plus vite (et le canon monter plus haut).

❓ Quiz

🪖 Étape 61 : sortir du tank, les soldats, le 4x4, l'hélico et l'avion ✅ livrée · à valider

Tu peux maintenant sortir de ton tank et te battre à pied, au milieu de 24 soldats, ou prendre un engin garé dans ton camp. ▶ les tanks

🎭 Un seul toi, plusieurs « modes »

Le jeu garde une petite fiche, monde.toi, qui dit où tu es : char, pied, jeep, helico, avion ou drone. Les touches sont les mêmes partout, mais elles sont envoyées seulement à ce que tu conduis : ↑ fait avancer le tank, ou marcher le soldat, ou piquer l'avion. Quand tu es dans un engin, ton soldat est « assis dedans » : il suit l'engin et les balles ne peuvent pas le toucher. Regarde « mode » sous le capot.

🔫 La balle qui ne vole pas

Une balle va beaucoup trop vite pour qu'on la voie voler. Alors le jeu ne la fait pas voler : au moment du tir, il cherche l'ennemi le plus proche dans un petit cône devant l'arme, regarde s'il y a un mur entre les deux, puis tire au sort (le pistolet touche plus souvent que la mitrailleuse, et c'est plus dur de loin). On appelle ça une balle « instantanée ». La roquette, la bombe et le missile, eux, volent vraiment (comme l'obus).

💣 Pourquoi lâcher la bombe AVANT d'être au-dessus

La bombe garde la vitesse de l'hélico en tombant. Elle met √(2 × hauteur ÷ 9,8) secondes pour arriver au sol, et pendant ce temps elle continue d'avancer. La croix rouge fait ce calcul pour toi : c'est là qu'elle tombera.

🤖 Le cerveau des 24 soldats

• Ils ne réfléchissent que 4 fois par seconde (sinon, 24 soldats qui regardent sans arrêt s'il y a un mur, c'est trop de calculs !).
• S'ils voient un ennemi à moins de 140 m, ils se tournent et tirent ; sinon, ils avancent vers le village, puis vers le camp ennemi, chacun dans son couloir.
• Les 2 soldats au lance-roquettes de chaque équipe visent les tanks (et ton 4x4).

🔎 Missions d'exploration

• Dans tanks/config.js, mets parEquipe: 30 dans soldats : une vraie armée !
• Mets munitions: 30 pour l'hélico : un tapis de bombes.
• Mets parachute: 1 dans engins : ton parachute descend tout doucement.
• Mets precision: 1 au pistolet : il ne rate plus jamais de près.

❓ Quiz

🌀 Étape 62 : des bateaux et des portails ✅ livrée · à valider

Un lac avec ta vedette de combat et 2 patrouilleurs ennemis, et 2 paires de portails pour traverser la carte d'un coup. ▶ les tanks

🥚 Le lac, un cercle étiré

Le lac est une ellipse : un cercle étiré, 80 m de rayon dans un sens et 185 m dans l'autre. Pour savoir si un point est dans l'eau, le jeu calcule un seul nombre, dl = √((dx ÷ 80)² + (dz ÷ 185)²), où dx et dz sont l'écart au centre du lac. Si dl est plus petit que 1, on est dans l'eau ; égal à 1, sur la rive. Un tank qui entre dans l'eau est ramené sur la rive ; un bateau qui va trop près du bord (dl plus grand que 0,96) s'échoue. Regarde « toi et le lac » sous le capot en marchant vers l'eau.

🌀 Comment marche un portail

• Chaque portail connaît son jumeau.
• À chaque petit pas, le jeu mesure la distance entre chaque voyageur (tank, soldat, 4x4…) et chaque portail.
• À moins de 2,6 m, il le « téléporte » : il change juste son x et son z, un peu devant le jumeau, dans le même sens.
• Il note l'heure : pendant 2 s, ce voyageur ne peut pas repasser (sinon il ferait des allers-retours sans fin !).

🔎 Missions d'exploration

• Dans tanks/config.js, mets nombre: 6 pour les patrouilleurs ennemis : une vraie flotte !
• Change rayonX: 80 en rayonX: 150 : le lac devient énorme.
• Mets attente: 0 dans portails, puis arrête-toi devant un portail : que se passe-t-il ?
• Change les coordonnées a et b d'une paire pour mettre un portail où tu veux.

❓ Quiz

🐋 Étape 63 : sous-marins, îles, un soldat plus réaliste (et ses bugs corrigés) ✅ livrée · à valider

3 îles sur le lac, ton sous-marin et 2 sous-marins ennemis, et un soldat refait avec un vrai squelette. ▶ les tanks

🦴 Un squelette dans le soldat

Comme dans les vrais jeux, le soldat a un squelette : des articulations (hanches, genoux, épaules, coudes, cou) qui tournent, et chaque morceau du corps est accroché à une articulation. Pour marcher, on balance les hanches et on plie les genoux. Pour tenir le fusil, c'est l'inverse : on sait où doivent aller les mains, et on calcule où mettre les coudes. Ça s'appelle la cinématique inverse. Le bras et l'avant-bras forment un triangle avec la ligne épaule → main ; on connaît ses 3 côtés, donc on peut trouver l'angle à l'épaule.

🎞️ Le bug des petits sauts : l'interpolation

Le jeu calcule 120 pas par seconde, mais ton écran affiche souvent 60 images par seconde (ou 144…), et pas toujours pile au moment d'un pas. Avant, on dessinait le soldat là où il était au dernier pas : parfois un peu en retard, parfois pas, et ça faisait de tout petits sauts. Maintenant, avant chaque pas, chacun note sa position (« avant »). On dessine alors le soldat entre sa position d'avant et celle de maintenant, au bon pourcentage. Regarde « entre deux pas » sous le capot : c'est ce pourcentage.

🫧 Le sous-marin et la torpille

• Sa profondeur va de 0 (à la surface) à 4,5 m. Il ne descend jamais plus bas que le fond moins 1 m : près des rives et des îles, il remonte tout seul.
• Sous l'eau (plus de 1,5 m), les obus explosent à la surface de l'eau avant de l'atteindre. Seule la torpille le touche : elle file sous l'eau à 94 km/h, tourne doucement vers sa cible et remonte quand le fond remonte.
• Les sous-marins ennemis entendent ta vedette et ton sous-marin au sonar : ils n'ont pas besoin de te voir !

🔎 Missions d'exploration

• Dans tanks/config.js, ajoute une île dans iles (un nom, x, z, un rayon, une hauteur).
• Mets sousLEau: 60 pour les sous-marins ennemis : ils restent cachés une minute entière.
• Mets nage: 5 dans soldats : ton soldat nage comme un champion.
• Mets detail: 200 dans soldats : tous les soldats sont dessinés en détail. Regarde le nombre de « dessins par image » sous le capot !

❓ Quiz

✈️ Étape 64 : des avions ennemis et des parachutistes ✅ livrée · à valider

Des chasseurs ennemis qui bombardent et qui t'attaquent dans le ciel, une DCA pour les abattre, et des parachutistes pour les deux camps. ▶ les tanks

🦆 Viser devant l'avion

Un chasseur vole à 378 km/h. Si tu tires là où il EST, ton obus arrive… là où il ÉTAIT ! Il faut viser là où il SERA quand l'obus arrivera, comme un chasseur de canards. La visée assistée calcule : temps = distance ÷ vitesse de l'obus (300 m/s), puis position future = position + vitesse de l'avion × temps. Elle recommence une deuxième fois pour être plus précise, et le petit rond jaune montre ce point. En plus, l'obus de DCA éclate tout seul s'il passe à moins de 9 m d'un avion : c'est une « fusée de proximité ».

💣 Le bombardier aussi calcule

Une bombe garde la vitesse de l'avion. Le chasseur ennemi doit donc la lâcher AVANT d'être au-dessus de sa cible : à une distance égale à sa vitesse × le temps de chute, avec temps de chute = √(2 × hauteur ÷ 9,8). Il vise aussi là où ton tank SERA s'il roule. Regarde « largage dans … m » sous le capot. Pour l'éviter : bouge quand tu vois « 💣 Bombardement ! »

🪂 Les parachutistes

• Toutes les 60 s, un avion de transport par équipe traverse la carte à 110 m de haut.
• Au-dessus de la zone de combat de son camp, il lâche ses 6 parachutistes, un toutes les 0,7 s.
• Ils descendent à 5,5 m/s. Touchés en l'air, ils tombent. Au sol, ils deviennent des soldats comme les autres.

🔎 Missions d'exploration

• Dans tanks/config.js, mets nombre: 5 dans avionsEnnemis : une escadrille !
• Mets toutesLes: 20 dans parachutistes : une pluie de parachutistes.
• Mets fusee: 30 pour le flak : la DCA devient (presque) imbattable.
• Mets erreurBombe: 0 : les bombardiers deviennent très précis (attention à toi !).

❓ Quiz

📢 Étape 65 : donner des ordres en les écrivant ✅ livrée · à valider

Touche T : une barre s'ouvre tout en haut, tu écris ton ordre, et tout ton camp obéit. ▶ les tanks

📖 Comment le jeu « lit » ta phrase

Un ordinateur ne comprend pas le français comme toi. Le jeu fait 3 choses simples :

1. Nettoyer : « Les TANKS, allez au village ! » devient les tanks allez au village (minuscules, sans accents ni ponctuation), puis il coupe la phrase en mots.
2. Chercher chaque mot dans un dictionnaire (ordres.mots dans config.js). « tanks » est un QUI, « allez » est un ORDRE, « village » est un ENDROIT. Les mots qu'il ne connaît pas (« les », « au ») sont simplement ignorés.
3. Ranger : un groupe écrit AVANT l'ordre dit qui obéit (« les soldats, attaquez »). Écrit APRÈS « attaquez » ou « visez », il dit quoi viser (« attaquez les soldats »).

🔤 Deviner les fautes : la distance de Levenshtein

Pour savoir si « vilage » ressemble à « village », le jeu compte combien de lettres il faut ajouter, enlever ou changer pour passer de l'un à l'autre. Ce nombre s'appelle la distance de Levenshtein. « vilage » → « village » : il manque un « l », donc la distance vaut 1. Si la distance est de 1 lettre (ou 2 pour les mots de 7 lettres et plus), il devine. Les tout petits mots (« vous », « les »…) ne sont jamais devinés : sinon « vous » deviendrait « tous » ! Regarde le journal : il écrit les mots devinés.

🎖️ Comment ils obéissent

• Chaque tank et chaque soldat garde son ordre dans une petite fiche : ordre (où aller), ordreCible (quoi viser), feuLibre (tirer ou pas).
• Leur cerveau (logique/ia.js et logique/troupes.js) regarde d'abord ton ordre : « va là » remplace l'endroit où il voulait aller.
• Pour « suivez-moi » et « en ligne », la place de chacun est calculée DERRIÈRE toi, à chaque instant. Chacun a un numéro (son « rang ») : le n° 1 à droite, le n° 2 à gauche, le n° 3 plus à droite…

🔎 Missions d'exploration

• Dans tanks/config.js, ajoute ton propre mot dans attaque (par exemple "bastonnez"). Est-ce qu'ils obéissent ?
• Ajoute un endroit dans lieux : maison: [0, 285], puis écris « allez à la maison ».
• Mets fautes: 0 : le jeu ne devine plus aucune faute. Essaie « atake ».
• Mets ecartTanks: 40 et dis « en ligne » : une très longue ligne de tanks.

❓ Quiz

🔇 Étape 66 : plus de son quand tu quittes le jeu ✅ livrée · à valider

Tu changes d'onglet ou d'application : les tanks et le rallye-raid se taisent, et le son revient quand tu reviens.

👀 Comment le jeu sait que tu es parti

Le navigateur prévient la page. visibilitychange dit « on ne te voit plus » (autre onglet, autre application). blur dit « une autre fenêtre est devant », et focus dit « tu es revenu ». Le jeu écoute ces messages, comme il écoute le clavier. Quand tu pars, il met son synthétiseur en pause (suspend) ; quand tu reviens, il le relance (resume). Le circuit et le premier jeu le faisaient déjà depuis l'étape 29 : les tanks et le rallye avaient été oubliés !

❓ Quiz

💚 Étape 67 : plus de vie, et elle remonte toute seule ✅ livrée · à valider

Ton soldat tient 20 balles, ton tank 16 obus, et ta vie remonte si tu te mets à l'abri 5 secondes. ▶ les tanks

⏱️ Comment la vie remonte

Chaque soldat et chaque tank a un petit chronomètre, touche : le temps depuis la dernière fois qu'il a été touché. Une balle le remet à 0. Quand il dépasse 5 s, le jeu remplit une petite réserve, soin : +2 par seconde pour ton soldat, +0,5 pour ton tank. Chaque fois que la réserve atteint 1, il la vide et te rend une balle (ou un obus). Une nouvelle balle remet le chronomètre à 0, et tout s'arrête. Regarde sous le capot : « soin dans … s ».

🔎 Missions d'exploration

• Dans tanks/config.js, mets attente: 1 dans soins : tu te soignes presque tout de suite.
• Mets soldat: 10 : ton soldat se soigne à toute vitesse.
• Mets vieJoueur: 100 dans soldats : regarde les petits traits de la barre !

❓ Quiz

🌄 Étape 68 : des cartes 3 fois plus grandes, des collines, une rivière et 16 nouvelles voitures ✅ livrée · à valider

Les 5 cartes du circuit 3D sont 3 fois plus grandes. Dans la nouvelle place : des collines, des forêts, une rivière avec des ponts, et de nouvelles voitures dans les garages. ▶ le circuit 3D

📏 L'élastique : agrandir sans casser les sauts

Pour agrandir une route faite de points, on pourrait tout multiplier par 3. Mais alors le creux de 50 m deviendrait un creux de 150 m : impossible à sauter ! L'étireur (circuit/moteur/etirer.js) fait comme un élastique avec des morceaux en bois : les bouts de route normaux sont étirés × 3, mais les tremplins, les vides à sauter et les plateformes gardent leur taille. Ils sont seulement déplacés, avec leurs trous et leurs bosses. Le grand parcours fait une boucle : avec les morceaux en bois, elle ne se referme plus tout à fait. On répartit ce petit écart sur tous les bouts étirés, chacun selon sa longueur.

  avant :  ──route──[tremplin][ vide 50 m ]──route──
  après :  ────────route × 3────────[tremplin][ vide 50 m ]────────route × 3────────

🧩 Le carrelage : le parcours recopié 9 fois

Le parcours de 700 m devient une tuile, recopiée 3 × 3 fois, comme un carrelage. Pour que les coins ne se ressemblent pas, chaque copie est tournée d'un quart de tour de plus. Pour tourner un point (x, z) d'un quart de tour : le nouveau x vaut −z, et le nouveau z vaut x. La direction d'une montée ou d'un tremplin tourne de 90° en même temps.

⛰️ Les collines et la rivière (le sculpteur)

Le sculpteur (circuit/moteur/campagne.js) fabrique le sol :

• Une colline est une « cloche » : haute au milieu, elle descend en douceur jusqu'à son bord. On additionne toutes les cloches.
• Près de la route, le sol est aplati (sinon la route serait enterrée !). Plus on s'éloigne, plus la colline reprend sa hauteur : c'est un fondu, pas une marche.
• La rivière est une ligne qui serpente (des sinus). Dans sa largeur, le sol est creusé ; ses berges sont en pente douce.
• Calculer tout ça à chaque pas de jeu (120 fois par seconde) serait trop lent. Alors on le calcule une seule fois, sur une grille (un point tous les 4 m). Ensuite, pour connaître la hauteur sous la voiture, on lit les 4 points de la grille autour d'elle et on les mélange : c'est une interpolation.
• Un pont est simple : la route reste à sa hauteur, même au-dessus du creux de la rivière. Le jeu garde toujours le sol le plus haut sous la voiture.

🌲 Des milliers d'arbres sans ralentir

Il y a maintenant plus de 1 000 arbres par carte. Les arbres sont rangés par carrés de 700 m, un groupe d'« instances » par carré. La carte graphique ne dessine que les carrés qui sont devant la caméra. Les 500 tirets blancs du circuit sont collés dans une seule forme : un seul dessin au lieu de 500.

🔎 Missions d'exploration

• Dans circuit/config.js, dans agrandir, mets vitesseEau: 1 : dans la rivière, tu avances tout doucement.
• Dans agrandir.grand.collines, mets hauteur: [30, 60] : de vraies montagnes ! (La route reste plate.)
• Mets facteur: 2 dans agrandir : la route du grand parcours et des méga-rampes n'est plus étirée que 2 fois.
• Mets largeur: 60 dans agrandir.riviere : un grand fleuve !
• Ouvre « sous le capot » : regarde « La campagne (étape 68) », le relief sous ta voiture et la distance à la rivière.

❓ Quiz

🚘 Étape 69 : les 16 nouvelles voitures redessinées ✅ livrée · à valider

Les 16 voitures de l'étape 68 sont redessinées une par une, avec leurs vraies mesures : la forme, les détails, les roues et l'intérieur. ▶ le circuit 3D

✏️ Dessiner une voiture comme au bureau d'études

Une voiture est décrite par des tranches, vues de face, du bout de l'arrière au bout du nez (comme les couples d'un bateau). Pour chaque tranche, on donne 7 nombres : où elle est (x), la hauteur du bas, de l'épaule, du dessus, la largeur de la caisse, la largeur au pied de la vitre et la largeur du toit. Le constructeur fait passer une courbe douce par toutes les tranches : c'est la peau.

        toit (wt)
       ┌──────┐
      ╱        ╲   ← la vitre, presque droite
  ───┘          └───  ← l'épaule (le petit rebord)
  │                │  ← la portière
  └────────────────┘

Avant, il n'y avait pas d'épaule : la vitre partait du bord de la caisse jusqu'au toit, et la cabine ressemblait à une pyramide. Avec l'épaule, elle ressemble à une vraie cabine.

🧩 Des pièces moulées

Un phare posé comme une boîte sur le capot, ça se voit. Maintenant, le phare est une pièce moulée : une petite grille de points posés un par un sur la carrosserie (on demande la hauteur de la peau à chaque point). Il épouse donc le coin arrondi du nez. Pareil pour les prises d'air sur les flancs : elles suivent même les ailes qui gonflent au-dessus des roues.

🔎 Missions d'exploration

• Au garage, fais tourner la caméra autour de chaque voiture : trouve l'emblème de chaque marque.
• Prends une voiture et appuie sur C jusqu'à la vue « capot » : tu es dans l'habitacle !
• Dans circuit/affichage/voitures-nouvelles.js, cherche la Renault 5 : change le 1.5 du toit (la 4ᵉ valeur des tranches du milieu) en 1.3 : elle devient toute basse.
• Dans habitacle, change volant: "rond" en volant: "course" sur une voiture : son volant devient plat en bas.

❓ Quiz

🏁 Étape 70 : toutes les voitures plus réalistes, dans tous les jeux ✅ livrée · à valider

Les 36 voitures du circuit 3D, les 7 véhicules du rallye-raid et les chars et engins des tanks sont redessinés. ▶ le circuit 3D · ▶ le rallye-raid · ▶ les tanks

✏️ La silhouette : 5 lignes au lieu de 50 nombres

À l'étape 69, chaque tranche d'une voiture était écrite à la main (7 nombres par tranche, 14 tranches : presque 100 nombres !). Pour refaire 20 voitures, il fallait plus simple. Un designer dessine une voiture avec quelques lignes : le profil (vu de côté), la ceinture (où commencent les vitres), la largeur (vue de dessus), la largeur du toit et le bas. L'outil silhouette lit ces 5 lignes et fabrique tout seul une tranche tous les 20 cm.

🔩 Souder les pièces

Un char a maintenant des centaines de pièces (galets, boulons, patins de chenille…). Si la carte graphique devait les dessiner une par une, le jeu ralentirait. Alors, une fois le char fini, on soude toutes les pièces de la même matière en une seule : le jeu des tanks dessine maintenant environ 270 objets par image au lieu de 700, et le rallye-raid 390 au lieu de 780, alors qu'il y a plus de détails !

🔎 Missions d'exploration

• Dans le circuit, prends la Formule 1 : regarde le « halo » au-dessus du pilote.
• Dans les tanks, ouvre « sous le capot » : cherche la ligne « l'atelier (étape 70) » et le nombre de pièces soudées.
• Dans circuit/affichage/voitures-refaites.js, trouve le profil de la 208 et change le 1.43 en 1.3 : elle devient toute basse.

❓ Quiz

🏍️ Étape 71 : des motos, un quad, un camion et une carte des tanks 3 fois plus grande ✅ livrée · à valider

Deux motos dans les garages du circuit 3D (la Honda CRF450R et la Montesa Cota de trial), et dans les tanks : une moto cross, un quad à mitrailleuse et un camion de 6 soldats pour les deux camps, sur une carte de 2,1 km. ▶ le circuit 3D · ▶ les tanks

🏍️ Pourquoi une moto penche

Une vraie moto ne tourne pas comme une voiture : le pilote la penche vers l'intérieur du virage, sinon il tomberait vers l'extérieur. Dans le jeu, l'angle dépend de 2 choses : combien tu tournes le guidon, et ta vitesse. À l'arrêt, elle reste droite. L'angle maximum est dans circuit/config.js : motos: { inclinaison: 0.45 } (0,45 radian, environ 26°).

🚛 Le camion de l'ordinateur : une machine à états

Le camion de l'ordinateur suit toujours le même cycle, comme un bus sur sa ligne :

🏠 au camp, plein (6 soldats) ──▶ 🚛 roule vers le front ──▶ 🪂 décharge (un soldat à la fois)
       ▲                                                              │
       └────────── ⏳ se remplit 15 s ◀── 🔙 rentre au camp, vide ◀───┘

Pour tourner, la moto, le quad et le camion suivent la règle du vélo : plus les roues avant sont braquées et plus on va vite, plus on tourne ; et plus l'engin est long, moins il tourne court. C'est pour ça que le camion fait de grands virages.

🔎 Missions d'exploration

• Dans les tanks, ouvre « sous le capot » et cherche « La grande carte et les engins qui roulent » : suis l'état du camion bleu (roule, décharge, rentre…).
• Dans tanks/config.js, cherche le camion et change le nombre de soldats à bord (6) : que se passe-t-il au front ?
• Ouvre « sous le capot » et cherche « la moto penche (étape 71) » : regarde l'angle changer pendant un virage.
• Dans circuit/config.js, change inclinaison: 0.45 en 0.9 : la moto se couche presque par terre !
• Compare la vitesse max de la CRF (vitesseMax: 40.3 m/s) et de la trial (27.8) : combien de km/h ? (multiplie par 3,6)

❓ Quiz

⚡ Étape 72 : plus de lags ✅ livrée · à valider

Le circuit 3D, le rallye-raid et les tanks règlent tout seuls leur qualité pour rester fluides, même sur les grandes cartes. ▶ le circuit 3D · ▶ le rallye-raid · ▶ les tanks

⏱️ Un lag, c'est quoi ?

Un jeu, c'est un dessin animé : l'ordinateur dessine environ 60 images par seconde. Il a donc 16 millisecondes (ms) pour dessiner chaque image. S'il lui en faut 40, il ne dessine plus que 25 images par seconde : ça saccade, c'est un lag.

🎚️ Le régulateur de qualité

Toutes les 2 secondes, le jeu chronomètre ses images, comme le régulateur de vitesse d'une voiture :

• Si c'est trop lent, il descend d'un niveau : image un peu moins fine, ombres plus simples, brume plus proche, arbres et herbe dessinés moins loin.
• S'il a de la marge 2 fois de suite, il remonte d'un niveau.

Il y a 4 niveaux : très léger, léger, moyen et beau. Un ordinateur puissant reste en « beau », un petit ordinateur descend en « léger ». Pour ne pas faire le yo-yo, un niveau trop lent est interdit pendant 60 secondes.

🔍 Moins de détails au loin

Une voiture à 300 m fait 3 pixels à l'écran : inutile de dessiner ses rétroviseurs et ses boulons ! Au loin, le jeu cache les petits détails et ne garde que la caisse et les roues. Seules les voitures les plus proches sont dessinées en détail, et la tienne l'est toujours.

🔥 Le soudeur

Pour la carte graphique, chaque pièce est un dessin à faire. Le soudeur colle ensemble toutes les pièces du décor qui ne bougent pas et qui ont la même allure (même image, même couleur). En ville, cela fait environ 300 dessins par image au lieu de 850, dans le rallye-raid 200 au lieu de 440, et dans les tanks 250 au lieu de 860. Dans les tanks, les règles calculent aussi presque 4 fois plus vite : chaque soldat ne regarde plus les 400 arbres un par un, mais seulement ceux de sa case (le quadrillage, tanks/moteur/grille.js).

AVANT :  trottoir + trottoir + trottoir + … (500 pièces) → 500 dessins
APRÈS :  [ tous les trottoirs soudés ]                   →   1 dessin

🔎 Missions d'exploration

• Dans le circuit, ouvre « sous le capot » : cherche « le soudeur (étape 72) » (combien de pièces avant et après ?) et « voitures dessinées (étape 72) ».
• Dans circuit/config.js, cherche qualite et change depart: 1 en depart: 3 : le jeu démarre en « beau ».
• Dans le même bloc, change vue: 650 (niveau « très léger ») en vue: 200, puis force ce niveau : la brume arrive tout près !

❓ Quiz

🚁 Étape 73 : des hélicoptères de transport dans les tanks ✅ livrée · à valider

Un Chinook et un Black Hawk pour toi et pour chaque camp : 10 soldats à bord, 2 mitrailleuses de porte, et la descente à la corde. ▶ les tanks

🪢 Pourquoi « bas et presque arrêté » ?

Une vraie corde de descente fait environ 25 m. Si l'hélico est plus haut, la corde ne touche pas le sol ; s'il avance, les soldats se balancent et tombent. Le jeu vérifie donc 2 conditions avant d'envoyer un soldat : la hauteur (moins de 25 m) ET la vitesse (moins de 11 km/h). C'est un « ET » : il faut les deux en même temps.

🔫 La mitrailleuse qui vise toute seule

Chaque tireur de porte surveille son côté (75° de chaque côté de sa porte). Plusieurs fois par seconde, il cherche l'ennemi le plus proche à moins de 120 m dans son secteur, tourne son arme vers lui et tire. Sous le capot, tu vois la cible de chaque mitrailleuse.

🔎 Missions d'exploration

• Ouvre « sous le capot » et suis l'état d'un hélico de l'ordinateur : au camp, décolle, en vol, stationnaire, descente à la corde, retour…
• Dans tanks/config.js, cherche corde: { hauteurMax: 25 et mets 60 : tu peux poser tes soldats de très haut !
• Compare le Chinook et le Black Hawk : lequel va le plus vite ? Lequel résiste le mieux ?

❓ Quiz

🎨 Étape 74 : 60 soldats, et des tanks bien plus beaux ✅ livrée · à valider

Les hélicos, les soldats et tout le décor des tanks sont redessinés, et chaque camp peut avoir 60 soldats debout. ▶ les tanks

🗺️ Une seule grande image pour tout le sol

Avant, le sol avait partout la même couleur. Maintenant, au démarrage, le jeu peint une image de toute la carte (2048 × 2048 points, environ 1 point par mètre) : de l'herbe ici, de la terre là, un chemin entre les camps, du sable au bord du lac. Puis il la pose sur le sol comme un grand tapis.

Mais de près, 1 point par mètre, c'est flou ! Alors on ajoute une 2e image toute petite (des brins d'herbe et des cailloux), répétée tous les 3,6 m. Elle s'efface au loin, là où on n'en a plus besoin.

🦴 Un soldat en « chair et os »

Avant, un soldat était fait d'une vingtaine de pièces séparées : 20 dessins pour la carte graphique. Maintenant, c'est une seule peau posée sur un squelette : quand un os bouge (le bras), la peau autour bouge avec lui. C'est comme ça que sont faits les personnages des vrais jeux vidéo. Résultat : un soldat plus beau qui ne coûte que 2 ou 3 dessins.

🔎 Missions d'exploration

• Appuie sur G pour passer du niveau 0 au niveau 3 : regarde l'herbe, les ombres et les arbres changer.
• Dans tanks/config.js, cherche maxParEquipe: 60 et mets 100 : est-ce que le jeu ralentit ?
• Pose-toi près du lac et regarde le sable et la boue de la rive.

❓ Quiz

🏚️ Étape 75 : de beaux tanks, des maisons qu'on peut détruire, des grenades ✅ livrée · à valider

Tous les tanks sont repeints en camouflage, les maisons se cassent morceau par morceau, et tu peux lancer des grenades. ▶ les tanks

🧱 Un mur fait de morceaux

Chaque mur est découpé en morceaux de 1,6 m × 2,8 m (environ 4 800 sur toute la carte). Chaque morceau a ses points de vie :

• Une balle enlève 1 point au morceau touché.
• Une explosion enlève beaucoup de points à tous les morceaux autour d'elle : un obus enlève 95 points dans un rayon de 3,1 m. Ça fait le gros trou.
• Un morceau qui n'a plus de points tombe, et ceux qui étaient posés dessus tombent aussi. Il reste des gravats.
• Quand 36 % des morceaux sont tombés, le toit n'est plus tenu : il s'effondre.

avant :  ▓▓▓▓▓▓      1 obus :  ▓▓  ▓▓      6 obus :  (toit par terre)
         ▓▓▓▓▓▓                ▓    ▓               ░░▓░░▓░  gravats

Les balles, les obus et les regards des soldats passent par les trous et les fenêtres, mais pas à travers un mur entier. Un mur te protège donc d'une explosion qui a lieu de l'autre côté.

💣 La grenade : une balle qui rebondit

Une grenade, c'est un petit objet qui suit la gravité : à chaque pas, elle avance et elle tombe un peu plus vite. Quand elle touche le sol ou un mur, elle rebondit en perdant de la vitesse, puis elle roule. Un compte à rebours de 3 secondes commence au lancer. À 0, elle explose.

🔎 Missions d'exploration

• Ouvre « sous le capot » et va voir « Les maisons et les grenades (étape 75) » : regarde la solidité de la maison la plus proche baisser pendant que tu tires.
• Lance une grenade contre un mur et compte ses rebonds (tu entends un « tink » à chaque fois).
• Dans tanks/config.js, cherche les grenades et change la durée avant l'explosion (3 s) : que se passe-t-il avec 1 s ?

❓ Quiz

✈️ Étape 76 : les avions et le Tigre redessinés ✅ livrée · à valider

Le Rafale, les chasseurs ennemis, l'avion de transport, le drone et l'hélicoptère Tigre sont refaits, le plus beau possible. ▶ les tanks

🛩️ Une aile, ce n'est pas une planche

Coupe une vraie aile d'avion en tranches : chaque tranche a une forme de goutte allongée, bombée dessus, plus plate dessous. C'est ce qu'on appelle un profil. Le nouvel outil aile() fabrique une aile en posant des profils les uns à côté des autres, de plus en plus petits vers le bout. C'est pour ça que les ailes ont maintenant un bord d'attaque arrondi et un bord de fuite fin.

🎨 Un camouflage sans couture

Avant, le camouflage était une image collée sur chaque pièce : entre deux pièces, les taches ne se raccordaient pas. Maintenant, c'est la carte graphique qui calcule la couleur à partir de la position dans l'espace de chaque point de l'avion. Deux pièces qui se touchent ont donc la même couleur au même endroit, et les taches continuent d'une pièce à l'autre.

🔎 Missions d'exploration

• Prends le Rafale : regarde la verrière se fermer, puis le train rentrer après le décollage.
• Ouvre « sous le capot » et cherche « Les avions et le Tigre (étape 76) » : combien de triangles pour le Rafale de près ? Et de loin ?
• Dans tanks/config.js, cherche le bloc avions3d et change la durée du train d'atterrissage.

❓ Quiz

🏘️ Le village : un projet à part

Le troisième jeu de Maxance est un jeu de gestion façon The Settlers, sans combat. Il a son propre carnet, ses propres demandes et ses propres numéros d'étapes, pour ne pas se mélanger avec le circuit.

🌐 La Mégalopole : un projet à part

Le jeu de ville de Maxance, façon SimCity : on trace les routes, on peint des zones (habitation, commerce, industrie, agriculture), et la ville pousse toute seule quand ses habitants sont contents. Il a son propre carnet et ses propres étapes.

🗺️ La route vers un jeu façon Minecraft

Chaque étape ajoute une fonctionnalité au jeu ET une grande idée sur le fonctionnement interne des jeux. L'ordre peut changer : c'est Maxance qui décide !

📔 Journal de bord

Après chaque étape : ce qui a été fait, et ce que Maxance a appris, avec ses mots à lui.