Kā izveidot Wordle klonu, izmantojot JavaScript

Worlde ir populāra spēle, kas pārņēma pasauli 2022. gada sākumā. Wordle spēles atjaunošana vai vismaz vienkāršākas versijas izveide ir tas, kas būtu jāapsver izstrādātājiem, kuri ir iesācēji JavaScript lietošanā.

Kā Wordle darbojas

Wordle ir slepens piecu burtu vārds. Spēlētājam ir seši mēģinājumi, un viņam ir jāuzmin dažādi piecu burtu vārdi, lai redzētu, cik tuvu tie ir slepenajam vārdam.

Pēc tam, kad spēlētājs ir iesniedzis minējumu, Wordle izmanto krāsas, lai pateiktu spēlētājam, cik tuvu tās ir slepenajam vārdam. Ja burtam ir dzeltena krāsa, tas nozīmē, ka burts atrodas slepenajā vārdā, bet nepareizā pozīcijā.

Zaļā krāsa norāda lietotājam, ka burts atrodas slepenajā vārdā un atrodas pareizajā pozīcijā, savukārt pelēkā krāsa norāda, ka burta vārda nav.

Attīstības servera iestatīšana

Šajā projektā izmantotais kods ir pieejams a GitHub repozitorijs un to varat izmantot bez maksas saskaņā ar MIT licenci. Ja vēlaties apskatīt šī projekta tiešraides versiju, varat to apskatīt

instagram viewer

demo.

Projektā tiek izmantots Vite veidošanas rīks caur Komandrindas interfeiss (CLI) sastatnēm. Pārliecinieties, vai datorā ir instalēta Yarn, jo tā parasti ir ātrāka par Mezglu pakotņu pārvaldnieks (NPM). Atveriet savu termināli un palaidiet šādu komandu:

dzija izveidot vite

Tādējādi tiks izveidots jauns Vites projekts. Rāmim jābūt Vaniļa un variantam jābūt iestatītam uz JavaScript. Tagad palaist:

dzija

Tādējādi tiks instalētas visas atkarības, kas nepieciešamas, lai projekts darbotos. Pēc šīs instalēšanas palaidiet šo komandu, lai palaistu izstrādes serveri:

dzija dev

Spēles iestatīšana un tastatūras projektēšana

Atveriet projektu savā koda redaktorā, notīriet saturu galvenais.js failu un pārliecinieties, vai jūsu projekta mape izskatās šādi:

Tagad nomainiet saturu index.html failu ar šādu standarta kodu:

html>
<htmllang="lv">
<galvu>
<metarakstzīmju kopa="UTF-8" />
<saiterel="ikona"veids="image/svg+xml"href="/vite.svg" />
<metanosaukums="skata logs"saturu="platums = ierīces platums, sākotnējais mērogs = 1,0" />
<virsraksts>JS Wordlevirsraksts>
galvu>
<ķermeni>
<divid="lietotne">
<div>
<h1>Wordle klonsh1>
<divid="kontrole">
<poguid="restart-btn">Atskaņot vēlreizpogu>
<poguid="show-btn">Parādi atbildipogu>
div>
<divid="ziņa">Lūdzu uzgaidiet. Spēle tiek ielādēta...div>
div>
<divid="interfeiss">
<divid="dēlis">div>
<divklasē="tastatūra">div>
div>
div>
<skriptsveids="modulis"src="/main.js">skripts>
ķermeni>
html>

Lai izmantotu CSS, dodieties uz šī projekta GitHub repozitoriju un kopējiet tā saturu stils.css failu savā stils.css failu.

Tagad terminālī instalējiet Toastify NPM pakotni, izpildot šādu komandu:

dzija pievienot grauzdiņus -S

Toastify ir populāra JavaScript pakotne, kas ļauj rādīt brīdinājumus lietotājam. Tālāk, sadaļā galvenais.js failu, importējiet stils.css failu un grauzdēt lietderība.

imports"./style.css"
imports Toastify no"toastify-js"

Definējiet šādus mainīgos, lai atvieglotu mijiedarbību ar DOM elementiem:

ļaut dēlis = dokumentu.querySelector("#dēlis");
ļaut ziņa = dokumentu.querySelector("#ziņa");
ļaut taustiņi = "QWERTYUIOPASDFGHJKLZXCVBNM".split("");
ļaut restartBtn = dokumentu.querySelector("#restart-btn");
ļaut parādītBtn = dokumentu.querySelector("#show-btn");
showBtn.setAttribute("invalīds", "patiess");
keys.push("Backspace");
ļaut tastatūra = dokumentu.querySelector(". tastatūra");

Spēļu galda iestatīšana

Tā kā Wordle ir spēle, kurā lietotājam sešos mēģinājumos ir jāuzmin piecu burtu vārds, definējiet mainīgo ar nosaukumu boardContent kas satur sešu masīvu masīvu. Pēc tam definējiet mainīgos pašreizējāRinda un pašreizējaisBox lai būtu vieglāk šķērsot boardContent.

ļaut 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],
];
ļaut pašreizējāRinda = 0;
ļaut pašreizējaisBox = 0;
ļaut slepenais vārds;

Lai atveidotu dēli ar pieciem lodziņiem katrā no sešām rindām, izmantojot HTML elementus, izmantojiet ligzdotas cilpas, lai atkārtotu un izveidotu elementus. Visbeidzot pievienojiet tos tāfelei.

priekš (ļaut i = 0; es <= 5; i++) {
ļaut rinda = dokumentu.createElement("div")
priekš (ļaut y = 0; y <= 4; y++) {
ļaut kaste = dokumentu.createElement("span");
 row.appendChild (lodziņš);
 row.className = `rinda-${i + 1}`
 }
 board.appendChild (rinda);
}

Tastatūras pievienošana un tastatūras ievades klausīšanās

Lai izveidotu tastatūru, atkārtojiet, izmantojot taustiņus, izmantojot katram, katram ierakstam izveidojot pogas elementu. Iestatiet pogas tekstu uz Backspace ja ieraksts ir *, pretējā gadījumā iestatiet to uz ievades vērtību.

Piešķirt taustiņu klasei pie pogas un iestatiet datu atslēga atribūtu lielo burtu ievades vērtībai. Pēc tam pievienojiet klikšķu notikumu uztvērēju pogai, kas izsauc funkciju ievietošanas atslēga ar lielo burtu ievades vērtību.

keys.forEach(ierakstu => {
ļaut atslēga = dokumentu.createElement("poga");
ja (ieeja "*") {
 key.innerText = "Backspace";
 } cits {
 key.innerText = ieraksts;
 }
 key.className = "atslēga";
 key.setAttribute("datu atslēga", ieraksts.UpperCase());
 key.addEventListener("klikšķis", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
dokumentu.querySelector(`poga [datu atslēga=${entry.toUpperCase()}]`).blur();
 }, 250)
 })
 tastatūra.pievienot (taustiņš);
})

Jauna vārda iegūšana no API

Kad lietotājs pirmo reizi ielādē spēli, spēlei ir jāielādē jauns piecu burtu vārds no Nejaušs vārds API. Pēc tam šis vārds tiek saglabāts mapē slepenais vārds mainīgs.

funkcijuiegūt NewWord() {
asinhronsfunkcijufetchWord() {
mēģināt {
konst atbilde = gaidīt atnest(" https://random-word-api.herokuapp.com/word? garums = 5");
ja (response.ok) {
konst dati = gaidīt response.json();
atgriezties dati;
 } cits {
mestjaunsKļūda("Kaut kas nogāja greizi!")
 }
 } noķert (kļūda) {
 message.innerText = `Kaut kas nogāja greizi. \n${error}\nPārbaudiet savu interneta savienojumu.`;
 }
 }
 fetchWord().tad(datus => {
 secretWord = dati[0].toUpperCase();
 galvenais ();
 })
}

Iepriekš esošajā koda blokā galvenais funkcija darbojas, ja nejaušais vārds ir veiksmīgi izgūts. Definējiet a galvenais funkcija tieši zem iegūt NewWord funkcija:

funkcijugalvenais(){
}

Lai izveidotu stilu katram tāfeles lodziņam, jums būs nepieciešams saraksts ar visiem katrā rindā esošajiem lodziņiem. deklarēt mainīgo, rinda kas satver visas DOM rindas. Tāpat iestatiet ziņa displeja stilu neviens:

 rows.forEach(rinda => [...rinda.bērni].forEach(bērns => boxes.push (bērns)))
 boxes.forEach((kaste) => {
 box.classList.add("tukšs");
 })
 message.style.display = "neviens";

Tālāk pievienojiet a taustiņu pieslēgšana notikumu uztvērēju loga objektam un pārbaudiet, vai atbrīvotā atslēga ir derīga. Ja tas ir derīgs, fokusējieties uz atbilstošo pogu, simulējiet klikšķi un aizmiglojiet to pēc 250 ms aizkaves:

logs.addEventListener('keyup', (e) => {
ja (isValidCharacter (e.key)) {
dokumentu.querySelector(`poga [datu atslēga=${e.key.toUpperCase()}]`).focus();
dokumentu.querySelector(`poga [datu atslēga=${e.key.toUpperCase()}]`).klikšķis();
 setTimeout(() => {
dokumentu.querySelector(`poga [datu atslēga=${e.key.toUpperCase()}]`).blur();
 }, 250)
 }
 })

Saskaņā taustiņu pieslēgšana notikumu uztvērējs, iestatiet notikumu uztvērējus divām pogām: parādītBtn un restartBtn. Kad spēlētājs noklikšķina parādītBtn, parādīt tostu paziņojumu ar vērtību slepenais vārds mainīgs.

Noklikšķinot restartBtn atkārtoti ielādē lapu. Noteikti iekļaujiet arī isValidCharacter funkciju, lai pārbaudītu, vai atslēga ir derīga rakstzīme.

 showBtn.addEventListener('klikšķis', () => {
 Toastify({
 teksts: `Labi labi! atbilde ir ${secretWord}`,
 ilgums: 2500,
 klases nosaukums: "trauksme",
 }).showToast();
 })
 restartBtn.addEventListener('klikšķis', () => {
 location.reload();
 })
funkcijuisValidCharacter(val) {
atgriezties (val.match(/^[a-zA-Z]+$/) && (val.length 1 || val "Backspace"))
 }

Ārpus galvenais funkciju, izveidojiet a renderBox funkciju un nodrošina trīs parametrus: rinda (rindas numurs), kaste (lodziņa rādītājs rindā) un datus (teksta saturs, kas jāatjaunina).

funkcijurenderBox(rinda, lodziņš, dati) {
 [...document.querySelector(`.rinda-${row}`.children][box].innerText = dati;
}

Tastatūras ievades apstrāde ar funkciju

Lai apstrādātu galvenās ievades un atjauninātu paneli, izveidojiet ievietošanas atslēga funkcija ar a taustiņu parametrs. Funkcijai jādarbojas atbilstoši nodotajam parametram.

funkcijuievietošanas atslēga(taustiņu) {
ja (atslēga "Backspace".toUpperCase() && currentRow < boardContent.length) {
 boardContent[pašreizējāRinda][pašreizējāBox] = 0;
ja (pašreizējaisBox !== 0) {
 currentBox--;
 renderBox (currentRow + 1, pašreizējā kaste, "");
 }
 } cits {
ja (currentRow < boardContent.length) {
 boardContent[pašreizējāRinda][pašreizējāBox] = atslēga;
 renderBox (currentRow + 1, pašreizējaisBox, atslēga);
 currentBox++;
 }
ja (pašreizējāRinda < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 novērtēt (pašreizējāRinda, atslēga);
 pašreizējaisBox = 0;
 pašreizējāRinda++;
 }
 }
}

Spēlētāja minējumu izvērtēšana

Izveidojiet an novērtēt funkcija, kas pieņem rindas parametru. Šī funkcija ir atbildīga par spēlētāja minējuma novērtēšanu.

funkcijunovērtēt(rinda){
}

Katrai spēlei ir a Parādi atbildi poga, kas parādās tikai pēc tam, kad lietotājs ir izdarījis četrus minējumus. Tātad funkcijā ieviesiet funkcionalitāti, kas dara tikai to:

ja (pašreizējā rinda 4) {
 showBtn.removeAttribute('invalīds')
}

Pēc tam definējiet minējuma mainīgo un atbildes mainīgo, kas pārbauda, ​​vai burti atrodas pareizajā pozīcijā.

ļaut guess = boardContent[rinda].join('').toUpperCase();
ļaut atbilde = secretWord.split("");

Šeit noderēs flīžu krāsošanas algoritms. Atgādiniet, ka flīzei vai burtam jābūt zaļam, ja tas atrodas vārdā un pareizajā vietā.

Ja flīze atrodas vārdā, bet nepareizā vietā, flīze ir dzeltena un, visbeidzot, pelēkā krāsa ir paredzēta flīzēm, kas nav iekļautas šajā vārdā.

ļaut krāsas = minējums
 .split("")
 .map((burts, idx) => burts == atbilde[idx]? (atbilde[idx] = viltus): vēstule)
 .map((burts, idx) =>
 vēstule
? (idx = answer.indexOf (burts)) < 0
? "pelēks"
: (atbilde[idx] = "dzeltens")
: "zaļš"
);

Iepriekš norādītais koda bloks veic elementu salīdzināšanu starp uzmini masīvs un atbildi masīvs. Pamatojoties uz šī salīdzinājuma rezultātiem, kods atjaunina krāsas masīvs.

Tālāk definējiet a setColors funkcija, kas var uzņemties krāsas masīvs kā parametrs un atbilstoši krāsojiet flīzes:

funkcijusetColor(krāsas) {
 color.forEach((krāsa, indekss) => {
dokumentu.querySelector(`poga [datu atslēga=${guess[index].toUpperCase()}]`).style.backgroundColor = krāsa;
dokumentu.querySelector(`poga [datu atslēga=${guess[index].toUpperCase()}]`).style.color= "melns";
 [...document.querySelector(`.rinda-${row + 1}`).children][index].style.backgroundColor = krāsa;
 })
}

Spēle tagad ir pabeigta. Tagad viss, kas jums jādara, ir piezvanīt uz iegūt NewWord funkciju, un jūs varat sākt.

getNewWord();

Apsveicam, jūs tikko atjaunojāt Wordle.

Paceliet savas JavaScript prasmes uz nākamo līmeni, atjaunojot spēles

Iesācējam apgūt jaunu valodu nav viegli. Atkārtoti izveidojot tādas spēles kā Tic-tac-toe, Hangman un Wordle tādā valodā kā JavaScript, iesācējiem var palīdzēt apgūt valodas jēdzienus, pielietojot tos praksē.