Chez Beebom, nous couvrons de nombreuses nouvelles et ressources liées à l’IA. Vous avez dû voir nos articles autour Plugins ChatGPT, GPT-4, et plus. Naturellement, je passe donc beaucoup de temps à regarder ce que l’IA peut faire, et oui, à essayer d’intégrer l’IA dans mon flux de travail pour voir si cela peut faire une différence drastique dans ma productivité au travail. Récemment, cependant, j’ai voulu essayer d’utiliser l’IA pour autre chose que le travail. Je voulais voir si je pouvais utiliser ChatGPT pour le développement de jeux avec l’IA.
La première étape dans la construction d’un jeu consiste à déterminer exactement ce qu’il faut construire. Évidemment, vous ne pouvez pas écrire le code d’un jeu sans savoir pour quoi vous codez.
Heureusement, ce genre de chose est facile pour un outil comme ChatGPT. Vous pouvez simplement lui demander de suggérer des jeux que vous pouvez créer, et il peut suggérer (la plupart du temps) tout, des jeux de base, simples à créer, aux jeux plus complexes et compliqués.
<img loading="lazy" decoding="async" width="640" height="341" src="https://beebom.com/wp-content/uploads/2023/05/chatgpt-game-suggestions.jpg?w=640" alt="suggestions de jeux chatgpt" srcset="https://beebom.com/wp-content/uploads/2023/05/chatgpt-game-suggestions.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/chatgpt-game-suggestions.jpg?resize=300%2C160&quality=75&strip=all 300w, https://beebom.com/wp-content/uploads/2023/05/chatgpt-game-suggestions.jpg?resize=360%2C193&quality=75&strip=all 360w, https://beebom.com/wp-content/uploads/2023/05/chatgpt-game-suggestions.jpg?resize=375%2C201&quality=75&strip=all 375w" sizes="(max-width: 640px) 100vw, 640px" />
J’ai donc demandé à ChatGPT de suggérer des jeux simples que je peux créer en utilisant HTML, CSS et JavaScript. De cette liste, j’ai choisi de construire “Whack-a-Mole”. Cela ressemble à un jeu facile à construire, avec une logique assez simple.
Obtenir ChatGPT pour écrire du code
À ce stade, quelqu’un qui sait coder peut très facilement créer ce jeu. Cependant, je voulais que ChatGPT construise l’intégralité du jeu pour moi, j’ai donc dû proposer des invites pour cela.
Ce n’était pas très difficile non plus. Vous pouvez simplement demander à ChatGPT d’écrire le code du jeu, et puisque ChatGPT est sensible au contexte, il sait de quoi vous parlez et peut écrire le code correspondant, comme vous pouvez le voir dans la capture d’écran ci-dessous.
Maintenant, à l’origine, j’avais décidé d’être un codeur propre et de séparer le HTML, le CSS et le JS en fichiers individuels, à savoir index.html, styles.css et script.js… en suivant la norme de l’industrie en matière de noms de fichiers.
<img loading="lazy" decoding="async" width="640" height="390" src="https://beebom.com/wp-content/uploads/2023/05/ai-game-development-html-file.jpg?w=640" alt="code html de développement de jeux ai" srcset="https://beebom.com/wp-content/uploads/2023/05/ai-game-development-html-file.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/ai-game-development-html-file.jpg?resize=300%2C183&quality=75&strip=all 300w, https://beebom.com/wp-content/uploads/2023/05/ai-game-development-html-file.jpg?resize=100%2C62&quality=75&strip=all 100w" sizes="(max-width: 640px) 100vw, 640px" />
<img loading="lazy" decoding="async" width="640" height="421" src="https://beebom.com/wp-content/uploads/2023/05/making-games-with-ai-css.jpg?w=640" alt="faire des jeux avec ai en demandant le code de style css" srcset="https://beebom.com/wp-content/uploads/2023/05/making-games-with-ai-css.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/making-games-with-ai-css.jpg?resize=300%2C197&quality=75&strip=all 300w" sizes="(max-width: 640px) 100vw, 640px" />
<img loading="lazy" decoding="async" width="640" height="370" src="https://beebom.com/wp-content/uploads/2023/05/game-development-with-ai-javascript.jpg?w=640" alt="développement de jeux avec ai demandant à chatgpt de fournir du code pour la logique javascript" srcset="https://beebom.com/wp-content/uploads/2023/05/game-development-with-ai-javascript.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/game-development-with-ai-javascript.jpg?resize=300%2C173&quality=75&strip=all 300w" sizes="(max-width: 640px) 100vw, 640px" />
Cependant, cela m’a rapidement ennuyé, car ChatGPT n’est en fait pas très bon pour écrire du code.
Corriger les bugs… Parce que oui, il y a des bugs
La première itération du jeu Whack-a-Mole a été un désastre absolu. J’ai ouvert le fichier dans Chrome et le jeu n’a tout simplement pas fonctionné. Il y avait des trous de taupe sur mon écran, mais aucune taupe n’a jeté un coup d’œil pour que je frappe et gagne des points.
À ce stade, je pouvais essayer de corriger le script, mais étant un codeur absolument incompétent, je ne pouvais pas, pour la vie de moi, être certain que le problème était dans le script, ou si le problème était que le code HTML attribué un identifiant pour les balises HTML qui était différent de ce que le JavaScript tentait d’utiliser pour la logique du jeu.
Décidant d’abandonner complètement le travail manuel, j’ai demandé à ChatGPT de mettre l’intégralité du code HTML, CSS et JavaScript dans un seul fichier. Heureusement, il a obligé. Mais évidemment, le code ne fonctionnerait pas encore car il y avait quelques problème, quelque part.
<img loading="lazy" decoding="async" width="640" height="369" src="https://beebom.com/wp-content/uploads/2023/05/ai-game-development-combine-code-snippets.jpg?w=640" alt="développement de jeux ai combiner des extraits de code" srcset="https://beebom.com/wp-content/uploads/2023/05/ai-game-development-combine-code-snippets.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/ai-game-development-combine-code-snippets.jpg?resize=300%2C173&quality=75&strip=all 300w" sizes="(max-width: 640px) 100vw, 640px" />
Pour commencer, et ce n’est pas exactement un bogue, ChatGPT a mis tout le code dans un seul fichier, mais a laissé de l’espace pour le code JavaScript. Heureusement, vous pouvez simplement lui demander de vous donner le reste du code, et il crache utilement l’intégralité du fichier HTML, avec le code.
<img loading="lazy" decoding="async" width="640" height="332" src="https://beebom.com/wp-content/uploads/2023/05/game-development-with-ai-empty-space-for-code.jpg?w=640" alt="le développement de jeux ai laisse parfois un espace vide pour le code" srcset="https://beebom.com/wp-content/uploads/2023/05/game-development-with-ai-empty-space-for-code.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/game-development-with-ai-empty-space-for-code.jpg?resize=300%2C156&quality=75&strip=all 300w" sizes="(max-width: 640px) 100vw, 640px" />Que voulez-vous dire par “le reste du code JavaScript va ici…” chatGPT ? Donnez-moi le code !
<img loading="lazy" decoding="async" width="640" height="334" src="https://beebom.com/wp-content/uploads/2023/05/ai-game-development-remaining-js-code.jpg?w=640" alt="chatgpt fournit utilement le reste du code JS" srcset="https://beebom.com/wp-content/uploads/2023/05/ai-game-development-remaining-js-code.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/ai-game-development-remaining-js-code.jpg?resize=300%2C157&quality=75&strip=all 300w" sizes="(max-width: 640px) 100vw, 640px" />
Comme il s’agit essentiellement du code d’origine (qui ne fonctionne pas), il ne s’exécute pas. Et comme je ne pouvais pas (et ne voulais pas) comprendre où était exactement le problème, j’ai essayé de dire à ChatGPT que le code ne fonctionnait pas.
ChatGPT m’a donné un nouveau code mis à jour. Et il m’a dit, je pourrais ajouter avec beaucoup de confiance, qu’il avait résolu le problème qui empêchait le code de s’exécuter.
<img loading="lazy" decoding="async" width="640" height="395" src="https://beebom.com/wp-content/uploads/2023/05/chatgpt-bug-fixes.jpg?w=640" alt="correction de bogues avec ai pour développer un jeu" srcset="https://beebom.com/wp-content/uploads/2023/05/chatgpt-bug-fixes.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/chatgpt-bug-fixes.jpg?resize=300%2C185&quality=75&strip=all 300w, https://beebom.com/wp-content/uploads/2023/05/chatgpt-bug-fixes.jpg?resize=100%2C62&quality=75&strip=all 100w, https://beebom.com/wp-content/uploads/2023/05/chatgpt-bug-fixes.jpg?resize=200%2C124&quality=75&strip=all 200w, https://beebom.com/wp-content/uploads/2023/05/chatgpt-bug-fixes.jpg?resize=250%2C155&quality=75&strip=all 250w, https://beebom.com/wp-content/uploads/2023/05/chatgpt-bug-fixes.jpg?resize=400%2C248&quality=75&strip=all 400w, https://beebom.com/wp-content/uploads/2023/05/chatgpt-bug-fixes.jpg?resize=500%2C310&quality=75&strip=all 500w" sizes="(max-width: 640px) 100vw, 640px" />Dites ce que vous voulez à propos de ChatGPT, il est très confiant dans ses capacités épouvantables de correction de bogues.
Cependant, lors des tests, le même problème persistait. Cette fois, j’ai décidé de dire à ChatGPT quel problème je rencontrais avec le code. Il a rapidement proposé une version mise à jour du code, et cette fois-ci, il a pu résoudre le problème, heureusement.
<img loading="lazy" decoding="async" width="640" height="391" src="https://beebom.com/wp-content/uploads/2023/05/ai-game-development-fixed-code.jpg?w=640" alt="code fixe de développement de jeux ai" srcset="https://beebom.com/wp-content/uploads/2023/05/ai-game-development-fixed-code.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/ai-game-development-fixed-code.jpg?resize=300%2C183&quality=75&strip=all 300w, https://beebom.com/wp-content/uploads/2023/05/ai-game-development-fixed-code.jpg?resize=100%2C62&quality=75&strip=all 100w" sizes="(max-width: 640px) 100vw, 640px" />
Le nouveau code fonctionnait correctement et j’avais un jeu de Whack-a-Mole auquel je pouvais jouer sur mon navigateur. C’est amusant, non ?
Itérer et améliorer le jeu
J’ai remarqué une chose bizarre. Le jeu a semblé s’arrêter de fonctionner après quelques secondes. Les taupes n’ont tout simplement pas regardé à travers. En parcourant le code, j’ai rapidement réalisé que le jeu était codé en dur pour fonctionner pendant 10 secondes.
<img loading="lazy" decoding="async" width="640" height="383" src="https://beebom.com/wp-content/uploads/2023/05/game-duration-hardcoded.jpg?w=640" alt="durée du jeu codée en dur" srcset="https://beebom.com/wp-content/uploads/2023/05/game-duration-hardcoded.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/game-duration-hardcoded.jpg?resize=300%2C180&quality=75&strip=all 300w" sizes="(max-width: 640px) 100vw, 640px" />
C’est bien, mais je voulais laisser le joueur choisir lui-même la durée du jeu. Au lieu de comprendre comment faire cela, j’ai simplement demandé à ChatGPT de le faire pour moi.
<img loading="lazy" decoding="async" width="640" height="365" src="https://beebom.com/wp-content/uploads/2023/05/game-development-with-ai-changing-duration.jpg?w=640" alt="développement de jeu avec une durée changeante d'ai" srcset="https://beebom.com/wp-content/uploads/2023/05/game-development-with-ai-changing-duration.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/game-development-with-ai-changing-duration.jpg?resize=300%2C171&quality=75&strip=all 300w" sizes="(max-width: 640px) 100vw, 640px" />
Avec le nouveau code, le jeu dispose désormais d’un champ de saisie dans lequel le joueur peut entrer le nombre de secondes pendant lesquelles le jeu doit s’exécuter, puis démarrer le jeu.
<img loading="lazy" decoding="async" width="640" height="284" src="https://beebom.com/wp-content/uploads/2023/05/whack-a-mole-game-running-in-browser.jpg?w=640" alt="frapper un jeu de taupe en cours d'exécution dans le navigateur" srcset="https://beebom.com/wp-content/uploads/2023/05/whack-a-mole-game-running-in-browser.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/whack-a-mole-game-running-in-browser.jpg?resize=300%2C133&quality=75&strip=all 300w, https://beebom.com/wp-content/uploads/2023/05/whack-a-mole-game-running-in-browser.jpg?resize=358%2C160&quality=75&strip=all 358w" sizes="(max-width: 640px) 100vw, 640px" />
Certes, le jeu ne ressemble à rien d’extraordinaire, et l’interface utilisateur est… utilisable, au mieux. Cependant, cela montre que ChatGPT peut, avec beaucoup de travail, créer un jeu pour vous à partir de zéro.
Tests et réflexions finales
Après avoir joué quelques tours de Whack-a-Mole, j’ai décidé d’essayer de faire en sorte que ChatGPT construise également autre chose. Cette fois-ci, j’ai opté pour Hangman. Des hijinks similaires ont suivi mes tentatives pour que ChatGPT me donne un code de travail pour le jeu, cependant, cette fois-ci, j’ai dû être beaucoup plus précis dans mon invite pour obtenir le code corrigé.
ChatGPT peut, la plupart du temps, identifier des bogues dans le code. Cependant, d’après ce que j’ai vécu jusqu’à présent, il n’est bon que pour trouver des problèmes de syntaxe. Il ne pouvait pas, par exemple, comprendre avant plusieurs tentatives que le problème avec le code qu’il écrivait était un simple cas de conversion de caractères majuscules en minuscules.
<img loading="lazy" decoding="async" width="640" height="342" src="https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fixing-1.jpg?w=640" alt="développement de jeux avec corrections de bugs ai" srcset="https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fixing-1.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fixing-1.jpg?resize=300%2C160&quality=75&strip=all 300w, https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fixing-1.jpg?resize=360%2C193&quality=75&strip=all 360w, https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fixing-1.jpg?resize=375%2C201&quality=75&strip=all 375w" sizes="(max-width: 640px) 100vw, 640px" />
<img loading="lazy" decoding="async" width="640" height="371" src="https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fixing-2.jpg?w=640" alt="développer des jeux avec ai " srcset="https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fixing-2.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fixing-2.jpg?resize=300%2C174&quality=75&strip=all 300w" sizes="(max-width: 640px) 100vw, 640px" />
<img loading="lazy" decoding="async" width="640" height="377" src="https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fix-4.jpg?w=640" alt="construire un jeu avec ai" srcset="https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fix-4.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fix-4.jpg?resize=300%2C177&quality=75&strip=all 300w" sizes="(max-width: 640px) 100vw, 640px" />
<img loading="lazy" decoding="async" width="640" height="397" src="https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fix-3.jpg?w=640" alt="essayer de corriger des bogues dans le développement de jeux avec ai" srcset="https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fix-3.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fix-3.jpg?resize=300%2C186&quality=75&strip=all 300w, https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fix-3.jpg?resize=100%2C62&quality=75&strip=all 100w, https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fix-3.jpg?resize=200%2C124&quality=75&strip=all 200w, https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fix-3.jpg?resize=250%2C155&quality=75&strip=all 250w, https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fix-3.jpg?resize=400%2C248&quality=75&strip=all 400w, https://beebom.com/wp-content/uploads/2023/05/hangman-bug-fix-3.jpg?resize=500%2C310&quality=75&strip=all 500w" sizes="(max-width: 640px) 100vw, 640px" />
<img loading="lazy" decoding="async" width="640" height="395" src="https://beebom.com/wp-content/uploads/2023/05/hangman-final-bug-fix.jpg?w=640" alt="enfin, le développement du jeu chatGPT a pu corriger le bogue" srcset="https://beebom.com/wp-content/uploads/2023/05/hangman-final-bug-fix.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/hangman-final-bug-fix.jpg?resize=300%2C185&quality=75&strip=all 300w, https://beebom.com/wp-content/uploads/2023/05/hangman-final-bug-fix.jpg?resize=100%2C62&quality=75&strip=all 100w, https://beebom.com/wp-content/uploads/2023/05/hangman-final-bug-fix.jpg?resize=200%2C124&quality=75&strip=all 200w, https://beebom.com/wp-content/uploads/2023/05/hangman-final-bug-fix.jpg?resize=250%2C155&quality=75&strip=all 250w, https://beebom.com/wp-content/uploads/2023/05/hangman-final-bug-fix.jpg?resize=400%2C248&quality=75&strip=all 400w, https://beebom.com/wp-content/uploads/2023/05/hangman-final-bug-fix.jpg?resize=500%2C310&quality=75&strip=all 500w" sizes="(max-width: 640px) 100vw, 640px" />ChatGPT pense toujours qu’il a le bon code… même quand ce n’est pas le cas
Du point de vue de la syntaxe, le code était parfaitement correct. Cependant, les caractères que le joueur devine sont en majuscules, et comme le code les vérifiait par rapport au mot prédéfini – qui est en minuscules – il ne les a tout simplement jamais appariés correctement.
Ce qui est cool, c’est que ChatGPT a même mis le code pour afficher une image représentative du pendu. Il ne me restait plus qu’à créer les différentes étapes du parcours du bourreau. En fait, je peux même demander à ChatGPT de me dire comment créer les images.
<img loading="lazy" decoding="async" width="640" height="438" src="https://beebom.com/wp-content/uploads/2023/05/hangman-image-help-chatgpt.jpg?w=640" alt="développement de jeux avec ai obtenir de l'aide pour créer des images de pendu" srcset="https://beebom.com/wp-content/uploads/2023/05/hangman-image-help-chatgpt.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/hangman-image-help-chatgpt.jpg?resize=300%2C205&quality=75&strip=all 300w, https://beebom.com/wp-content/uploads/2023/05/hangman-image-help-chatgpt.jpg?resize=353%2C243&quality=75&strip=all 353w" sizes="(max-width: 640px) 100vw, 640px" />
Bien sûr, la qualité de ces images est assez odieuse, mais c’est parce que je ne voulais pas être dérangé par la création d’images appropriées dans Photoshop, et j’ai décidé de prendre des captures d’écran à la place.
<img decoding="async" loading="lazy" width="640" height="232" src="https://beebom.com/wp-content/uploads/2023/05/hangman-game-running.jpg?w=640" alt="Faire des jeux avec l'IA est amusant et légèrement ennuyeux" srcset="https://beebom.com/wp-content/uploads/2023/05/hangman-game-running.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/hangman-game-running.jpg?resize=300%2C109&quality=75&strip=all 300w" sizes="(max-width: 640px) 100vw, 640px" />
<img decoding="async" loading="lazy" width="640" height="222" src="https://beebom.com/wp-content/uploads/2023/05/hangman-game-end.jpg?w=640" alt="Faire des jeux avec l'IA est amusant et légèrement ennuyeux" srcset="https://beebom.com/wp-content/uploads/2023/05/hangman-game-end.jpg?quality=75&strip=all 640w, https://beebom.com/wp-content/uploads/2023/05/hangman-game-end.jpg?resize=300%2C104&quality=75&strip=all 300w" sizes="(max-width: 640px) 100vw, 640px" />
L’IA est décemment bonne en codage, mais ce n’est pas parfait
L’essentiel de mon développement de jeux avec l’expérience de l’IA est simple : des outils comme ChatGPT peuvent faire un très bon travail d’écriture de code. Cependant, ChatGPT ne semble pas écrire le bon code pour les choses du premier coup. Si quoi que ce soit, vous sera devez lui demander plusieurs descriptions des problèmes auxquels vous êtes confrontés avant de pouvoir vous fournir un morceau de code qui fonctionne réellement comme vous le souhaitez.
Pourtant, c’est impressionnant dans ce qu’il peut faire, et vous pouvez, au moins, obtenir une version rudimentaire de ce que vous cherchez à développer et à améliorer. Si vous vous demandez cependant si vous allez créer des jeux complets pour la distribution, ChatGPT (et les modèles d’IA en général) ne sont pas là ; pas encore.
to beebom.com
Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931
Jeu de briques
Snake
Pacman
Bubble