Du måste ha spelat Wordle-spelet. Så här kan du skapa din egen version av Wordle med JavaScript.

Worlde är ett populärt spel som tog världen med storm i början av 2022. Att återskapa Wordle-spelet eller åtminstone bygga en enklare version av det är något som utvecklare som är nya med JavaScript bör överväga.

Hur Wordle fungerar

I Wordle finns ett hemligt ord på fem bokstäver. Spelaren har sex försök och måste gissa olika ord på fem bokstäver för att se hur nära de är det hemliga ordet.

Efter att spelaren lämnat en gissning använder Wordle färger för att tala om för spelaren hur nära de är det hemliga ordet. Om en bokstav har färgen gul betyder det att bokstaven är i det hemliga ordet, men i fel position.

Den gröna färgen talar om för användaren att bokstaven är i det hemliga ordet och i rätt position, medan den grå färgen talar om för spelaren att bokstaven inte finns i ordet.

Konfigurera utvecklingsservern

Koden som används i detta projekt är tillgänglig i en GitHub-förråd och är gratis för dig att använda under MIT-licensen. Om du vill ta en titt på en liveversion av det här projektet kan du kolla in det här

instagram viewer
demo.

Projektet använder Vite byggverktyg via Kommandoradsgränssnitt (CLI) för byggnadsställningar. Se till att du har Yarn installerat på din dator eftersom det i allmänhet är snabbare än Nod Package Manager (NPM). Öppna din terminal och kör följande kommando:

garn skapa vite

Detta kommer att skapa ett nytt Vite-projekt. Ramen borde vara Vanilj och varianten ska ställas in på JavaScript. Kör nu:

garn

Detta kommer att installera alla beroenden som krävs för att få projektet att fungera. Efter denna installation, kör följande kommando för att starta utvecklingsservern:

garn dev

Ställa in spelet och designa tangentbordet

Öppna projektet i din kodredigerare, rensa innehållet i main.js fil och se till att din projektmapp ser ut så här:

Byt nu ut innehållet i index.html fil med följande typkod:

html>
<htmllang="en">
<huvud>
<metateckenuppsättning="UTF-8" />
<länkrel="ikon"typ="image/svg+xml"href="/vite.svg" />
<metanamn="viewport"innehåll="width=device-width, initial-scale=1.0" />
<titel>JS Wordletitel>
huvud>


<kropp>
<divid="app">
<div>
<h1>Wordle Cloneh1>
<divid="kontroller">
<knappid="starta om-btn">Reprisknapp>
<knappid="visa-btn">Visa svarknapp>
div>
<divid="meddelande">Vänta. Spelet laddas...div>
div>
<divid="gränssnitt">
<divid="styrelse">div>
<divklass="tangentbord">div>
div>
div>
<manustyp="modul"src="/main.js">manus>
kropp>
html>

För CSS, gå över till detta projekts GitHub Repository och kopiera innehållet i style.css fil till din egen style.css fil.

Nu, i terminalen, installera Toastify NPM-paketet genom att köra följande kommando:

garn tillsätt toastify -S

Toastify är ett populärt JavaScript-paket som låter dig visa varningar för användaren. Nästa, i main.js fil, importera style.css filen och skåla verktyg.

importera"./style.css"
importera Toastify från'toastify-js'

Definiera följande variabler för att göra interaktion med DOM-elementen enklare:

låta tavla = dokumentera.querySelector("#styrelse");
låta meddelande = dokumentera.querySelector("#meddelande");
låta nycklar = "QWERTYUIOPASDFGHJKLZXCVBNM".dela("");
låta starta omBtn = dokumentera.querySelector("#restart-btn");
låta showBtn = dokumentera.querySelector("#show-btn");
showBtn.setAttribute("Inaktiverad", "Sann");
keys.push("Backsteg");
låta tangentbord = dokumentera.querySelector(".tangentbord");

Sätta upp spelplanen

Eftersom Wordle är ett spel där användaren måste gissa ett ord på fem bokstäver i sex försök, definiera en variabel som heter boardContent som rymmer en array med sex arrayer. Definiera sedan variablerna nuvarande rad och aktuell Box för att göra det lättare att ta sig fram boardContent.

låta 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],
];
låta aktuell Rad = 0;
låta currentBox = 0;
låta hemligt ord;

För att rendera brädan med fem rutor i var och en av de sex raderna med HTML-element, använd kapslade loopar för att iterera och skapa elementen. Till sist, lägg till dem på tavlan.

för (låta jag = 0; jag <= 5; i++) {
låta rad = dokumentera.createElement('div')
för (låta y = 0; y <= 4; y++) {
låta låda = dokumentera.createElement('spänna');
 row.appendChild (ruta);
 row.className = `rad-${i + 1}`
 }
 board.appendChild (rad);
}

Lägga till tangentbordet och lyssna på tangentbordsinmatning

För att skapa tangentbordet, iterera genom tangenterna med hjälp av för varjeskapa ett knappelement för varje post. Ställ in knappens text till Backsteg om posten är *, annars ställ in den på ingångsvärdet.

Tilldela nyckel klass till knappen och ställ in datanyckel attribut till det stora inmatningsvärdet. Lägg sedan till en klickhändelselyssnare till knappen som anropar funktionen insertKey med det stora inmatningsvärdet.

keys.forEach(inträde => {
låta nyckel = dokumentera.createElement("knapp");
om (inträde "*") {
 key.innerText = "Backsteg";
 } annan {
 key.innerText = post;
 }
 key.className = "nyckel";
 key.setAttribute("data-nyckel", entry.toUpperCase());
 key.addEventListener("klick", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
dokumentera.querySelector(`knapp[data-nyckel=${entry.toUpperCase()}]`).fläck();
 }, 250)
 })
 keyboard.append (nyckel);
})

Få ett nytt ord från ett API

När användaren först laddar spelet bör spelet hämta ett nytt ord på fem bokstäver från Slumpmässigt ord API. Detta ord lagras sedan i hemligt ord variabel.

fungeragetNewWord() {
asynkronfungerahämtaWord() {
Prova {
konst svar = vänta hämta(" https://random-word-api.herokuapp.com/word? längd=5");
om (response.ok) {
konst data = vänta response.json();
lämna tillbaka data;
 } annan {
kastanyFel("Något gick fel!")
 }
 } fånga (fel) {
 message.innerText = `Något gick fel. \n${error}\nKontrollera din internetanslutning.`;
 }
 }
 fetchWord().then(data => {
 secretWord = data[0].toUpperCase();
 main();
 })
}

I kodblocket ovan visas huvud funktionen körs om det slumpmässiga ordet har hämtats. Definiera a huvud fungerar precis under getNewWord fungera:

fungerahuvud(){
}

För att utforma varje ruta på tavlan behöver du en lista över alla rutor i varje rad. Deklarera en variabel, rad som tar tag i alla rader i DOM. Ställ också in meddelande visa stil till ingen:

 rows.forEach(rad => [...row.children].forEach(barn => boxes.push (barn)))
 boxes.forEach((låda) => {
 box.classList.add("tömma");
 })
 message.style.display = "ingen";

Lägg sedan till a knappsats händelseavlyssnare till fönsterobjektet och kontrollera om den släppta nyckeln är giltig. Om giltigt, fokusera på motsvarande knapp, simulera ett klick och suddra det efter en 250ms fördröjning:

fönster.addEventListener('keyup', (e) => {
om (isValidCharacter (e.key)) {
dokumentera.querySelector(`knapp[data-nyckel=${e.key.toUpperCase()}]`).fokus();
dokumentera.querySelector(`knapp[data-nyckel=${e.key.toUpperCase()}]`).klick();
 setTimeout(() => {
dokumentera.querySelector(`knapp[data-nyckel=${e.key.toUpperCase()}]`).fläck();
 }, 250)
 }
 })

Under knappsats händelseavlyssnare, ställ in händelseavlyssnare för två knappar: visaBtn och starta omBtn. När spelaren klickar visaBtn, visa ett toastmeddelande med värdet på hemligt ord variabel.

Klickar starta omBtn laddar om sidan. Se också till att du inkluderar en är ValidCharacter funktion för att kontrollera om en nyckel är ett giltigt tecken.

 showBtn.addEventListener('klick', () => {
 Toastify({
 text: `Okej bra! svaret är ${secretWord}`,
 varaktighet: 2500,
 klassnamn: "varna",
 }).showToast();
 })
 restartBtn.addEventListener('klick', () => {
 location.reload();
 })
fungeraär ValidCharacter(val) {
lämna tillbaka (val.match(/^[a-zA-Z]+$/) && (val.längd 1 || val "Backsteg"))
 }

Utanför huvud funktion, skapa en renderBox funktion och tillhandahåller tre parametrar: rad (radnumret), låda (boxindexet inom raden), och data (textinnehållet att uppdatera).

fungerarenderBox(rad, ruta, data) {
 [...document.querySelector(`.rad-${row}`).children][box].innerText = data;
}

Hantera tangentbordsinmatning med en funktion

För att hantera nyckelinmatningarna och uppdatera tavlan, skapa en insertKey funktion med en nyckel parameter. Funktionen ska fungera enligt parametern som skickats.

fungerainsertKey(nyckel) {
om (nyckel "Backsteg".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
om (currentBox !== 0) {
 currentBox--;
 renderBox (currentRow + 1, aktuell Box, "");
 }
 } annan {
om (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = nyckel;
 renderBox (currentRow + 1, currentBox, nyckel);
 currentBox++;
 }
om (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 utvärdera (currentRow, nyckel);
 currentBox = 0;
 aktuell Rad++;
 }
 }
}

Utvärdera spelarens gissning

Skapa en utvärdera funktion som accepterar en radparameter. Denna funktion är ansvarig för att utvärdera spelarens gissning.

fungerautvärdera(rad){
}

Varje spel har en Visa svar knapp som visas först efter att användaren har gjort fyra gissningar. Så, i funktionen, implementera funktionen som gör just det:

om (nuvarande rad 4) {
 showBtn.removeAttribute('Inaktiverad')
}

Definiera sedan gissningsvariabeln och en svarsvariabel som kontrollerar om bokstäverna är i rätt position.

låta gissa = boardContent[rad].join('').toUpperCase();
låta svar = secretWord.split("");

Algoritmen för brickfärgning kommer att vara praktisk här. Kom ihåg att en bricka eller bokstav ska vara grön om den finns i ordet och på rätt plats.

Om brickan är i ordet men på fel plats är brickan gul och slutligen är den grå färgen för brickor som inte finns i ordet.

låta färger = gissa
 .dela("")
 .Karta((bokstav, idx) => bokstav == svar[idx]? (svar[idx] = falsk): brev)
 .Karta((bokstav, idx) =>
 brev
? (idx = answer.indexOf (bokstav)) < 0
? "grå"
: (svar[idx] = "gul")
: "grön"
);

Det givna kodblocket ovan utför en element-för-element-jämförelse mellan gissa array och svar array. Baserat på resultaten av denna jämförelse uppdaterar koden färger array.

Därefter definierar du a setColors funktion som kan ta in färger array som en parameter och färglägg brickorna på lämpligt sätt:

fungerasetColor(färger) {
 colors.forEach((färg, index) => {
dokumentera.querySelector(`knapp[data-nyckel=${guess[index].toUpperCase()}]`).style.backgroundColor = färg;
dokumentera.querySelector(`knapp[data-nyckel=${guess[index].toUpperCase()}]`).style.color= "svart";
 [...document.querySelector(`.rad-${rad + 1}`).children][index].style.backgroundColor = färg;
 })
}

Spelet är nu klart. Allt du behöver göra nu är att ringa getNewWord funktion, och du är bra att gå.

getNewWord();

Grattis, du har precis återskapat Wordle.

Ta dina JavaScript-färdigheter till nästa nivå genom att återskapa spel

Att lära sig ett nytt språk som nybörjare är inte lätt. Att återskapa spel som Tic-tac-toe, Hangman och Wordle på ett språk som JavaScript kan hjälpa nybörjare att behärska språkets begrepp genom att omsätta dem i praktiken.