Comment créer un clone de Wordle en JavaScript
Dans cet article, vous allez recréer le jeu de devinette Wordle. Cet article couvre la logique de base du jeu mais n’implémente pas le partage de vos résultats. L’article ne couvre pas non plus la fonctionnalité qui génère les statistiques du jeu. Ce tutoriel est destiné aux développeurs frontaux débutants qui souhaitent créer un projet JavaScript amusant et simple. Conditions préalables Ce tutoriel suppose une compréhension de base de.. : Comment construire le clone de Wordle Voici les étapes à suivre pour créer le clone de Wordle : Configuration du projet Création du plateau de jeu Création du clavier à l’écran Accepter les entrées de l’utilisateur Ajout de notifications Faire en sorte que le clavier à l’écran génère des entrées Ajout d’une animation Configuration du projet Avant de construire le jeu, vous devez mettre en place certains composants. Tout d’abord, vous devez créer un dossier pour tout le code source de notre clone. Appelez ce dossier « build ». Après avoir fait cela, configurez votre serveur de développement. Serveur réel Vous allez utiliser un serveur de développement appelé live-server. Cette étape est facultative, mais elle vous évite de devoir recharger la page après chaque modification du code source. Installez live-server en tapant ce qui suit dans votre terminal : npm install live-server HTML Setup Dans le build, créez un fichier HTML et nommez-le index.html. Mettez le code suivant dans ce fichier : Clone de Wordle Le code HTML crée un en-tête pour notre jeu et crée le conteneur pour le plateau de jeu. Vous allez utiliser une bibliothèque JavaScript appelée Toastr pour les notifications dans le jeu et une bibliothèque CSS appelée Animate.css pour les animations du plateau. Pour les inclure dans votre projet, ajoutez les liens suivants à l’en-tête de votre fichier index.html. Ces liens récupèreront les CSS pour Animate.css et Toastr. Placez le code suivant dans index.html, juste avant la balise de fermeture body : Ce code récupérera le JavaScript de Toastr et de jQuery (car Toastr en dépend). Configuration du JavaScript Votre JavaScript sera placé dans un fichier appelé script.js. Créez script.js, et placez-le dans build. Placez ce code en haut de script.js : importez { WORDS } de « ./words.js » ; const NUMBER_OF_GUESSES = 6 ; let guessesRemaining = NUMBER_OF_GUESSES ; let currentGuess = [] ; let nextLetter = 0 ; let rightGuessString = MOTS[Math.floor(Math.random() * MOTS.length)] console.log(rightGuessString) Cet extrait de code initialise les variables globales que nous utiliserons pour notre jeu et choisit un mot aléatoire dans le tableau WORDS comme bonne réponse pour ce tour. Nous enregistrons également la bonne réponse dans la console, afin de déboguer notre code si nécessaire. La liste des mots autorisés que nous utiliserons sera codée en dur et stockée dans un tableau dans le fichier words.js. Créez words.js, dans build, et copiez le JavaScript de ce lien dans ce fichier. Words.js devrait ressembler à ceci : à quoi devrait ressembler words.js Configuration du CSS Nommez votre fichier CSS style.css. Style.css doit également être placé dans build. h1 { text-align : center ; } La seule configuration CSS dont nous avons besoin est un peu de code pour centrer le texte de notre en-tête Mise en place de l’ensemble Enfin, liez script.js en tant que module dans votre index.html, puis liez style.css. À ce stade, votre index.html devrait ressembler à ceci : Clone de Wordle et votre structure de fichiers devrait ressembler à ceci : capture d’écran de l’arborescence des fichiers Démarrez live-server en tapant ceci dans votre console : construction du serveur en direct C’est tout pour la configuration. Comment créer le plateau de jeu Vous allez créer le plateau de jeu en écrivant une fonction JavaScript. Appelons cette fonction initBoard. Ajoutez ce code à votre fichier script.js : function initBoard() { let board = document.getElementById(« game-board ») ; for (let i = 0 ; i < NUMBER_OF_GUESSES ; i++) { let row = document.createElement(« div ») row.className = « letter-row » (rangée de lettres) for (let j = 0 ; j < 5 ; j++) { let box = document.createElement(« div ») box.className = « boîte aux lettres » row.appendChild(box) } board.appendChild(row) } } initBoard() Que fait ce code ? initBoard crée une ligne pour chaque réponse donnée à l’utilisateur et crée 5 cases pour chaque ligne. Il y a une case pour chaque lettre de la réponse, et la fonction les rend toutes enfants de la ligne. initBoard ajoute ensuite chaque ligne au conteneur du tableau. Chaque ligne reçoit la classe letter-row, et chaque boîte reçoit la classe letter-box. Ensuite, vous allez styliser le tableau à l’aide de CSS. Placez le code suivant dans votre fichier style.css : #game-board { display : flex ; align-items : center ; flex-direction : column ; } .letter-box { border : 2px solid gray ; border-radius : 3px ; margin : 2px ; font-size : 2.5rem ; font-weight : 700 ; hauteur : 3rem ; width : 3rem ; display : flex ; justify-content : center ; align-items : center ; text-transform : uppercase ; } .filled-box { border : 2px solid black ; } .letter-row { affichage : flex ; } Ce CSS fait plusieurs choses : centre les rangées du tableau horizontalement et verticalement définit une hauteur, une largeur et une bordure pour chaque case du tableau crée un aspect distinct pour une case remplie d’une lettre A ce stade, lorsque vous chargez le fichier index.html dans votre navigateur, il devrait ressembler à ceci : capture d’écran du jeu Comment créer le clavier à l’écran La façon la plus simple de créer le clavier est d’utiliser le HTML. Ajoutez ce code à votre index.html, après le div du plateau de jeu : q w e r t y u i o p a s d f g h j k l Del z x c v b n m Entrez Maintenant, donnez du style au balisage en ajoutant ce CSS à la fin de style.css : #keyboard-cont { margin : 1rem 0 ; display : flex ; flex-direction : column ; align-items : center ; } #keyboard-cont div { display … Lire la suite