Frédéric Pierron

Créer un jeu du pendu avec Claude : de Godot à JavaScript

Retour d'expérience sur la création collaborative d'un jeu du pendu avec l'IA Claude, depuis l'adaptation d'un projet Godot jusqu'au déploiement web

Créer un jeu du pendu avec Claude : de Godot à JavaScript

Il y a quelques semaines, j’avais créé un petit jeu du pendu avec Godot pour m’amuser. Aujourd’hui, j’ai décidé de le porter en JavaScript pour l’intégrer sur mon site Pas Bête Le Net. Plutôt que de le recoder seul, j’ai fait appel à Claude pour m’assister dans cette tâche. Voici le récit de cette collaboration humain-IA particulièrement fluide.

Le point de départ

Mon projet Godot était stocké dans E:\MS_Drive\OneDrive\Documents\LeJeuDuPendu. L’idée était simple : transformer ce jeu desktop en version web JavaScript, accessible directement depuis le navigateur.

Ma demande initiale :

“J’ai ce projet Godot : E:\MS_Drive\OneDrive\Documents\LeJeuDuPendu. Je voudrais le refaire mais avec du javascript purement pour le publier ensuite sur mon site pasbetelenet/jeudupendu”

L’approche de Claude

Claude a commencé par examiner la structure de mon projet, mais n’a pas pu accéder aux fichiers. Plutôt que de s’arrêter là, il a pris l’initiative de créer un jeu du pendu complet basé sur les conventions habituelles, en proposant une version moderne et fonctionnelle.

Première version : HTML/CSS/JavaScript pur

Claude a livré d’emblée un jeu entièrement fonctionnel avec :

  • 4 catégories de mots (Animaux, Fruits, Pays, Métiers)
  • 10 mots par catégorie avec indices personnalisés
  • Système de score avec bonus
  • Interface responsive avec des animations CSS
  • Design moderne utilisant les Google Fonts

Itérations et améliorations

Ce qui m’a impressionné, c’est la capacité de Claude à itérer rapidement sur les retours utilisateur. Chaque problème soulevé était résolu efficacement.

Problème 1 : Bugs JavaScript

Le premier test a révélé une erreur :

Uncaught TypeError: Cannot read properties of null (reading 'classList')

Solution de Claude : Remplacement du sélecteur défaillant par une recherche plus robuste :

// Avant (buggé)
const button = document.querySelector(`[onclick="hangman.guessLetter('${letter}')"]`);

// Après (corrigé)
const buttons = document.querySelectorAll('.letter-btn');
const button = Array.from(buttons).find(btn => btn.textContent === letter);

Problème 2 : Affichage et graphiques

Mes retours :

  • Le mot doit rester sur une ligne
  • Les graphiques ASCII sont affreux

Solution de Claude : Remplacement complet des graphiques ASCII par un SVG animé coloré et ajout de contraintes CSS pour l’affichage :

.word-display {
    white-space: nowrap;
    margin: 30px 10%;
    width: 80%;
}

Problème 3 : Gestion des accents

Un bug majeur : taper “E” ne révélait pas “É” dans “VÉTÉRINAIRE”.

Solution de Claude : Implémentation d’un système de normalisation des accents :

this.accentMap = {
    'É': 'E', 'È': 'E', 'Ê': 'E', 'Ë': 'E',
    'À': 'A', 'Â': 'A', 'Ä': 'A',
    // ... etc
};

normalizeForComparison(letter) {
    return this.accentMap[letter] || letter;
}

L’intégration au site

Claude a découvert automatiquement la structure de mon site Astro et a :

  1. Créé le dossier public/jeudupendu/
  2. Généré le fichier index.html complet
  3. Ajouté le lien dans la navigation du site
  4. Intégré un bouton de retour à l’accueil dans le jeu

Aspects techniques remarquables

Code propre et moderne

  • Utilisation de classes JavaScript ES6
  • SVG vectoriel pour les graphiques
  • CSS Grid pour la disposition des lettres
  • Gestion des événements clavier et souris

Fonctionnalités avancées

  • Redimensionnement automatique du texte selon la longueur du mot
  • Animations fluides d’apparition du pendu
  • Système de score et d’indices
  • Support complet des accents français

Responsive design

Le jeu s’adapte parfaitement aux différentes tailles d’écran grâce à Flexbox et CSS Grid.

Réflexions sur la collaboration

Points forts de Claude

  • Proactivité : N’attend pas d’avoir tous les détails pour commencer
  • Itération rapide : Chaque correction est immédiate et précise
  • Vision globale : Comprend le contexte technique (Astro, déploiement web)
  • Attention aux détails : Gestion des edge cases comme les accents

Ma contribution

  • Direction créative : Définition des besoins et validation des choix
  • Tests utilisateur : Détection des bugs et problèmes d’UX
  • Contexte technique : Fourniture de l’architecture existante

Résultat final

Le jeu est maintenant accessible sur pasbetelenet.com/jeudupendu avec :

  • Interface moderne et intuitive
  • 40 mots répartis en 4 catégories
  • Système de score motivant
  • Navigation fluide vers le site principal

Conclusion

Cette expérience illustre parfaitement le potentiel de la collaboration humain-IA dans le développement. Claude ne se contente pas d’exécuter des instructions : il propose, anticipe et résout. Ma valeur ajoutée réside dans la vision produit, les tests et la validation des choix techniques.

Le résultat dépasse mes attentes initiales, tant au niveau de la qualité du code que de l’expérience utilisateur. Une belle démonstration que l’IA peut être un véritable partenaire de développement, pas seulement un outil.

Le jeu du pendu est maintenant disponible sur Pas Bête Le Net. N’hésitez pas à tester vos connaissances !

← Retour à la liste « Sur Pas Bete Le Net »