Comment fonctionne un jeu web comme Wordle ? Que faut-il connaître pour créer son propre jeu ?
Tous les jeux ne nécessitent pas une énorme équipe de développeurs et des années de développement pour être un énorme succès. Le jeu Wordle, par exemple, a été créé par Josh Wardle pour sa partenaire Palak Shah en peu de temps, et malgré sa simplicité et son nombre de fonctionnalités très restreint, sa popularité incroyable lui a valu d’être racheté par The New York Times.
Comment fonctionne un jeu web comme Wordle
Si vous avez une idée pour un jeu simple, mais addictif qui pourrait capter l’attention du monde entier et vous rapporter gros, sachez que coder une application web comme Wordle par vous-même est tout à fait possible.
Le framework du site Wordle est, comme n’importe quel site web, le HTML, HyperText Markup Language. C’est le code sur lequel repose tous les sites internet, disant à votre navigateur où placer les éléments lorsque la page se charge. Le site que vous lisez en ce moment est codé en HTML, servant non seulement le contenu à proprement parler, mais aussi les instructions pour afficher ce contenu, de la position des menus à la taille des polices.
En plus du HTML, on trouve du CSS, Cascading Style Sheets : c’est une addition au HTML pour faciliter la mise en page des éléments, qu’il s’agisse des propriétés d’une image ou d’un bloc de texte. Avec le CSS, si vous avez plusieurs pages sur votre site, vous pouvez définir ses propriétés visuelles une seule fois, plutôt que de le faire pour chaque page.
Si vous voulez pouvoir concevoir des pages web, vous devez apprendre le HTML et le CSS, bien que de nombreux services permettent de le faire sans avoir à écrire la moindre ligne de code. Ces services offrent la possibilité de glisser et déposer vos éléments dans une interface très évoluée et s’occupent de gérer tout le HTML et le CSS.
Pour qu’un site soit totalement interactif comme l’est Wordle, il vous faut aussi du JavaScript, qui vient transformer des pages HTML et CSS statiques en pages plus dynamiques, qu’il s’agisse d’une boîte de recherche ou d’une barre d’outils. Le JavaScript peut gérer les vidéos, la 2D ou la 3D, enregistrer les informations saisies par l’utilisateur, charger des données depuis une base de données, effectuer des calculs, exécuter un code prédéfini selon telle ou telle action de l’utilisateur, etc.
Comme Josh Wardle l’expliquait à TechCrunch, Wordle a été écrit en JavaScript, du code qui se télécharge au moment du chargement de la page, permettant de jouer la partie hors ligne une fois le téléchargement initial effectué. Les navigateurs modernes peuvent comprendre et exécuter le JavaScript, qui, dans notre cas, va charger un mot de la base de données, identifier les saisies de l’utilisateur et donner les informations pour chaque lettre.
Josh Wardle admet lui-même que le code du jeu n’est pas particulièrement complexe, ce qui explique pourquoi il était possible de télécharger Wordle dans son intégralité, avant que le NYT ne l’achète, avec tous les mots de sa base de données. Il était aussi possible de trouver les solutions simplement en inspectant le code source du site.
Que faut-il connaître pour créer son propre jeu ?
Mais alors, comment construit-on soi-même un jeu comme Wordle ? Il faut apprendre à coder, mais vous n’avez pas besoin de tout connaître du HTML, du CSS et du JavaScript pour concevoir quelque chose du niveau de Wordle. Comme expliqué sur Codecademy, l’une des techniques de programmation utilisée est la boucle for, pour vérifier chaque lettre saisie et l’afficher dans la couleur correspondante.
Codecademy est l’un des sites qui permettent d’apprendre le HTML, le CSS, le JavaScript et bien d’autres langages de développement web gratuitement. Les exercices sont bien structurés et vous apprenez toujours en faisant, directement dans votre navigateur. Vous verrez comment faire et pourrez constater les conséquences directement. Certaines fonctionnalités avancées et tutoriels nécessitent un abonnement payant, mais il y a déjà beaucoup à découvrir gratuitement.
Treehouse va plus loin que Codecademy, et il vous faut débourser 25 $ par mois pour l’utiliser (un essai gratuit est disponible). C’est une ressource plus professionnelle et efficace pour apprendre le HTML, le CSS, le JavaScript et autre, mais cela va bien au-delà de ce dont vous aurez besoin pour un jeu comme Wordle. À envisager si vous voulez aller plus loin.
À l’opposé de Treehouse, Dash. Le site ne couvre que les basiques du HTML, du CSS et du JavaScript, mais c’est totalement gratuit, et particulièrement intéressant pour les débutants. Tout est géré directement dans votre navigateur et comme Codecademy, vous apprenez en faisant les choses, pour prendre toute la mesure de ce que ces langages ont à offrir.
Cette liste n’est pas exhaustive, loin de là, d’autant que ce ne sont là que des ressources en anglais, on en trouve en français assez facilement, mais ce sont des bonnes bases pour vous lancer dans l’apprentissage du HTML, du CSS et du JavaScript. À vous de jouer… et de coder !
Source link
