Coding IA - Génération de Labyrinthes
Un exercice de style où 7 modèles d'intelligence artificielle ont été invités à générer un labyrinthe en HTML, CSS et JavaScript. Cette démonstration vise à évaluer et comparer les capacités de développement web des différents modèles d'IA actuels, en analysant leur approche technique, la qualité de leur code, et l'expérience utilisateur qu'ils parviennent à créer.
⚠️ Note importante
Cette page est un exercice de style et non une étude scientifique rigoureuse. Les résultats présentés sont une simple photographie à un instant T des capacités des différents modèles d'IA. Chaque modèle peut produire des résultats différents à chaque exécution du même prompt, ce qui pourrait modifier significativement les notes et le classement présentés ici. Cette démonstration vise uniquement à illustrer la diversité des approches et des capacités actuelles des modèles d'IA dans un contexte de développement web.
Important : Nous n'avons pas itéré sur les modèles pour améliorer les résultats. À l'exception de Claude 3.7 Normal, où nous avons simplement demandé à l'IA de terminer le travail car elle n'était pas allée au bout, tous les résultats présentés sont les premières réponses obtenues sans aucune modification ou amélioration.
🤖 Prompt utilisé
Ecris un script html/js/css pour générer graphiquement un labyrinthe de dimension 50x50.
Pour faire ce labyrinthe, tu dois utiliser l'algorithme Growing Tree, la labyrinthe généré doit avoir une seule solution possible, tous les chemins doivent être atteignables, ne pas être trop simple à résoudre, et tu dois t'assurer que la sortie est bien accessible.
Il faut un bouton pour générer un nouveau labyrinthe, et un bouton pour résoudre le labyrinthe. Tu dois utiliser le meilleur algorithme de résolution de labyrinthe, et faire une résolution visuelle et sympa pour l'utilisateur.
Enfin, on doit pouvoir essayer de résoudre par soi-même le labyrinthe en utilisant les flèches de direction du clavier.
Le design doit être excellent, coloré, moderne et élégant.
Ajoute toutes les optimisations (graphiques, fonctionnelles) qui te semblent pertinentes pour une meilleure expérience utilisateur.
Attention, l'ensemble du jeu doit tenir à l'écran, il faut tout voir sans avoir besoin de scroller.
Tableau comparatif des scripts de labyrinthe
| Rang | Script | Lignes de code | Code | Ergonomie | Fonctionnalités | Design | Note globale |
|---|---|---|---|---|---|---|---|
| 1 | Claude Sonnet 3.7 Extended | 1 154 | 9/10 | 10/10 | 10/10 | 10/10 | 9.8/10 |
| 2 | Claude Sonnet 3.7 Normal | 946 | 8/10 | 8/10 | 8/10 | 8/10 | 8.0/10 |
| 3 | ChatGPT o1 | 486 | 9/10 | 7/10 | 8/10 | 8/10 | 8.0/10 |
| 4 | ChatGPT o3-mini-high | 346 | 8/10 | 6/10 | 7/10 | 7/10 | 7.0/10 |
| 5 | ChatGPT 4o | 169 | 7/10 | 5/10 | 6/10 | 5/10 | 5.8/10 |
| 6 | Grok 3 | 274 | 6/10 | 5/10 | 6/10 | 6/10 | 5.8/10 |
| 7 | Mistral | 243 | 2/10 | 1/10 | 2/10 | 1/10 | 1.5/10 |
Claude Sonnet 3.7 Extended (9.8/10)
Ce script se démarque nettement par sa qualité exceptionnelle dans toutes les dimensions. Il propose une interface utilisateur riche et élégante avec des fonctionnalités avancées comme la gestion de la difficulté, des animations de victoire avec confettis, un tableau de bord détaillé et une aide contextuelle.
Claude Sonnet 3.7 Normal (8.0/10)
Version plus légère mais toujours très bien conçue, ce script propose une approche basée sur DOM avec une interface épurée et moderne. Il offre une expérience utilisateur fluide avec des contrôles adaptés aux appareils mobiles, une notification de victoire et des animations de résolution.
ChatGPT o1 (8.0/10)
Ce script équilibré utilise efficacement le Canvas pour un rendu performant. Sa structure de code exceptionnellement bien commentée et organisée est son point fort majeur. Il offre un redimensionnement intelligent pour s'adapter à tous les écrans et une détection de victoire fonctionnelle.
ChatGPT o3-mini-high (7.0/10)
Solution technique de qualité utilisant Canvas et l'algorithme A* pour la résolution. Il propose un code bien structuré et une animation fluide du chemin solution. Son design épuré et fonctionnel offre une bonne visibilité, mais il manque de raffinements ergonomiques et visuels.
ChatGPT 4o (5.8/10)
Ce script offre une implémentation fonctionnelle mais basique d'un labyrinthe. L'utilisation du Canvas est efficace pour les performances, mais il manque de nombreuses fonctionnalités présentes dans les scripts mieux classés. L'absence de distinction entre départ/arrivée et de détection de victoire limite l'expérience.
Grok 3 - Penser (5.8/10)
Bien que fonctionnel et visuellement cohérent, ce script souffre de lacunes ergonomiques importantes comme l'absence d'instructions et de distinction claire entre départ et arrivée. Sa structure de code est moins modulaire que les autres scripts et son interface manque d'informations sur l'état du jeu.
Mistral (1.5/10)
Ce script est fondamentalement défectueux et non fonctionnel en raison d'erreurs critiques dans le positionnement CSS et la gestion des coordonnées. Bien que sa structure théorique présente des éléments intéressants comme l'algorithme A*, les erreurs d'implémentation empêchent totalement son fonctionnement.