Vous devez avoir joué au jeu Wordle. Voici comment vous pouvez créer votre propre version de Wordle en utilisant JavaScript.
Worlde est un jeu populaire qui a pris d'assaut le monde au début de 2022. Recréer le jeu Wordle ou au moins en créer une version plus simple est quelque chose que les développeurs novices en JavaScript devraient envisager.
Comment Wordle fonctionne
Dans Wordle, il y a un mot secret de cinq lettres. Le joueur a six essais et doit deviner différents mots de cinq lettres pour voir à quel point ils sont proches du mot secret.
Une fois que le joueur a soumis une supposition, Wordle utilise des couleurs pour indiquer au joueur à quel point il est proche du mot secret. Si une lettre a la couleur jaune, cela signifie que la lettre est dans le mot secret, mais dans la mauvaise position.
La couleur verte indique à l'utilisateur que la lettre est dans le mot secret et dans la bonne position, tandis que la couleur grise indique au joueur que la lettre n'est pas dans le mot.
Configuration du serveur de développement
Le code utilisé dans ce projet est disponible dans un Référentiel GitHub et est libre d'utilisation sous la licence MIT. Si vous voulez jeter un œil à une version live de ce projet, vous pouvez consulter ceci démo.
Le projet utilise le Outil de construction Vite via le Interface de ligne de commande (CLI) pour échafaudage. Assurez-vous que Yarn est installé sur votre ordinateur car il est généralement plus rapide que le Gestionnaire de paquets de nœuds (NPM). Ouvrez votre terminal et exécutez la commande suivante :
fil créer vite
Cela créera un nouveau projet Vite. Le cadre doit être Vanille et la variante doit être définie sur Javascript. Exécutez maintenant :
fil
Cela installera toutes les dépendances nécessaires pour faire fonctionner le projet. Après cette installation, exécutez la commande suivante pour démarrer le serveur de développement :
dev de filConfiguration du jeu et conception du clavier
Ouvrez le projet dans votre éditeur de code, effacez le contenu du main.js et assurez-vous que votre dossier de projet ressemble à ceci :
Maintenant, remplacez le contenu du index.html fichier avec le code passe-partout suivant :
html>
<htmllangue="fr"><diriger>
<métajeu de caractères="UTF-8" />
<lienrel="icône"taper="image/svg+xml"href="/vite.svg" />
<métanom="fenêtre"contenu="width=device-width, initial-scale=1.0" />
<titre>JS Wordletitre>
diriger><corps>
<dividentifiant="application">
<div>
<h1>Wordle Cloneh1>
<dividentifiant="contrôles">
<boutonidentifiant="redémarrer-btn">Rejouerbouton>
<boutonidentifiant="show-btn">Montrer la réponsebouton>
div>
<dividentifiant="message">S'il vous plaît, attendez. Le jeu est en cours de chargement...div>
div>
<dividentifiant="interface">
<dividentifiant="conseil">div>
<divclasse="clavier">div>
div>
div>
<scénariotaper="module"src="/main.js">scénario>
corps>
html>
Pour le CSS, rendez-vous sur le référentiel GitHub de ce projet et copiez le contenu du style.css fichier dans votre propre style.css déposer.
Maintenant, dans le terminal, installez le package Toastify NPM en exécutant la commande suivante :
fil ajouter toastify -S
Toastify est un package JavaScript populaire qui vous permet d'afficher des alertes à l'utilisateur. Ensuite, dans le main.js fichier, importez le style.css dossier et le trinquer utilitaire.
importer"./style.css"
importer Griller depuis'toastify-js'
Définissez les variables suivantes pour faciliter l'interaction avec les éléments DOM :
laisser planche = document.querySelector("#conseil");
laisser msg = document.querySelector("#message");
laisser clés = "QWERTYUIOPASDFGHJKLZXCVBNM".diviser("");
laisser redémarrageBtn = document.querySelector("#restart-btn");
laisser showBtn = document.querySelector("#show-btn");
showBtn.setAttribute("désactivé", "vrai");
touches.pousser("Retour arrière");
laisser clavier = document.querySelector(".clavier");
Mise en place du plateau de jeu
Étant donné que Wordle est un jeu où l'utilisateur doit deviner un mot de cinq lettres en six essais, définissez une variable appelée ConseilContenu qui contient un tableau de six tableaux. Définissez ensuite les variables ligneactuelle et currentBox pour faciliter la traversée ConseilContenu.
laisser boardContent = [
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
];
laisser ligneactuelle = 0;
laisser CurrentBox = 0;
laisser mot secret;
Pour afficher le tableau avec cinq cases dans chacune des six lignes à l'aide d'éléments HTML, utilisez des boucles imbriquées pour itérer et créer les éléments. Enfin, ajoutez-les au tableau.
pour (laisser je = 0; je <= 5; je++) {
laisser ligne = document.createElement('div')
pour (laisser y = 0; y <= 4; y++) {
laisser boîte = document.createElement('portée');
row.appendChild (boîte);
row.className = `ligne-${i + 1}`
}
board.appendChild (ligne);
}Ajout du clavier et écoute de la saisie au clavier
Pour créer le clavier, parcourez les touches à l'aide de pour chaque, en créant un élément de bouton pour chaque entrée. Définissez le texte du bouton sur Retour arrière si l'entrée est *, sinon réglez-le sur la valeur d'entrée.
Attribuez le clé classe sur le bouton et définissez la clé de données attribut à la valeur d'entrée en majuscule. Ensuite, ajoutez un écouteur d'événement click au bouton qui appelle la fonction insertKey avec la valeur d'entrée en majuscule.
keys.forEach(entrée => {
laisser clé = document.createElement("bouton");
si (entrée "*") {
key.innerText = "Retour arrière";
} autre {
key.innerText = entrée ;
}
key.className = "clé";
clé.setAttribute("clé de données", entrée.toUpperCase());
key.addEventListener("Cliquez sur", () => {
insertKey (entry.toUpperCase())
setTimeout(() => {
document.querySelector(`bouton[clé-de-données=${entry.toUpperCase()}]`).se brouiller();
}, 250)
})
keyboard.append (clé);
})
Obtenir un nouveau mot à partir d'une API
Lorsque l'utilisateur charge le jeu pour la première fois, le jeu doit récupérer un nouveau mot de cinq lettres à partir du Mot aléatoire API. Ce mot est ensuite stocké dans le mot secret variable.
fonctionobtenirNouveauMot() {
asynchronefonctionrécupérerMot() {
essayer {
constante réponse = attendre aller chercher(" https://random-word-api.herokuapp.com/word? longueur=5");
si (réponse.ok) {
constante données = attendre réponse.json();
retour données;
} autre {
lancernouveauErreur("Quelque chose s'est mal passé !")
}
} attraper (erreur) {
message.innerText = `Quelque chose s'est mal passé. \n${erreur}\nVérifiez votre connexion Internet.`;
}
}
chercherMot().then(données => {
motsecret = données[0].toUpperCase();
principal();
})
}
Dans le bloc de code ci-dessus, le principal La fonction s'exécute si le mot aléatoire est récupéré avec succès. Définir un principal fonction juste en dessous de obtenirNouveauMot fonction:
fonctionprincipal(){
}
Pour styliser chaque case du tableau, vous aurez besoin d'une liste de toutes les cases de chaque ligne. déclarer une variable, ligne qui récupère toutes les lignes du DOM. Aussi, réglez le message style d'affichage à aucun:
lignes.forEach(ligne => [...ligne.enfants].forEach(enfant => boxes.push (enfant)))
cases.forEach((boîte) => {
box.classList.add("vide");
})
message.style.display = "aucun";
Ensuite, ajoutez un keyup écouteur d'événement à l'objet fenêtre et vérifiez si la clé libérée est valide. Si valide, concentrez-vous sur le bouton correspondant, simulez un clic, et floutez-le après un délai de 250 ms :
fenêtre.addEventListener('keyup', (e) => {
si (isValidCharacter (e.key)) {
document.querySelector(`bouton[clé-de-données=${e.key.toUpperCase()}]`).se concentrer();
document.querySelector(`bouton[clé-de-données=${e.key.toUpperCase()}]`).Cliquez sur();
setTimeout(() => {
document.querySelector(`bouton[clé-de-données=${e.key.toUpperCase()}]`).se brouiller();
}, 250)
}
})
Sous le keyup écouteur d'événement, configurez des écouteurs d'événement pour deux boutons: afficherBtn et redémarrageBtn. Lorsque le joueur clique afficherBtn, affiche une notification toast avec la valeur du mot secret variable.
En cliquant redémarrageBtn recharge la page. Assurez-vous également d'inclure un estValideCaractère fonction pour vérifier si une clé est un caractère valide.
showBtn.addEventListener('Cliquez sur', () => {
Griller({
texte: `D'accord, d'accord! la réponse est ${mot secret}`,
durée: 2500,
nom du cours: "alerte",
}).showToast();
})
restartBtn.addEventListener('Cliquez sur', () => {
location.reload();
})
fonctionestValideCaractère(val) {
retour (val.match(/^[a-zA-Z]+$/) && (longueur val. 1 || val "Retour arrière"))
}
En dehors de principal fonction, créez une renderBox fonction et fournir trois paramètres: ligne (le numéro de ligne), boîte (l'index de la boîte dans la ligne), et données (le contenu du texte à mettre à jour).
fonctionrenderBox(ligne, boîte, données) {
[...document.querySelector(`.row-${ligne}`).enfants][box].innerText = données;
}
Gestion de la saisie au clavier avec une fonction
Pour gérer les entrées clés et mettre à jour la carte, créez un insertKey fonctionner avec un clé paramètre. La fonction doit se comporter en fonction du paramètre passé.
fonctioninsertKey(clé) {
si (clé "Retour arrière".toUpperCase() && currentRow < boardContent.length) {
boardContent[currentRow][currentBox] = 0;
si (currentBox !== 0) {
currentBox-- ;
renderBox (currentRow + 1, CurrentBox, "");
}
} autre {
si (currentRow < boardContent.length) {
boardContent[currentRow][currentBox] = clé ;
renderBox (currentRow + 1, currentBox, clé);
currentBox++;
}
si (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
évaluer (currentRow, clé);
CurrentBox = 0;
ligneCourante++ ;
}
}
}Évaluation de la supposition du joueur
Créé un évaluer fonction qui accepte un paramètre de ligne. Cette fonction est chargée d'évaluer la supposition du joueur.
fonctionévaluer(ligne){
}
Chaque jeu a un Montrer la réponse bouton qui n'apparaît qu'après que l'utilisateur a fait quatre suppositions. Ainsi, dans la fonction, implémentez la fonctionnalité qui fait exactement cela :
si (ligneactuelle 4) {
showBtn.removeAttribute('désactivé')
}
Définissez ensuite la variable de devinette et une variable de réponse qui vérifie si les lettres sont dans la bonne position.
laisser devine = boardContent[ligne].join('').toUpperCase();
laisser réponse = motsecret.split("");
L'algorithme de coloration des tuiles sera utile ici. Rappelez-vous qu'une tuile ou une lettre doit être verte si elle se trouve dans le mot et au bon endroit.
Si la tuile est dans le mot mais au mauvais endroit, la tuile est jaune et enfin, la couleur grise est pour les tuiles qui ne sont pas dans le mot.
laisser couleurs = deviner
.diviser("")
.carte((lettre, idx) => lettre == réponse[idx]? (réponse[idx] = FAUX): lettre)
.carte((lettre, idx) =>
lettre
? (idx = answer.indexOf (lettre)) < 0
? "gris"
: (réponse[idx] = "jaune")
: "vert"
);
Le bloc de code ci-dessus effectue une comparaison élément par élément entre le deviner tableau et le répondre déployer. Sur la base des résultats de cette comparaison, le code met à jour le couleurs déployer.
Ensuite, définissez un setColors fonction qui peut prendre en charge couleurs array en tant que paramètre et colorez les tuiles de manière appropriée :
fonctionsetColor(couleurs) {
couleurs.forEach((couleur, indice) => {
document.querySelector(`bouton[clé-de-données=${deviner[index].toUpperCase()}]`).style.backgroundColor = couleur;
document.querySelector(`bouton[clé-de-données=${deviner[index].toUpperCase()}]`).style.color= "noir";
[...document.querySelector(`.row-${ligne + 1}`).enfants][index].style.backgroundColor = couleur;
})
}
Le jeu est maintenant terminé. Il ne vous reste plus qu'à appeler le obtenirNouveauMot fonction, et vous êtes prêt à partir.
getNouveauMot();
Félicitations, vous venez de recréer Wordle.
Faites passer vos compétences en JavaScript au niveau supérieur en recréant des jeux
Apprendre une nouvelle langue en tant que débutant n'est pas facile. Recréer des jeux comme Tic-tac-toe, Hangman et Wordle dans un langage comme JavaScript peut aider les débutants à maîtriser les concepts du langage en les mettant en pratique.
