Du må ha spilt Wordle-spillet. Slik kan du lage din egen versjon av Wordle ved å bruke JavaScript.

Worlde er et populært spill som tok verden med storm tidlig i 2022. Å gjenskape Wordle-spillet eller i det minste bygge en enklere versjon av det er noe utviklere som er nye med JavaScript bør vurdere.

Hvordan Wordle fungerer

I Wordle er det et hemmelig ord på fem bokstaver. Spilleren har seks forsøk og må gjette forskjellige ord på fem bokstaver for å se hvor nær de er det hemmelige ordet.

Etter at spilleren har sendt inn en gjetning, bruker Wordle farger for å fortelle spilleren hvor nær de er det hemmelige ordet. Hvis en bokstav har fargen gul, betyr det at bokstaven er i det hemmelige ordet, men i feil posisjon.

Den grønne fargen forteller brukeren at bokstaven er i det hemmelige ordet og i riktig posisjon, mens den grå fargen forteller spilleren at bokstaven ikke er i ordet.

Sette opp utviklingsserveren

Koden som brukes i dette prosjektet er tilgjengelig i en GitHub-depot og er gratis for deg å bruke under MIT-lisensen. Hvis du vil ta en titt på en live-versjon av dette prosjektet, kan du sjekke ut denne

instagram viewer
demo.

Prosjektet bruker Vite byggeverktøy via Kommandolinjegrensesnitt (CLI) for stillas. Sørg for at du har Yarn installert på datamaskinen din, fordi det generelt er raskere enn Node Package Manager (NPM). Åpne terminalen og kjør følgende kommando:

garn skape vite

Dette vil opprette et nytt Vite-prosjekt. Rammen bør være Vanilje og varianten skal settes til JavaScript. Kjør nå:

garn

Dette vil installere alle avhengighetene som er nødvendige for å få prosjektet til å fungere. Etter denne installasjonen, kjør følgende kommando for å starte utviklingsserveren:

garn dev

Sette opp spillet og designe tastaturet

Åpne prosjektet i koderedigeringsprogrammet, fjern innholdet i main.js fil, og sørg for at prosjektmappen din ser slik ut:

Bytt nå ut innholdet i index.html fil med følgende boilerplate-kode:

html>
<htmllang="no">
<hode>
<metategnsett="UTF-8" />
<linkrel="ikon"type="image/svg+xml"href="/vite.svg" />
<metaNavn="viewport"innhold="width=device-width, initial-scale=1.0" />
<tittel>JS Wordletittel>
hode>


<kropp>
<divid="app">
<div>
<h1>Wordle Cloneh1>
<divid="kontroller">
<knappid="start-btn på nytt">Replayknapp>
<knappid="vis-btn">Vis svarknapp>
div>
<divid="beskjed">Vennligst vent. Spillet laster...div>
div>
<divid="grensesnitt">
<divid="borde">div>
<divklasse="tastatur">div>
div>
div>
<manustype="modul"src="/main.js">manus>
kropp>
html>

For CSS, gå over til dette prosjektets GitHub Repository og kopier innholdet i style.css fil til din egen style.css fil.

Nå, i terminalen, installer Toastify NPM-pakken ved å kjøre følgende kommando:

garn legg toastify -S

Toastify er en populær JavaScript-pakke som lar deg vise varsler til brukeren. Neste, i main.js fil, importer style.css filen og toastify nytte.

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

Definer følgende variabler for å gjøre interaksjon med DOM-elementene enklere:

la bord = dokument.querySelector("#borde");
la melding = dokument.querySelector("#beskjed");
la nøkler = "QWERTYUIOPASDFGHJKLZXCVBNM".dele("");
la restartBtn = dokument.querySelector("#restart-btn");
la showBtn = dokument.querySelector("#show-btn");
showBtn.setAttribute("funksjonshemmet", "ekte");
keys.push("Tilbake");
la tastatur = dokument.querySelector(".tastatur");

Sette opp spillebrettet

Siden Wordle er et spill der brukeren må gjette et ord på fem bokstaver i seks forsøk, definer en variabel kalt boardContent som har en matrise på seks matriser. Definer deretter variablene gjeldende rad og gjeldende boks for å gjøre det lettere å krysse boardContent.

la 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],
];
la gjeldende rad = 0;
la currentBox = 0;
la hemmelig ord;

For å gjengi brettet med fem bokser i hver av de seks radene ved hjelp av HTML-elementer, bruk nestede løkker for å iterere og lage elementene. Til slutt legger du dem til tavlen.

til (la jeg = 0; jeg <= 5; i++) {
la rad = dokument.createElement('div')
til (la y = 0; y <= 4; y++) {
la boks = dokument.createElement("span");
 row.appendChild (boks);
 row.className = `rekke-${i + 1}`
 }
 board.appendChild (rad);
}

Legge til tastaturet og lytte til tastaturinndata

For å lage tastaturet, iterer gjennom tastene ved hjelp av for hver, opprette et knappeelement for hver oppføring. Sett knappens tekst til Tilbake hvis oppføringen er *, ellers sett den til inngangsverdien.

Tilordne nøkkel klasse til knappen, og still inn datanøkkel attributt til den store oppføringsverdien. Deretter legger du til en klikkhendelseslytter til knappen som kaller opp funksjonen sett innNøkkel med den store inngangsverdien.

keys.forEach(inngang => {
la nøkkel = dokument.createElement("knapp");
hvis (inngang "*") {
 key.innerText = "Tilbake";
 } ellers {
 key.innerText = oppføring;
 }
 nøkkel.klassenavn = "nøkkel";
 key.setAttribute("data-nøkkel", entry.toUpperCase());
 key.addEventListener("klikk", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
dokument.querySelector(`knapp[datanøkkel=${entry.toUpperCase()}]`).uklarhet();
 }, 250)
 })
 keyboard.append (tast);
})

Få et nytt ord fra en API

Når brukeren først laster spillet, skal spillet hente et nytt ord på fem bokstaver fra Tilfeldig ord API. Dette ordet lagres deretter i hemmelig ord variabel.

funksjonfå Nytt Ord() {
asynkronfunksjonhenteWord() {
prøve {
konst svar = avvente hente(" https://random-word-api.herokuapp.com/word? lengde=5");
hvis (response.ok) {
konst data = avvente response.json();
komme tilbake data;
 } ellers {
kastenyFeil("Noe gikk galt!")
 }
 } å fange (feil) {
 message.innerText = `Noe gikk galt. \n${error}\nSjekk internettforbindelsen din.`;
 }
 }
 fetchWord().then(data => {
 secretWord = data[0].toUpperCase();
 hoved();
 })
}

I kodeblokken ovenfor vises hoved- funksjonen kjører hvis det tilfeldige ordet er hentet. Definer a hoved- funksjon rett under få Nytt Ord funksjon:

funksjonhoved-(){
}

For å style hver boks på brettet trenger du en liste over alle boksene i hver rad. Deklarer en variabel, rad som tar tak i alle radene i DOM. Still også inn beskjed vise stil til ingen:

 rows.forEach(rad => [...row.children].forEach(barn => boxes.push (barn)))
 boxes.forEach((eske) => {
 box.classList.add("tømme");
 })
 message.style.display = "ingen";

Deretter legger du til en tastetrykk hendelseslytter til vindusobjektet og sjekk om den frigitte nøkkelen er gyldig. Hvis gyldig, fokuser på den tilsvarende knappen, simuler et klikk og gjør det uskarpt etter en forsinkelse på 250 ms:

vindu.addEventListener('keyup', (e) => {
hvis (isValidCharacter (e.key)) {
dokument.querySelector(`knapp[datanøkkel=${e.key.toUpperCase()}]`).fokus();
dokument.querySelector(`knapp[datanøkkel=${e.key.toUpperCase()}]`).klikk();
 setTimeout(() => {
dokument.querySelector(`knapp[datanøkkel=${e.key.toUpperCase()}]`).uklarhet();
 }, 250)
 }
 })

Under tastetrykk hendelseslytter, konfigurer hendelseslyttere for to knapper: visBtn og restartBtn. Når spilleren klikker visBtn, vis en toast-varsling med verdien av hemmelig ord variabel.

Klikker restartBtn laster siden på nytt. Pass også på at du inkluderer en erValidCharacter funksjon for å sjekke om en nøkkel er et gyldig tegn.

 showBtn.addEventListener('klikk', () => {
 Toastify({
 tekst: 'Ok greit! svaret er ${secretWord}`,
 varighet: 2500,
 klassenavn: "varsling",
 }).showToast();
 })
 restartBtn.addEventListener('klikk', () => {
 location.reload();
 })
funksjonerValidCharacter(val) {
komme tilbake (val.match(/^[a-zA-Z]+$/) && (val.length 1 || val "Tilbake"))
 }

Utenfor hoved- funksjon, opprette en renderBox funksjon og oppgi tre parametere: rad (radnummeret), eske (boksindeksen i raden), og data (tekstinnholdet skal oppdateres).

funksjonrenderBox(rad, boks, data) {
 [...document.querySelector(`.rad-${row}`).barn][boks].innerText = data;
}

Håndtere tastaturinndata med en funksjon

For å håndtere nøkkelinngangene og for å oppdatere tavlen, opprette en sett innNøkkel funksjon med en nøkkel parameter. Funksjonen skal oppføre seg i henhold til parameteren som er sendt.

funksjonsett innNøkkel(nøkkel) {
hvis (nøkkel "Tilbake".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
hvis (currentBox !== 0) {
 currentBox--;
 renderBox (currentRow + 1, gjeldende boks, "");
 }
 } ellers {
hvis (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = nøkkel;
 renderBox (currentRow + 1, gjeldende boks, nøkkel);
 currentBox++;
 }
hvis (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 evaluere (currentRow, key);
 currentBox = 0;
 gjeldende rad++;
 }
 }
}

Evaluering av spillerens gjetning

Opprett en evaluere funksjon som godtar en radparameter. Denne funksjonen er ansvarlig for å evaluere spillerens gjetning.

funksjonevaluere(rad){
}

Hvert spill har en Vis svar knapp som vises først etter at brukeren har gjort fire gjetninger. Så, i funksjonen, implementer funksjonaliteten som gjør nettopp det:

hvis (nåværende rad 4) {
 showBtn.removeAttribute('funksjonshemmet')
}

Definer så gjettevariabelen og en svarvariabel som sjekker om bokstavene er i riktig posisjon.

la gjett = boardContent[rad].join('').toUpperCase();
la svar = secretWord.split("");

Algoritmen for flisfarging vil komme godt med her. Husk at en flis eller bokstav skal være grønn hvis den står i ordet og på riktig sted.

Hvis flisen er i ordet, men på feil sted, er flisen gul og til slutt er den grå fargen for fliser som ikke er i ordet.

la farger = gjett
 .dele("")
 .kart((bokstav, idx) => bokstav == svar[idx]? (svar[idx] = falsk): brev)
 .kart((bokstav, idx) =>
 brev
? (idx = answer.indexOf (bokstav)) < 0
? "grå"
: (svar[idx] = "gul")
: "grønn"
);

Den gitte kodeblokken ovenfor utfører en element-for-element-sammenligning mellom Gjett array og svar array. Basert på resultatene av denne sammenligningen, oppdaterer koden farger array.

Definer deretter en sett farger funksjon som kan ta inn farger array som en parameter og fargelegg flisene riktig:

funksjonsett farge(farger) {
 colors.forEach((farge, indeks) => {
dokument.querySelector(`knapp[datanøkkel=${guess[index].toUpperCase()}]`).style.backgroundColor = farge;
dokument.querySelector(`knapp[datanøkkel=${guess[index].toUpperCase()}]`).style.color= "svart";
 [...document.querySelector(`.rad-${row + 1}`).barn][indeks].style.backgroundColor = farge;
 })
}

Spillet er nå fullført. Alt du trenger å gjøre nå er å ringe få Nytt Ord funksjon, og du er klar til å gå.

getNewWord();

Gratulerer, du har nettopp gjenskapt Wordle.

Ta JavaScript-ferdighetene dine til neste nivå ved å gjenskape spill

Å lære et nytt språk som nybegynner er ikke lett. Å gjenskape spill som Tic-tac-toe, Hangman og Wordle på et språk som JavaScript, kan hjelpe nybegynnere med å mestre språkbegrepene ved å sette dem i praksis.