Sie müssen das Wordle-Spiel gespielt haben. So können Sie mithilfe von JavaScript Ihre eigene Version von Wordle erstellen.

Worlde ist ein beliebtes Spiel, das Anfang 2022 die Welt im Sturm eroberte. Entwickler, die mit JavaScript noch nicht vertraut sind, sollten darüber nachdenken, das Wordle-Spiel neu zu erstellen oder zumindest eine einfachere Version davon zu erstellen.

Wie Wordle funktioniert

In Wordle gibt es ein geheimes Wort aus fünf Buchstaben. Der Spieler hat sechs Versuche und muss verschiedene fünfbuchstabige Wörter erraten, um zu sehen, wie nah sie dem geheimen Wort sind.

Nachdem der Spieler einen Tipp abgegeben hat, teilt Wordle dem Spieler mithilfe von Farben mit, wie nah er dem geheimen Wort ist. Wenn ein Buchstabe die Farbe Gelb hat, bedeutet das, dass der Buchstabe im geheimen Wort steht, aber an der falschen Position.

Die grüne Farbe zeigt dem Benutzer an, dass sich der Buchstabe im geheimen Wort und an der richtigen Position befindet, während die graue Farbe dem Spieler mitteilt, dass der Buchstabe nicht im Wort enthalten ist.

Einrichten des Entwicklungsservers

Der in diesem Projekt verwendete Code ist in a verfügbar GitHub-Repository Die Nutzung steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung. Wenn Sie sich eine Live-Version dieses Projekts ansehen möchten, können Sie sich dies hier ansehen Demo.

Das Projekt nutzt die Vite-Build-Tool über die Befehlszeilenschnittstelle (CLI) für Gerüste. Stellen Sie sicher, dass Yarn auf Ihrem Computer installiert ist, da es im Allgemeinen schneller ist als das Knotenpaketmanager (NPM). Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

Garn erstellen vite

Dadurch wird ein neues Vite-Projekt erstellt. Der Rahmen sollte sein Vanille und die Variante sollte auf eingestellt sein JavaScript. Führen Sie nun Folgendes aus:

Garn

Dadurch werden alle Abhängigkeiten installiert, die erforderlich sind, damit das Projekt funktioniert. Führen Sie nach dieser Installation den folgenden Befehl aus, um den Entwicklungsserver zu starten:

Garnentw

Einrichten des Spiels und Entwerfen der Tastatur

Öffnen Sie das Projekt in Ihrem Code-Editor und löschen Sie den Inhalt main.js Datei und stellen Sie sicher, dass Ihr Projektordner wie folgt aussieht:

Ersetzen Sie nun den Inhalt der index.html Datei mit dem folgenden Boilerplate-Code:

html>
<htmllang=„en“>
<Kopf>
<MetaZeichensatz=„UTF-8“ />
<Verknüpfungrel="Symbol"Typ=„image/svg+xml“href=„/vite.svg“ />
<MetaName=„Ansichtsfenster“Inhalt=„width=device-width, initial-scale=1.0“ />
<Titel>JS WordleTitel>
Kopf>


<Körper>
<divAusweis=„App“>
<div>
<h1>Wordle-Klonh1>
<divAusweis=„Kontrollen“>
<TasteAusweis=„restart-btn“>WiederholungTaste>
<TasteAusweis=„show-btn“>Zeige die AntwortTaste>
div>
<divAusweis="Nachricht">Warten Sie mal. Das Spiel wird geladen...div>
div>
<divAusweis="Schnittstelle">
<divAusweis="Planke">div>
<divKlasse="Klaviatur">div>
div>
div>
<SkriptTyp="Modul"src=„/main.js“>Skript>
Körper>
html>

Gehen Sie für das CSS zum GitHub-Repository dieses Projekts und kopieren Sie den Inhalt des style.css Datei in Ihre eigene style.css Datei.

Installieren Sie nun im Terminal das Toastify NPM-Paket, indem Sie den folgenden Befehl ausführen:

Garn hinzufügen toastify -S

Toastify ist ein beliebtes JavaScript-Paket, mit dem Sie dem Benutzer Benachrichtigungen anzeigen können. Als nächstes im main.js Datei, importieren Sie die style.css Datei und die toasten Dienstprogramm.

importieren"./style.css"
importieren Toasten aus'toastify-js'

Definieren Sie die folgenden Variablen, um die Interaktion mit den DOM-Elementen zu vereinfachen:

lassen Brett = dokumentieren.querySelector("#Planke");
lassen Nachricht = dokumentieren.querySelector("#Nachricht");
lassen Schlüssel = „QWERTYUIOPASDFGHJKLZXCVBNM“.Teilt("");
lassen restartBtn = dokumentieren.querySelector(„#restart-btn“);
lassen showBtn = dokumentieren.querySelector(„#show-btn“);
showBtn.setAttribute("Behinderte", "WAHR");
key.push("Rücktaste");
lassen Tastatur = dokumentieren.querySelector(".Klaviatur");

Einrichten des Spielbretts

Da Wordle ein Spiel ist, bei dem der Benutzer in sechs Versuchen ein Wort mit fünf Buchstaben erraten muss, definieren Sie eine Variable namens BoardContent das ein Array von sechs Arrays enthält. Definieren Sie dann die Variablen aktuelle Zeile Und currentBox um das Durchqueren zu erleichtern BoardContent.

lassen 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],
];
lassen aktuelleRow = 0;
lassen currentBox = 0;
lassen Geheimwort;

Um das Board mit fünf Feldern in jeder der sechs Zeilen mithilfe von HTML-Elementen darzustellen, verwenden Sie verschachtelte Schleifen, um die Elemente zu iterieren und zu erstellen. Hängen Sie sie abschließend an die Tafel an.

für (lassen ich = 0; ich <= 5; i++) {
lassen Zeile = dokumentieren.createElement('div')
für (lassen y = 0; y <= 4; y++) {
lassen Kasten = dokumentieren.createElement('Spanne');
 row.appendChild (Box);
 row.className = `Reihe-${i + 1}`
 }
 board.appendChild (Zeile);
}

Hinzufügen der Tastatur und Abhören der Tastatureingabe

Um die Tastatur zu erstellen, durchlaufen Sie die Tasten mit für jede, wodurch für jeden Eintrag ein Schaltflächenelement erstellt wird. Legen Sie den Text der Schaltfläche fest auf Rücktaste wenn der Eintrag ist *, andernfalls setzen Sie es auf den Eintragswert.

Weisen Sie zu Taste Klasse auf die Schaltfläche und legen Sie die fest Datenschlüssel Attribut auf den großgeschriebenen Eintragswert. Als Nächstes fügen Sie der Schaltfläche, die die Funktion aufruft, einen Click-Event-Listener hinzu insertKey mit dem großgeschriebenen Eingabewert.

Schlüssel.forEach(Eintrag => {
lassen Schlüssel = dokumentieren.createElement("Taste");
Wenn (Eintrag "*") {
 key.innerText = "Rücktaste";
 } anders {
 key.innerText = Eintrag;
 }
 key.className = "Taste";
 key.setAttribute(„Datenschlüssel“, Eintrag.toUpperCase());
 key.addEventListener("klicken", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
dokumentieren.querySelector(`button[data-key=${entry.toUpperCase()}]`).verwischen();
 }, 250)
 })
 keyboard.append (Taste);
})

Ein neues Wort von einer API abrufen

Wenn der Benutzer das Spiel zum ersten Mal lädt, sollte das Spiel ein neues fünfbuchstabiges Wort aus dem abrufen Zufälliges Wort API. Dieses Wort wird dann im gespeichert Geheimwort Variable.

FunktiongetNewWord() {
asynchronFunktionfetchWord() {
versuchen {
const Antwort = erwarten bringen(" https://random-word-api.herokuapp.com/word? Länge=5");
Wenn (response.ok) {
const Daten = erwarten Antwort.json();
zurückkehren Daten;
 } anders {
WurfneuFehler("Etwas ist schief gelaufen!")
 }
 } fangen (Fehler) {
 message.innerText = „Etwas ist schiefgelaufen.“ \N${Fehler}\nÜberprüfen Sie Ihre Internetverbindung.`;
 }
 }
 fetchWord().then(Daten => {
 SecretWord = Daten[0].toUpperCase();
 hauptsächlich();
 })
}

Im Codeblock oben ist die hauptsächlich Die Funktion wird ausgeführt, wenn das Zufallswort erfolgreich abgerufen wurde. Definieren Sie a hauptsächlich Funktion direkt unter dem getNewWord Funktion:

Funktionhauptsächlich(){
}

Um jedes Kästchen auf der Tafel zu gestalten, benötigen Sie eine Liste aller Kästchen in jeder Zeile. Deklarieren Sie eine Variable, Reihe das erfasst alle Zeilen im DOM. Stellen Sie außerdem die ein Nachricht Anzeigestil zu keiner:

 rows.forEach(Reihe => [...row.children].forEach(Kind => boxen.push (Kind)))
 boxen.forEach((Kasten) => {
 box.classList.add("leer");
 })
 message.style.display = "keiner";

Als nächstes fügen Sie a hinzu keyup Ereignis-Listener für das Fensterobjekt und prüfen, ob der freigegebene Schlüssel gültig ist. Wenn gültig, konzentrieren Sie sich auf die entsprechende Schaltfläche, simulieren Sie einen Klick und verwischen Sie ihn nach einer Verzögerung von 250 ms:

Fenster.addEventListener('keyup', (e) => {
Wenn (isValidCharacter (e.key)) {
dokumentieren.querySelector(`button[data-key=${e.key.toUpperCase()}]`).Fokus();
dokumentieren.querySelector(`button[data-key=${e.key.toUpperCase()}]`).klicken();
 setTimeout(() => {
dokumentieren.querySelector(`button[data-key=${e.key.toUpperCase()}]`).verwischen();
 }, 250)
 }
 })

Unter dem keyup Ereignis-Listener, richten Sie Ereignis-Listener für zwei Schaltflächen ein: showBtn Und restartBtn. Wenn der Spieler klickt showBtn, zeigen Sie eine Toastbenachrichtigung mit dem Wert an Geheimwort Variable.

Klicken restartBtn lädt die Seite neu. Stellen Sie außerdem sicher, dass Sie eine beifügen isValidCharacter Funktion zum Überprüfen, ob ein Schlüssel ein gültiges Zeichen ist.

 showBtn.addEventListener('klicken', () => {
 Toasten({
 Text: „Okay, gut! die Antwort ist ${secretWord}`,
 Dauer: 2500,
 Klassenname: "Alarm",
 }).showToast();
 })
 restartBtn.addEventListener('klicken', () => {
 location.reload();
 })
FunktionisValidCharacter(val) {
zurückkehren (val.match(/^[a-zA-Z]+$/) && (Wertlänge 1 || val "Rücktaste"))
 }

Außerhalb von hauptsächlich Funktion, erstellen Sie eine renderBox Funktion und stellen drei Parameter bereit: Reihe (die Zeilennummer), Kasten (der Boxindex innerhalb der Zeile) und Daten (Der zu aktualisierende Textinhalt).

FunktionrenderBox(Zeile, Box, Daten) {
 [...document.querySelector(`.row-${row}`).children][box].innerText = data;
}

Behandeln von Tastatureingaben mit einer Funktion

Um die wichtigsten Eingaben zu verarbeiten und das Board zu aktualisieren, erstellen Sie eine insertKey Funktion mit a Taste Parameter. Die Funktion sollte sich entsprechend dem übergebenen Parameter verhalten.

FunktioninsertKey(Taste) {
Wenn (Taste "Rücktaste".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
Wenn (aktuelleBox !== 0) {
 currentBox--;
 renderBox (currentRow + 1, currentBox, "");
 }
 } anders {
Wenn (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = key;
 renderBox (currentRow + 1, currentBox, key);
 currentBox++;
 }
Wenn (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 auswerten (aktuelleRow, Schlüssel);
 currentBox = 0;
 aktuelleRow++;
 }
 }
}

Bewertung der Vermutung des Spielers

Erstelle ein auswerten Funktion, die einen Zeilenparameter akzeptiert. Diese Funktion ist für die Bewertung der Schätzung des Spielers verantwortlich.

Funktionauswerten(Reihe){
}

Jedes Spiel hat eine Zeige die Antwort Schaltfläche, die erst erscheint, nachdem der Benutzer viermal geraten hat. Implementieren Sie also in der Funktion die Funktionalität, die genau das tut:

Wenn (aktuelleZeile 4) {
 showBtn.removeAttribute('Behinderte')
}

Definieren Sie dann die Schätzvariable und eine Antwortvariable, die prüft, ob die Buchstaben an der richtigen Position sind.

lassen rate = boardContent[row].join('').toUpperCase();
lassen Antwort = SecretWord.split("");

Der Algorithmus zum Färben von Kacheln wird sich hier als nützlich erweisen. Denken Sie daran, dass eine Kachel oder ein Buchstabe grün sein sollte, wenn er sich im Wort und an der richtigen Stelle befindet.

Befindet sich die Kachel im Wort, aber an der falschen Stelle, ist die Kachel gelb und schließlich ist die graue Farbe für Kacheln vorgesehen, die nicht im Wort vorkommen.

lassen Farben = raten
 .Teilt("")
 .Karte((Brief, IDX) => Buchstabe == Antwort[idx]? (answer[idx] = FALSCH): Brief)
 .Karte((Brief, IDX) =>
 Brief
? (idx = answer.indexOf (letter)) < 0
? "grau"
: (answer[idx] = "Gelb")
: "Grün"
);

Der oben angegebene Codeblock führt einen Element-für-Element-Vergleich zwischen den durch erraten Array und die antworten Array. Basierend auf den Ergebnissen dieses Vergleichs aktualisiert der Code die Farben Array.

Als nächstes definieren Sie a setColors Funktion, die die übernehmen kann Farben Array als Parameter und färben Sie die Kacheln entsprechend ein:

FunktionsetColor(Farben) {
 farben.forEach((Farbe, Index) => {
dokumentieren.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).style.backgroundColor = color;
dokumentieren.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).style.color= "Schwarz";
 [...document.querySelector(`.row-${row + 1}`).children][index].style.backgroundColor = color;
 })
}

Das Spiel ist nun abgeschlossen. Jetzt müssen Sie nur noch anrufen getNewWord Funktion, und schon kann es losgehen.

getNewWord();

Herzlichen Glückwunsch, Sie haben Wordle gerade neu erstellt.

Bringen Sie Ihre JavaScript-Kenntnisse auf die nächste Stufe, indem Sie Spiele neu erstellen

Als Anfänger eine neue Sprache zu lernen ist nicht einfach. Das Nachbilden von Spielen wie Tic-Tac-Toe, Hangman und Wordle in einer Sprache wie JavaScript kann Anfängern dabei helfen, die Konzepte der Sprache zu erlernen, indem sie sie in die Praxis umsetzen.