Comment créer votre propre jeu de mots

Comment fonctionne un jeu web comme Wordle ? Que devez-vous savoir pour créer votre propre jeu ?

Tous les jeux ne nécessitent pas une énorme équipe de développement et des années de développement pour être un succès. Wordle, par exemple, a été créé par Josh Wardle pour son partenaire Palak Shah en peu de temps, et malgré sa simplicité et très peu de fonctionnalités, son incroyable popularité lui a valu une rançon du New York Times.

Comment fonctionne un jeu web comme Wordle

Si vous avez une idée pour un jeu simple mais addictif qui pourrait attirer l’attention du monde et vous faire gagner beaucoup d’argent, il est tout à fait possible d’écrire vous-même une application Web comme Wordle.

Le framework de site Web Wordle est, comme tout site Web, HTML, un langage de balisage hypertexte. Il s’agit du code sur lequel tous les sites Web s’appuient pour indiquer à votre navigateur où placer les éléments lors du chargement de la page. Le site que vous lisez actuellement est codé en HTML, fournissant non seulement le contenu réel, mais aussi des instructions pour afficher ce contenu, de la position du menu à la taille de la police.

En plus du HTML, il existe le CSS, Cascading Style Sheets : il s’agit d’un complément 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 CSS, si vous avez plusieurs pages sur votre site, vous pouvez définir leurs propriétés visuelles une seule fois plutôt que par page.

Si vous voulez pouvoir créer des pages Web, vous devez apprendre le HTML et le CSS, bien que de nombreux services vous permettent de le faire sans écrire une seule ligne de code. Ces services offrent la possibilité de glisser-déposer vos éléments dans une interface très poussée et de prendre le contrôle de tout le HTML et CSS.

Pour qu’un site soit entièrement interactif comme Wordle, vous avez également besoin de JavaScript pour convertir les pages HTML et CSS statiques en pages plus dynamiques, qu’il s’agisse d’un champ de recherche ou d’une barre d’outils. JavaScript peut manipuler de la vidéo, 2D ou 3D, stocker des informations saisies par l’utilisateur, charger des données d’une base de données, effectuer des calculs, exécuter du code prédéfini en fonction d’une action particulière de l’utilisateur, etc.

Comme Josh Wardle l’a expliqué à TechCrunch, Wordle a été écrit en JavaScript, un code qui est chargé lors du chargement de la page, permettant au jeu d’être joué hors ligne une fois le chargement initial terminé. Les navigateurs modernes peuvent comprendre et exécuter JavaScript, qui dans notre cas charge un mot à partir d’une base de données, identifie l’entrée de l’utilisateur et fournit des informations pour chaque lettre.

Josh Wardle lui-même admet que le code du jeu n’est pas particulièrement complexe, ce qui explique qu’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 également possible de trouver des solutions en examinant simplement le code source du site.

Que devez-vous savoir pour créer votre propre jeu ?

Mais comment créez-vous vous-même un jeu comme Wordle ? La programmation nécessite un apprentissage, mais vous n’avez pas besoin de tout savoir sur HTML, CSS et JavaScript pour créer quelque chose au niveau Wordle. Comme expliqué sur Codecademy, une des techniques de programmation utilisées est une boucle for qui vérifie chaque lettre saisie et l’affiche dans la couleur appropriée.

Codecademy est l’un des sites où vous pouvez apprendre gratuitement HTML, CSS, JavaScript et de nombreux autres langages de développement Web. Les exercices sont bien structurés et vous apprenez toujours en les faisant directement dans votre navigateur. Vous verrez comment faire et vous pourrez voir directement les conséquences. Certaines fonctionnalités avancées et certains didacticiels nécessitent un abonnement payant, mais beaucoup peuvent déjà être appris gratuitement.

Treehouse va plus loin que Codecademy et vous devez payer 25 $/mois pour l’utiliser (essai gratuit disponible). C’est une ressource plus professionnelle et efficace pour apprendre HTML, CSS, JavaScript, etc., mais va bien au-delà de ce dont vous avez besoin pour un jeu comme Wordle. Réfléchissez si vous voulez aller plus loin.

Le contraire de Tree House, Dash . Le site ne couvre que les bases de HTML, CSS et JavaScript, mais il est entièrement gratuit et particulièrement adapté aux débutants. Tout est géré directement dans votre navigateur, et comme Codecademy, vous apprenez par la pratique à tirer pleinement parti de ce que ces langages ont à offrir.

Cette liste est loin d’être exhaustive, d’autant plus qu’il ne s’agit que de ressources en anglais, on les trouve facilement en français, mais elles sont une bonne base pour débuter l’apprentissage du HTML, du CSS et du JavaScript. A vous de jouer… et de coder !