Kaip sukurti „Wordle“ kloną naudojant „JavaScript“.

„Worlde“ yra populiarus žaidimas, kuris 2022 m. pradžioje užvaldė pasaulį. „Wordle“ žaidimo atkūrimas arba bent jau paprastesnės jo versijos kūrimas yra tai, ką turėtų apsvarstyti „JavaScript“ naujokai besinaudojantys kūrėjai.

Kaip veikia Wordle

„Wordle“ yra slaptas penkių raidžių žodis. Žaidėjas turi šešis bandymus ir turi atspėti skirtingus penkių raidžių žodžius, kad pamatytų, kiek jie yra arti slaptojo žodžio.

Po to, kai žaidėjas pateikia spėjimą, Wordle naudoja spalvas, kad praneštų žaidėjui, kaip arti jie yra slaptam žodžiui. Jei raidė yra geltonos spalvos, tai reiškia, kad raidė yra slaptame žodyje, bet neteisingoje padėtyje.

Žalia spalva praneša vartotojui, kad raidė yra slaptame žodyje ir yra tinkamoje padėtyje, o pilka spalva praneša žaidėjui, kad raidės žodyje nėra.

Kūrimo serverio nustatymas

Šiame projekte naudojamas kodas yra a GitHub saugykla ir jūs galite nemokamai naudotis pagal MIT licenciją. Jei norite pažvelgti į tiesioginę šio projekto versiją, galite tai patikrinti

instagram viewer

demo.

Projektas naudoja Vite kūrimo įrankis per Komandinės eilutės sąsaja (CLI) pastoliams. Įsitikinkite, kad jūsų kompiuteryje įdiegtas „Yarn“, nes jis paprastai yra greitesnis nei Mazgo paketų tvarkyklė (NPM). Atidarykite terminalą ir paleiskite šią komandą:

verpalai sukurti vite

Taip bus sukurtas naujas Vite projektas. Karkasas turi būti Vanilė o variantas turi būti nustatytas į JavaScript. Dabar paleiskite:

verpalai

Taip bus įdiegtos visos priklausomybės, reikalingos projekto veikimui. Įdiegę paleiskite šią komandą, kad paleistumėte kūrimo serverį:

verpalai dev

Žaidimo nustatymas ir klaviatūros projektavimas

Atidarykite projektą savo kodo rengyklėje, išvalykite turinį main.js failą ir įsitikinkite, kad projekto aplankas atrodo taip:

Dabar pakeiskite turinį index.html failą su tokiu standartiniu kodu:

html>
<htmllang="en">
<galva>
<metasimbolių rinkinys="UTF-8" />
<nuorodarel="piktograma"tipo="image/svg+xml"href="/vite.svg" />
<metavardas="žiūros sritis"turinys="plotis = įrenginio plotis, pradinė skalė = 1,0" />
<titulą>JS Wordletitulą>
galva>
<kūnas>
<divid="programėlė">
<div>
<h1>Wordle klonash1>
<divid="valdikliai">
<mygtukąid="restart-btn">Pakartotimygtuką>
<mygtukąid="show-btn">Parodyk atsakymamygtuką>
div>
<divid="žinutė">Prašau palauk. Žaidimas įkeliamas...div>
div>
<divid="sąsaja">
<divid="lenta">div>
<divklasė="klaviatūra">div>
div>
div>
<scenarijustipo="modulis"src="/main.js">scenarijus>
kūnas>
html>

Jei norite naudoti CSS, eikite į šio projekto „GitHub“ saugyklą ir nukopijuokite jos turinį stilius.css failą į savo stilius.css failą.

Dabar terminale įdiekite „Toastify NPM“ paketą vykdydami šią komandą:

verpalai pridėti toastify -S

„Toastify“ yra populiarus „JavaScript“ paketas, leidžiantis rodyti įspėjimus vartotojui. Toliau, į main.js failą, importuokite stilius.css failas ir paskrudinti naudingumas.

importuoti"./style.css"
importuoti Skrudinti iš"Toastify-js"

Apibrėžkite šiuos kintamuosius, kad palengvintumėte sąveiką su DOM elementais:

leisti lenta = dokumentas.querySelector("#lenta");
leisti žinutė = dokumentas.querySelector("#pranešimas");
leisti raktai = „QWERTYUIOPASDFGHJKLZXCVBNM“.split("");
leisti restartBtn = dokumentas.querySelector("#restart-btn");
leisti showBtn = dokumentas.querySelector("#show-btn");
showBtn.setAttribute("neįgalus", "tiesa");
keys.push("Backspace");
leisti klaviatūra = dokumentas.querySelector(".klaviatūra");

Žaidimų lentos nustatymas

Kadangi Wordle yra žaidimas, kuriame vartotojas turi atspėti penkių raidžių žodį per šešis bandymus, apibrėžkite kintamąjį, vadinamą lentos turinys kuriame yra šešių masyvų masyvas. Tada apibrėžkite kintamuosius dabartinė eilė ir currentBox kad būtų lengviau važiuoti lentos turinys.

leisti 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],
];
leisti dabartinė eilė = 0;
leisti currentBox = 0;
leisti slaptas žodis;

Norėdami pateikti lentą su penkiais langeliais kiekvienoje iš šešių eilučių naudodami HTML elementus, naudokite įdėtas kilpas, kad galėtumėte kartoti ir kurti elementus. Galiausiai pridėkite juos prie lentos.

dėl (leisti aš = 0; aš <= 5; i++) {
leisti eilutė = dokumentas.createElement("div")
dėl (leisti y = 0; y <= 4; y++) {
leisti dėžutė = dokumentas.createElement("span");
 row.appendChild (laukelis);
 row.className = eilė-${i + 1}`
 }
 lenta.appendChild (eilutė);
}

Klaviatūros pridėjimas ir klaviatūros įvesties klausymas

Norėdami sukurti klaviatūrą, kartokite naudodami klavišus kiekvienam, sukuriant kiekvieno įrašo mygtuko elementą. Nustatykite mygtuko tekstą į Backspace jei įrašas yra *, kitu atveju nustatykite įvesties vertę.

Priskirkite Raktas klasėje spustelėkite mygtuką ir nustatykite duomenų raktas atributas didžiųjų raidžių įvesties reikšmei. Tada prie mygtuko, kuris iškviečia funkciją, pridėkite spustelėjimo įvykių klausytoją įterpimo raktas su didžiosiomis raidėmis.

keys.forEach(įrašas => {
leisti raktas = dokumentas.createElement("mygtukas");
jeigu (įėjimas "*") {
 key.innerText = "Backspace";
 } Kitas {
 key.innerText = įrašas;
 }
 key.className = "Raktas";
 key.setAttribute("duomenų raktas", įrašas.didžiosios raidės());
 key.addEventListener("spausti", () => {
 insertKey (įvestis.toUpperCase())
 setTimeout(() => {
dokumentas.querySelector(`mygtukas [duomenų raktas =${entry.toUpperCase()}]`).blur();
 }, 250)
 })
 klaviatūra.pridėti (raktas);
})

Naujo žodžio gavimas iš API

Kai vartotojas pirmą kartą įkelia žaidimą, žaidimas turėtų gauti naują penkių raidžių žodį iš Atsitiktinis žodis API. Tada šis žodis išsaugomas slaptas žodis kintamasis.

funkcijagauti NewWord() {
asyncfunkcijafetchWord() {
bandyti {
konst atsakymas = laukti atnešti (" https://random-word-api.herokuapp.com/word? ilgis = 5");
jeigu (response.ok) {
konst duomenys = laukti atsakymas.json();
grąžinti duomenys;
 } Kitas {
mestinaujasKlaida(„Kažkas ne taip!)
 }
 } sugauti (klaida) {
 pranešimas.innerText = `Kažkas ne taip. \n${error}\nPatikrinkite interneto ryšį.`;
 }
 }
 fetchWord().then(duomenis => {
 secretWord = duomenys[0].toUpperCase();
 pagrindinis ();
 })
}

Aukščiau esančiame kodo bloke pagrindinis funkcija veikia, jei atsitiktinis žodis sėkmingai paimamas. Apibrėžkite a pagrindinis funkcija tiesiai žemiau gauti NewWord funkcija:

funkcijapagrindinis(){
}

Norėdami sukurti kiekvienos lentos langelio stilių, jums reikės visų kiekvienoje eilutėje esančių langelių sąrašo. Paskelbkite kintamąjį, eilė kuri paima visas DOM eilutes. Taip pat nustatykite žinutę rodymo stilius nė vienas:

 rows.forEach(eilė => [...row.children].forEach(vaikas => dėžės.stumti (vaikas)))
 boxes.forEach((dėžė) => {
 box.classList.add("tuščia");
 })
 message.style.display = "nė vienas";

Toliau pridėkite a klavišas įvykių klausytoją į lango objektą ir patikrinkite, ar išleistas raktas galioja. Jei tinka, sufokusuokite atitinkamą mygtuką, imituokite paspaudimą ir suliekite jį po 250 ms delsos:

langas.addEventListener("keyup", (e) => {
jeigu (isValidCharacter (e.key)) {
dokumentas.querySelector(`mygtukas [duomenų raktas =${e.key.toUpperCase()}]`).focus();
dokumentas.querySelector(`mygtukas [duomenų raktas =${e.key.toUpperCase()}]`.click();
 setTimeout(() => {
dokumentas.querySelector(`mygtukas [duomenų raktas =${e.key.toUpperCase()}]`).blur();
 }, 250)
 }
 })

Pagal klavišas įvykių klausytojas, nustatykite dviejų mygtukų įvykių klausytojus: showBtn ir restartBtn. Kai žaidėjas paspaudžia showBtn, parodykite tostos pranešimą su reikšme slaptas žodis kintamasis.

Paspaudus restartBtn iš naujo įkelia puslapį. Be to, būtinai įtraukite an isValidCharacter funkcija patikrinti, ar raktas yra tinkamas simbolis.

 showBtn.addEventListener('spustelėkite', () => {
 Toastify({
 tekstas: `Gerai gerai! atsakymas yra ${secretWord}`,
 trukmė: 2500,
 klasės pavadinimas: "budrus",
 }).showToast();
 })
 restartBtn.addEventListener('spustelėkite', () => {
 vieta.perkrauti();
 })
funkcijaisValidCharacter(val) {
grąžinti (val.match(/^[a-zA-Z]+$/) && (val.ilgis 1 || val "Backspace"))
 }

Už pagrindinis funkciją, sukurkite a renderBox funkciją ir pateikti tris parametrus: eilė (eilutės numeris), dėžė (laukelio rodyklė eilutėje) ir duomenis (teksto turinys, kurį reikia atnaujinti).

funkcijarenderBox(eilutė, langelis, duomenys) {
 [...document.querySelector(`.row-${row}`).vaikai][dėžutė].innerText = duomenys;
}

Klaviatūros įvesties tvarkymas su funkcija

Norėdami tvarkyti pagrindinius įvestis ir atnaujinti plokštę, sukurkite įterpimo raktas funkcija su a Raktas parametras. Funkcija turi veikti pagal perduotą parametrą.

funkcijaįterpimo raktas(Raktas) {
jeigu (Raktas "Backspace".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentrow][currentBox] = 0;
jeigu (dabartinė dėžutė !== 0) {
 currentBox--;
 renderBox (currentRow + 1, dabartinė dėžutė, "");
 }
 } Kitas {
jeigu (currentRow < boardContent.length) {
 boardContent[dabartinė eilė][dabartinė dėžutė] = raktas;
 renderBox (currentRow + 1, currentBox, raktas);
 currentBox++;
 }
jeigu (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 įvertinti (currentRow, key);
 currentBox = 0;
 currentRow++;
 }
 }
}

Žaidėjo spėlionių įvertinimas

Sukurti an įvertinti funkcija, kuri priima eilutės parametrą. Ši funkcija yra atsakinga už žaidėjo spėjimo įvertinimą.

funkcijaįvertinti(eilė){
}

Kiekvienas žaidimas turi a Parodyk atsakyma mygtukas, kuris pasirodo tik vartotojui spėjus keturis kartus. Taigi funkcijoje įdiekite funkciją, kuri atlieka būtent tai:

jeigu (dabartinė eilė 4) {
 showBtn.removeAttribute("neįgalus")
}

Tada apibrėžkite spėjimo kintamąjį ir atsakymo kintamąjį, kuris patikrina, ar raidės yra teisingoje padėtyje.

leisti spėjimas = lentaTurinys[eilutė].join('').toUpperCase();
leisti atsakymas = secretWord.split("");

Čia pravers plytelių spalvinimo algoritmas. Prisiminkite, kad plytelė arba raidė turi būti žalia, jei ji yra žodyje ir tinkamoje vietoje.

Jei plytelė yra žodyje, bet netinkamoje vietoje, plytelė yra geltona ir galiausiai pilka spalva skirta plytelėms, kurių žodyje nėra.

leisti spalvos = spėjimas
 .split("")
 .map((raidė, idx) => raidė == atsakymas[idx]? (atsakymas [idx] = klaidinga): laiškas)
 .map((raidė, idx) =>
 laišką
? (idx = atsakymas.indexOf (raidė)) < 0
? "pilka"
: (atsakymas[idx] = "geltona")
: "žalias"
);

Aukščiau pateiktas kodo blokas atlieka elementų palyginimą tarp spėti masyvas ir atsakyti masyvas. Remiantis šio palyginimo rezultatais, kodas atnaujina spalvos masyvas.

Toliau apibrėžkite a nustatyti Spalvos funkcija, kuri gali priimti spalvos masyvą kaip parametrą ir tinkamai nuspalvinkite plyteles:

funkcijasetColor(spalvos) {
 color.forEach((spalva, indeksas) => {
dokumentas.querySelector(`mygtukas [duomenų raktas =${guess[index].toUpperCase()}]`).style.backgroundColor = spalva;
dokumentas.querySelector(`mygtukas [duomenų raktas =${guess[index].toUpperCase()}]`).stilius.spalva= "juodas";
 [...document.querySelector(`.row-${row + 1}`.children][index].style.backgroundColor = spalva;
 })
}

Žaidimas dabar baigtas. Viskas, ką dabar turite padaryti, tai paskambinti gauti NewWord funkcija, ir jūs galite pradėti.

getNewWord();

Sveikiname, ką tik atkūrėte Wordle.

Perkelkite savo JavaScript įgūdžius į kitą lygį kurdami žaidimus iš naujo

Pradedantiesiems išmokti naują kalbą nėra lengva. Tokių žaidimų kaip „Tic-tac-toe“, „Hangman“ ir „Wordle“ atkūrimas tokia kalba kaip „JavaScript“ gali padėti pradedantiesiems įsisavinti kalbos sąvokas, pritaikant jas praktiškai.