Sådan bygger du en Wordle-klon med JavaScript

Worlde er et populært spil, der tog verden med storm i begyndelsen af ​​2022. At genskabe Wordle-spillet eller i det mindste bygge en enklere version af det er noget, som udviklere, der er nye til JavaScript, bør overveje.

Hvordan Wordle fungerer

I Wordle er der et hemmeligt ord på fem bogstaver. Spilleren har seks forsøg og skal gætte forskellige ord på fem bogstaver for at se, hvor tæt de er på det hemmelige ord.

Efter at spilleren har indsendt et gæt, bruger Wordle farver til at fortælle spilleren, hvor tæt de er på det hemmelige ord. Hvis et bogstav har farven gul, betyder det, at bogstavet er i det hemmelige ord, men i den forkerte position.

Den grønne farve fortæller brugeren, at bogstavet er i det hemmelige ord og i den rigtige position, mens den grå farve fortæller spilleren, at bogstavet ikke er i ordet.

Opsætning af udviklingsserveren

Projektet bruger Vite byggeværktøj via Kommandolinjegrænseflade (CLI) til stilladser. Sørg for, at du har Garn installeret på din computer, fordi det generelt er hurtigere end Node Package Manager (NPM). Åbn din terminal og kør følgende kommando:

garn skabe vite

Dette vil oprette et nyt Vite-projekt. Rammen skal være Vanilje og varianten skal indstilles til JavaScript. Kør nu:

garn

Dette vil installere alle de afhængigheder, der er nødvendige for at få projektet til at fungere. Efter denne installation skal du køre følgende kommando for at starte udviklingsserveren:

garn dev

Opsætning af spillet og design af tastaturet

Åbn projektet i din kodeeditor, ryd indholdet af main.js fil, og sørg for, at din projektmappe ser sådan ud:

Udskift nu indholdet af index.html fil med følgende kedelkode:

html>
<htmllang="da">
<hoved>
<metategnsæt="UTF-8" />
<linkrel="ikon"type="image/svg+xml"href="/vite.svg" />
<metanavn="udsigtsport"indhold="width=device-width, initial-scale=1.0" />
<titel>JS Wordletitel>
hoved>
<legeme>
<divid="app">
<div>
<h1>Wordle Cloneh1>
<divid="kontroller">
<knapid="genstart-btn">Genafspilningknap>
<knapid="vis-btn">Vis svarknap>
div>
<divid="besked">Vent venligst. Spillet indlæses...div>
div>
<divid="grænseflade">
<divid="bestyrelse">div>
<divklasse="tastatur">div>
div>
div>
<manuskripttype="modul"src="/main.js">manuskript>
legeme>
html>

For CSS'en skal du gå over til dette projekts GitHub Repository og kopiere indholdet af style.css fil i din egen style.css fil.

Installer nu Toastify NPM-pakken i terminalen ved at køre følgende kommando:

garn tilføj toastify -S

Toastify er en populær JavaScript-pakke, der giver dig mulighed for at vise alarmer til brugeren. Dernæst i main.js fil, importer style.css fil og skåle nytte.

importere"./style.css"
importere Toastify fra'toastify-js'

Definer følgende variabler for at gøre interaktion med DOM-elementerne lettere:

lade bord = dokument.querySelector("#bestyrelse");
lade besked = dokument.querySelector("#besked");
lade nøgler = "QWERTYUIOPASDFGHJKLZXCVBNM".dele("");
lade genstartBtn = dokument.querySelector("#genstart-btn");
lade showBtn = dokument.querySelector("#show-btn");
showBtn.setAttribute("handicappet", "rigtigt");
keys.push("Tilbage");
lade tastatur = dokument.querySelector(".tastatur");

Opsætning af spillebrættet

Da Wordle er et spil, hvor brugeren skal gætte et ord på fem bogstaver i seks forsøg, skal du definere en variabel kaldet tavleindhold der rummer et array på seks arrays. Definer derefter variablerne nuværende række og nuværende boks for at gøre det lettere at krydse tavleindhold.

lade 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],
];
lade nuværende Row = 0;
lade nuværende boks = 0;
lade hemmeligt ord;

For at gengive tavlen med fem felter i hver af de seks rækker ved hjælp af HTML-elementer, skal du bruge indlejrede løkker til at iterere og oprette elementerne. Føj dem til sidst til tavlen.

til (lade i = 0; jeg <= 5; i++) {
lade række = dokument.createElement('div')
til (lade y = 0; y <= 4; y++) {
lade kasse = dokument.createElement('span');
 row.appendChild (kasse);
 row.className = `række-${i + 1}`
 }
 board.appendBarn (række);
}

Tilføjelse af tastaturet og lytning til tastaturinput

For at oprette tastaturet skal du gentage tasterne vha for hver, opretter et knapelement for hver post. Indstil knappens tekst til Backspace hvis posten er *, ellers indstil den til indgangsværdien.

Tildel nøgle klasse til knappen, og indstil data-nøgle attribut til den store indtastningsværdi. Tilføj derefter en klikhændelseslytter til den knap, der kalder funktionen indsæt nøgle med den store indtastningsværdi.

keys.forEach(indgang => {
lade nøgle = dokument.createElement("knap");
hvis (indgang "*") {
 key.innerText = "Tilbage";
 } andet {
 key.innerText = indgang;
 }
 key.className = "nøgle";
 key.setAttribute("data-nøgle", entry.toUpperCase());
 key.addEventListener("klik", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
dokument.querySelector(`knap[data-nøgle=${entry.toUpperCase()}]`).blur();
 }, 250)
 })
 keyboard.append (tast);
})

Få et nyt ord fra en API

Når brugeren først indlæser spillet, bør spillet hente et nyt ord på fem bogstaver fra Tilfældigt ord API. Dette ord gemmes derefter i hemmeligt ord variabel.

fungerefå Nyt Ord() {
asynkronfungerehenteWord() {
prøve {
konst svar = vente hente(" https://random-word-api.herokuapp.com/word? længde=5");
hvis (respons.ok) {
konst data = vente response.json();
Vend tilbage data;
 } andet {
kastenyFejl("Noget gik galt!")
 }
 } fangst (fejl) {
 message.innerText = 'Noget gik galt. \n${error}\nTjek din internetforbindelse.`;
 }
 }
 fetchWord().then(data => {
 secretWord = data[0].toUpperCase();
 main();
 })
}

I kodeblokken ovenfor er vigtigste funktionen kører, hvis det tilfældige ord er hentet. Definer en vigtigste funktion lige under få Nyt Ord fungere:

fungerevigtigste(){
}

For at style hver boks på brættet skal du bruge en liste over alle kasserne i hver række. Erklære en variabel, række der griber alle rækkerne i DOM. Indstil også besked vise stil til ingen:

 rows.forEach(række => [...række.børn].forHver(barn => boxes.push (underordnet)))
 boxes.forEach((boks) => {
 box.classList.add("tom");
 })
 message.style.display = "ingen";

Tilføj derefter en tastetryk hændelseslytter til vinduesobjektet og kontroller, om den frigivne nøgle er gyldig. Hvis det er gyldigt, skal du fokusere på den tilsvarende knap, simulere et klik og sløre det efter en forsinkelse på 250 ms:

vindue.addEventListener('keyup', (e) => {
hvis (isValidCharacter (e.key)) {
dokument.querySelector(`knap[data-nøgle=${e.key.toUpperCase()}]`).fokus();
dokument.querySelector(`knap[data-nøgle=${e.key.toUpperCase()}]`).klik();
 setTimeout(() => {
dokument.querySelector(`knap[data-nøgle=${e.key.toUpperCase()}]`).blur();
 }, 250)
 }
 })

Under tastetryk begivenhedslytter, konfigurer begivenhedslyttere til to knapper: visBtn og genstartBtn. Når afspilleren klikker visBtn, vis en toast-meddelelse med værdien af hemmeligt ord variabel.

Klikker genstartBtn genindlæser siden. Sørg også for at inkludere en er ValidCharacter funktion til at kontrollere, om en tast er et gyldigt tegn.

 showBtn.addEventListener('klik', () => {
 Toastify({
 tekst: 'Okay fint! svaret er ${secretWord}`,
 varighed: 2500,
 klassenavn: "alert",
 }).showToast();
 })
 genstartBtn.addEventListener('klik', () => {
 location.reload();
 })
fungereer ValidCharacter(val) {
Vend tilbage (val.match(/^[a-zA-Z]+$/) && (val.længde 1 || val "Tilbage"))
 }

Uden for vigtigste funktion, oprette en renderBox funktion og angive tre parametre: række (rækkenummeret), boks (kasseindekset i rækken), og data (tekstindholdet skal opdateres).

fungererenderBox(række, boks, data) {
 [...document.querySelector(`.række-${row}`).children][box].innerText = data;
}

Håndtering af tastaturinput med en funktion

For at håndtere de vigtigste input og for at opdatere tavlen skal du oprette en indsæt nøgle funktion med en nøgle parameter. Funktionen skal opføre sig i henhold til den parameter, der er overført.

fungereindsæt nøgle(nøgle) {
hvis (nøgle "Tilbage".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
hvis (currentBox !== 0) {
 currentBox--;
 renderBox (currentRow + 1, nuværende boks, "");
 }
 } andet {
hvis (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = nøgle;
 renderBox (currentRow + 1, currentBox, nøgle);
 currentBox++;
 }
hvis (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 evaluere (currentRow, key);
 nuværende boks = 0;
 nuværende Row++;
 }
 }
}

Evaluering af spillerens gæt

Opret en vurdere funktion, der accepterer en rækkeparameter. Denne funktion er ansvarlig for at evaluere spillerens gæt.

fungerevurdere(række){
}

Hvert spil har en Vis svar knap, der først vises, når brugeren har foretaget fire gæt. Så implementer i funktionen den funktionalitet, der gør netop det:

hvis (nuværende række 4) {
 showBtn.removeAttribute('handicappet')
}

Definer derefter gættevariablen og en svarvariabel, der kontrollerer, om bogstaverne er i den rigtige position.

lade gæt = boardContent[row].join('').toUpperCase();
lade svar = hemmeligtWord.split("");

Flisefarvningsalgoritmen vil være praktisk her. Husk, at en flise eller bogstav skal være grønt, hvis det er i ordet og på det rigtige sted.

Hvis flisen er i ordet, men på det forkerte sted, er flisen gul og endelig er den grå farve for fliser, der ikke er i ordet.

lade farver = gæt
 .dele("")
 .kort((bogstav, idx) => bogstav == svar[idx]? (svar[idx] = falsk): brev)
 .kort((bogstav, idx) =>
 brev
? (idx = answer.indexOf (bogstav)) < 0
? "grå"
: (svar[idx] = "gul")
: "grøn"
);

Den givne kodeblok ovenfor udfører en element-for-element-sammenligning mellem gætte array og svar array. Baseret på resultaterne af denne sammenligning opdaterer koden farver array.

Dernæst skal du definere en sæt farver funktion, der kan tage i farver array som en parameter og farve fliserne passende:

fungeresætFarve(farver) {
 farver.forHver((farve, indeks) => {
dokument.querySelector(`knap[data-nøgle=${gæt[indeks].toUpperCase()}]`).style.backgroundColor = farve;
dokument.querySelector(`knap[data-nøgle=${gæt[indeks].toUpperCase()}]`).style.color= "sort";
 [...document.querySelector(`.række-${række + 1}`).børn][indeks].style.backgroundColor = farve;
 })
}

Spillet er nu færdigt. Alt du skal gøre nu er at ringe til få Nyt Ord funktion, og du er godt i gang.

getNewWord();

Tillykke, du har lige genskabt Wordle.

Tag dine JavaScript-færdigheder til det næste niveau ved at genskabe spil

At lære et nyt sprog som nybegynder er ikke let. Genskabelse af spil som Tic-tac-toe, Hangman og Wordle i et sprog som JavaScript kan hjælpe begyndere med at mestre sprogets begreber ved at omsætte dem i praksis.