Créer un jeu de shoot vertical WW2 avec l’IA : retour d’expérience complet sur Corsair (HTML, CSS, JS only)
- IA
- 20 février 2026
J’ai réalisé un jeu de shoot vertical avec l’IA (et voilà ce que ça m’a appris)
Créer un jeu vidéo uniquement avec HTML, CSS et JavaScript, sans moteur externe, avec une ambiance Seconde Guerre mondiale – guerre du Pacifique – et s’appuyer massivement sur une IA pour le développement.
C’était l’expérience.
Le résultat : Corsair, un shoot vertical inspiré du mythique avion américain Chance Vought F4U Corsair.
Un projet à la fois excitant, frustrant, instructif… et parfois franchement pénible.
Voici le retour complet, sans filtre.
🎮 Le point de départ : un simple tweet
Tout commence avec un tweet de @rjchicago partageant un prompt :
« create single html page snake-style game, using modern libs as needed, a cyberpunk design and colors, high score leaderboard, square grid, 3D ripple effects when pellets are consumed by the snake, audio effects, flashy neon glow effects, classic retro arcade style. »
Le jeu généré était testable ici :
👉 https://snipps.dev/rjchicago/snipps/neon-viper
Franchement ?
C’était cool.
Mais j’étais sur téléphone. Impossible d’itérer sérieusement.
Alors j’ai voulu tester autre chose : un shoot vertical façon arcade, ambiance Pacific Theater, avions, pluie, nuages, boss, mid-boss… le tout généré et développé avec l’IA Grok.
🛩 Naissance de “Corsair”
Le concept :
Un shoot vertical arcade inspiré des classiques, avec :
Avion principal inspiré du F4U Corsair
Ennemis aériens
Bateaux rares
Mid-boss
Boss final
Leveling des tirs
Effets visuels modernes
Contraintes techniques :
HTML + CSS + JS only
Aucun moteur externe
Pas de framework
Pas de librairie lourde
Canvas pur
Ambition : ambiance WW2 stylisée, mais dynamique.
🖼 Évolution visuelle – Les 3 grandes versions
Version 1 – Fonctionnelle mais… très moche
Première version :
Rectangles de fallback
Sprites bruts
Collisions approximatives
Pas d’effets
Pas de profondeur
Mais ça tournait.
Et ça, c’était déjà énorme.
Version 2 – Gros patch visuel
Deuxième phase : on commence à “pimper”.
Ajouts :
Meilleurs sprites
Scaling boss ajusté
Mid-boss double tir horizontal
Background plus travaillé
Bullets avec glow
Ajustement des vitesses globales (-35%)
L’expérience devenait jouable.
Version actuelle – Full fonctionnel + effets avancés
Aujourd’hui :
Collisions directes avion vs avion (35% dégâts mutuels)
Tirs multiples avant/arrière
Nuages en SVG pur
Pluie animée
Glow bullets + trail
Background traveling maîtrisé
Game Over + Restart stable
IA supprimée → 100% contrôles clavier
🧠 Développer avec Grok : impressionnant… mais éprouvant
Soyons honnêtes.
Ce qui est impressionnant
Vitesse d’exécution
Force de proposition
Génération rapide de structures
Itération quasi instantanée
Production d’assets via Grok + Stable Diffusion
Pour :
créer un sketch
tester un concept
prémâcher du code répétitif
générer des idées
C’est redoutable.
Ce qui est pénible
Mais.
1️⃣ Instabilité sur les longues sessions
Quand l’échange devient long :
4 réponses sur 5 plantent
Variables perdues
Contexte oublié
Bugs réintroduits
Or, un projet de jeu nécessite justement un contexte global permanent.
2️⃣ Erreurs de logique
Exemples concrets :
splice() en boucle forward → freeze
Variables mal scopées (e/j non déclarés)
Dégâts inversés
Collisions sous-dimensionnées
vx=0 écrasant les angles de tir
Ce sont des erreurs de développeur junior.
3️⃣ Mauvaise foi algorithmique
Le point le plus frustrant.
Quand l’IA se trompe :
Elle n’assume pas toujours
Elle peut insister
Elle peut corriger… en aggravant
Et si toi tu te trompes ?
Elle te le rappelle immédiatement.
⚙ Le vrai cauchemar : les collisions
La gestion des collisions avion vs avion a demandé plus de 10 itérations.
Problèmes rencontrés :
splice pendant itération
Distance de collision trop faible
Résidus d’IA d’esquive
Dégâts mal appliqués
Freeze partiel
Solution finale :
Boucle inverse
Tableau temporaire
Distance 80–120px
Suppression totale des résidus IA
Appel en fin de update()
Conclusion :
Sans base technique solide, j’aurais intégré des patchs qui auraient détruit l’architecture.
🎯 L’IA primitive auto-joueuse (et pourquoi on l’a supprimée)
Au début, on avait une pseudo IA :
Priorité croix
Dodge automatique
Esquive ennemis
C’était fun… mais :
Contrôles écrasés
Déplacements cumulés invisibles
Bugs fantômes
Résultat : suppression totale.
Passage en 100% manuel :
Flèches / WASD
Espace pour tirer
Et là, enfin : fluidité.
🔫 Le système de tirs multiples
Objectif :
+1 tir avant tous les 3 niveaux
+1 tir arrière tous les 5 niveaux
Problème : les tirs restaient mono.
Cause :
Pas de boucle sur frontShots
vx écrasé
Angles non appliqués
Solution :
Séparation tir manuel / tir arrière auto
Ajout b.x += b.vx
Boucles dédiées
Aujourd’hui, ça fonctionne parfaitement.
🌧 Les effets visuels (la vraie valeur ajoutée)
Là où l’IA a été extrêmement utile :
Fonds
Avions
Assets
Background
Style ambiance
Ajouts finaux :
Nuages SVG animés
Pluie verticale glow
Bullets avec trail lumineux
Opacité fond 85%
Boss ralenti (vy 0.5–0.8)
Mid-boss zigzag lent
Un développeur senior aurait peut-être codé le moteur en 1h.
Mais :
Il n’aurait jamais produit en si peu de temps :
les illustrations
les textures
les variations visuelles
Le gain est ici.
🖼 Galerie d’illustrations – Recherche de style
Explorations colorimétriques et atmosphériques pour définir le ton visuel.
📺 Bande-annonce & vidéo promo
Un court métrage de musique electro intense générée par IA.
🧮 Bilan honnête
Temps passé : 6–7 heures.
Si j’étais développeur senior pur code ?
Probablement 1–2 heures.
Mais :
Pas d’assets
Pas de visuels générés
Pas de variations artistiques
Conclusion :
✅ Gain de temps global
✅ Réduction des coûts
✅ Forte valeur visuelle
⚠ Logique encore perfectible
⚠ Optimisation inexistante
⚠ IA instable sur projets longs
L’IA est un amplificateur, pas un remplaçant.
🧭 Conclusion
Créer un jeu complet en HTML/CSS/JS avec l’IA est :
possible
rapide
visuellement puissant
techniquement imparfait
L’IA est excellente pour :
amorcer
accélérer
générer
explorer
Mais elle reste fragile en logique complexe.
Corsair est né de cette tension.
Et ce n’est probablement que le début.
🚀 Tester le jeu
Le jeu est jouable directement en ligne.
⚠ Disclaimer
🇫🇷
Ce jeu n’est pas optimisé et peut être gourmand en ressources selon votre matériel.
Je décline toute responsabilité en cas de ralentissement, surchauffe ou dysfonctionnement matériel.
🇬🇧
This game is not optimized and may be resource-intensive depending on your hardware.
I decline any responsibility for performance issues, overheating, or hardware malfunction.
Articles Connexes
