Biztosan játszottál a Wordle játékkal. Így hozhatja létre a Wordle saját verzióját JavaScript használatával.

A Worlde egy népszerű játék, amely 2022 elején meghódította a világot. A Wordle játék újbóli létrehozása vagy legalább egy egyszerűbb változatának elkészítése olyan dolog, amelyet a JavaScript-ben kezdő fejlesztőknek érdemes megfontolni.

Hogyan működik a Wordle

A Wordle-ben van egy titkos ötbetűs szó. A játékosnak hat próbálkozása van, és különböző ötbetűs szavakat kell kitalálnia, hogy lássa, milyen közel állnak a titkos szóhoz.

Miután a játékos beadott egy tippet, Wordle színekkel jelzi a játékosnak, milyen közel állnak a titkos szóhoz. Ha egy betű sárga színű, az azt jelenti, hogy a betű a titkos szóban van, de rossz helyen van.

A zöld szín jelzi a felhasználónak, hogy a betű a titkos szóban és a megfelelő helyen van, míg a szürke szín azt, hogy a betű nincs a szóban.

A fejlesztői szerver beállítása

A projektben használt kód elérhető a GitHub adattár és az MIT licence alapján ingyenesen használható. Ha meg szeretné tekinteni a projekt élő változatát, ezt megtekintheti demó.

instagram viewer

A projekt a Vite építőeszköz keresztül a Parancssori interfész (CLI) állványozáshoz. Győződjön meg arról, hogy a Yarn telepítve van a számítógépére, mert általában gyorsabb, mint a Node Package Manager (NPM). Nyissa meg a terminált, és futtassa a következő parancsot:

fonal létre vite

Ezzel egy új Vite projekt jön létre. A keretnek olyannak kell lennie Vanília és a változatot értékre kell állítani JavaScript. Most fuss:

fonal

Ezzel telepíti a projekt működéséhez szükséges összes függőséget. A telepítés után futtassa a következő parancsot a fejlesztői kiszolgáló elindításához:

fonal dev

A játék beállítása és a billentyűzet tervezése

Nyissa meg a projektet a kódszerkesztőben, és törölje a tartalmát main.js fájlt, és győződjön meg arról, hogy a projektmappája így néz ki:

Most cserélje ki a tartalmát index.html fájl a következő alapkóddal:

html>
<htmllang="en">
<fej>
<metakarakterkészlet="UTF-8" />
<linkrel="ikon"típus="image/svg+xml"href="/vite.svg" />
<metanév="nézőablak"tartalom="szélesség = eszköz szélessége, kezdeti méret = 1,0" />
<cím>JS Wordlecím>
fej>


<test>
<divid="alkalmazás">
<div>
<h1>Wordle klónh1>
<divid="vezérlők">
<gombid="restart-btn">Visszajátszásgomb>
<gombid="show-btn">Mutasd a választgomb>
div>
<divid="üzenet">Kérlek várj. A játék betöltődik...div>
div>
<divid="felület">
<divid="tábla">div>
<divosztály="billentyűzet">div>
div>
div>
<forgatókönyvtípus="modul"src="/main.js">forgatókönyv>
test>
html>

A CSS-hez lépjen a projekt GitHub Repositoryjába, és másolja ki a tartalmát stílus.css fájl a sajátodba stílus.css fájlt.

Most a terminálban telepítse a Toastify NPM csomagot a következő parancs futtatásával:

fonal add pirítóssá -S

A Toastify egy népszerű JavaScript-csomag, amely lehetővé teszi figyelmeztetések megjelenítését a felhasználó számára. Következő, a main.js fájlt, importálja a stílus.css fájl és a pirítson hasznosság.

import"./style.css"
import Pirítsd meg tól től"toastify-js"

A DOM elemekkel való interakció megkönnyítése érdekében határozza meg a következő változókat:

hagyja tábla = dokumentum.querySelector("#tábla");
hagyja üzenet = dokumentum.querySelector("#üzenet");
hagyja gombok = "QWERTYUIOPASDFGHJKLZXCVBNM".hasított("");
hagyja restartBtn = dokumentum.querySelector("#restart-btn");
hagyja showBtn = dokumentum.querySelector("#show-btn");
showBtn.setAttribute("Tiltva", "igaz");
keys.push("Backspace");
hagyja billentyűzet = dokumentum.querySelector(".billentyűzet");

A játéktábla beállítása

Mivel a Wordle egy olyan játék, ahol a felhasználónak hat próbálkozással kell kitalálnia egy ötbetűs szót, definiáljon egy változót, boardContent amely egy hat tömbből álló tömböt tartalmaz. Ezután határozza meg a változókat aktuálisSor és currentBox hogy könnyebb legyen az átjárás boardContent.

hagyja 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],
];
hagyja aktuálisSor = 0;
hagyja currentBox = 0;
hagyja titkos világ;

Ha a táblát HTML-elemekkel szeretné megjeleníteni mind a hat sorban, öt dobozzal, használjon beágyazott ciklusokat az elemek iterálásához és létrehozásához. Végül csatolja őket a táblához.

számára (hagyja i = 0; én <= 5; i++) {
hagyja sor = dokumentum.createElement("div")
számára (hagyja y = 0; y <= 4; y++) {
hagyja doboz = dokumentum.createElement("span");
 row.appendChild (doboz);
 sor.osztálynév = `sor-${i + 1}`
 }
 board.appendChild (sor);
}

A billentyűzet hozzáadása és a billentyűzet bevitelének meghallgatása

A billentyűzet létrehozásához ismételje meg a billentyűket a segítségével az egyes, minden bejegyzéshez létrehozva egy gombelemet. Állítsa be a gomb szövegét Backspace ha a bejegyzés az *, ellenkező esetben állítsa be a belépési értékre.

Rendelje hozzá a kulcs osztályt a gombra, és állítsa be a adatkulcs attribútumot a nagybetűs beviteli értékhez. Ezután adjon hozzá egy kattintási eseményfigyelőt a funkciót meghívó gombhoz insertKey a nagybetűs beviteli értékkel.

keys.forEach(belépés => {
hagyja kulcs = dokumentum.createElement("gomb");
ha (belépés "*") {
 key.innerText = "Backspace";
 } más {
 key.innerText = bejegyzés;
 }
 key.className = "kulcs";
 key.setAttribute("adatkulcs", entry.toUpperCase());
 key.addEventListener("kattintás", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
dokumentum.querySelector(`button[adatkulcs=${entry.toUpperCase()}]`).elhomályosít();
 }, 250)
 })
 billentyűzet.hozzáfűzés (billentyű);
})

Új szó beszerzése API-ból

Amikor a felhasználó először betölti a játékot, a játéknak egy új ötbetűs szót kell letöltenie a Véletlen szó API. Ez a szó ezután a titkos világ változó.

funkciógetNewWord() {
asyncfunkciófetchWord() {
próbáld ki {
const válasz = várja fetch(" https://random-word-api.herokuapp.com/word? hossz = 5");
ha (response.ok) {
const adatok = várja válasz.json();
Visszatérés adat;
 } más {
dobásújHiba("Valami elromlott!")
 }
 } fogás (hiba) {
 üzenet.innerText = `Valami elromlott. \n${error}\nEllenőrizze internetkapcsolatát.`;
 }
 }
 fetchWord().then(adat => {
 titkosszó = adat[0].toUpperCase();
 fő();
 })
}

A fenti kódblokkban a fő- függvény akkor fut le, ha a véletlenszerű szót sikeresen lekérte. Határozza meg a fő- funkció közvetlenül a alatt getNewWord funkció:

funkciófő-(){
}

A tábla minden egyes dobozának stílusához szükséged lesz egy listára az egyes sorban lévő összes dobozról. Változó deklarálása, sor amely megragadja a DOM összes sorát. Ezenkívül állítsa be a üzenet megjelenítési stílus egyik sem:

 rows.forEach(sor => [...sor.gyerekek].forEach(gyermek => dobozok.push (gyerek)))
 boxes.forEach((doboz) => {
 box.classList.add("üres");
 })
 message.style.display = "egyik sem";

Ezután adja hozzá a keyup eseményfigyelőt az ablak objektumhoz, és ellenőrizze, hogy a felszabadított kulcs érvényes-e. Ha érvényes, fókuszáljon a megfelelő gombra, szimuláljon egy kattintást, és 250 ms késleltetés után homályosítsa el:

ablak.addEventListener("keyup", (e) => {
ha (isValidCharacter (e.key)) {
dokumentum.querySelector(`button[adatkulcs=${e.key.toUpperCase()}]`).fókusz();
dokumentum.querySelector(`button[adatkulcs=${e.key.toUpperCase()}]`).click();
 setTimeout(() => {
dokumentum.querySelector(`button[adatkulcs=${e.key.toUpperCase()}]`).elhomályosít();
 }, 250)
 }
 })

Alatt keyup eseményfigyelő, állítson be eseményfigyelőket két gombhoz: showBtn és restartBtn. Amikor a játékos kattint showBtn, jelenítsen meg egy pohárköszöntőt az értékével titkos világ változó.

Kattintás restartBtn újratölti az oldalt. Ezenkívül győződjön meg róla, hogy egy isValidCharacter funkcióval ellenőrizheti, hogy egy kulcs érvényes karakter-e.

 showBtn.addEventListener('kattint', () => {
 Toastify({
 szöveg: `Rendben jó! a válasz ${secretWord}`,
 időtartam: 2500,
 osztály név: "éber",
 }).showToast();
 })
 restartBtn.addEventListener('kattint', () => {
 location.reload();
 })
funkcióisValidCharacter(val) {
Visszatérés (val.match(/^[a-zA-Z]+$/) && (val.hossz 1 || val "Backspace"))
 }

Kívül fő- függvény létrehozása a renderBox függvényt, és adjon meg három paramétert: sor (a sor száma), doboz (a doboz indexe a sorban), és adat (a frissítendő szöveges tartalom).

funkciórenderBox(sor, doboz, adat) {
 [...document.querySelector(`.sor-${row}`).children][box].innerText = adatok;
}

Billentyűzet bevitel kezelése funkcióval

A kulcsbevitelek kezeléséhez és a tábla frissítéséhez hozzon létre egy insertKey funkciót a kulcs paraméter. A függvénynek az átadott paraméternek megfelelően kell viselkednie.

funkcióinsertKey(kulcs) {
ha (kulcs "Backspace".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
ha (currentBox !== 0) {
 currentBox--;
 renderBox (currentRow + 1, currentBox, "");
 }
 } más {
ha (currentRow < boardContent.length) {
 boardContent[aktuális sor][aktuálisBox] = kulcs;
 renderBox (currentRow + 1, currentBox, kulcs);
 currentBox++;
 }
ha (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 értékelni (aktuális sor, kulcs);
 currentBox = 0;
 aktuálisRow++;
 }
 }
}

A játékos tippjének értékelése

Hozzon létre egy értékelni függvény, amely elfogad egy sorparamétert. Ez a funkció felelős a játékos tippjének kiértékeléséért.

funkcióértékelni(sor){
}

Minden játéknak van egy Mutasd a választ gomb, amely csak akkor jelenik meg, ha a felhasználó négy tippet adott. Tehát a függvényben valósítsa meg azt a funkciót, amely éppen ezt teszi:

ha (aktuális sor 4) {
 showBtn.removeAttribute('Tiltva')
}

Ezután határozza meg a találgatási változót és egy válaszváltozót, amely ellenőrzi, hogy a betűk a megfelelő pozícióban vannak-e.

hagyja hiszem = boardContent[sor].join('').toUpperCase();
hagyja válasz = titkosWord.split("");

A csempe színező algoritmusa itt jól jön. Emlékezzünk vissza, hogy egy lapkának vagy betűnek zöldnek kell lennie, ha a szóban és a megfelelő helyen van.

Ha a lapka a szóban van, de rossz helyen, a lapka sárga, és végül a szürke szín azokra a lapkákra vonatkozik, amelyek nincsenek benne a szóban.

hagyja színek = találgatás
 .hasított("")
 .térkép((levél, idx) => levél == válasz[idx]? (válasz[idx] = hamis): levél)
 .térkép((levél, idx) =>
 levél
? (idx = válasz.indexOf (betű)) < 0
? "szürke"
: (válasz[idx] = "sárga")
: "zöld"
);

A fenti kódblokk elemenkénti összehasonlítást végez a Találd ki tömb és a válasz sor. Az összehasonlítás eredményei alapján a kód frissíti a színek sor.

Ezután határozza meg a setColors funkció, amely képes befogadni a színek tömböt paraméterként, és színezze megfelelően a csempéket:

funkciósetColor(színek) {
 color.forEach((szín, index) => {
dokumentum.querySelector(`button[adatkulcs=${guess[index].toUpperCase()}]`).style.backgroundColor = szín;
dokumentum.querySelector(`button[adatkulcs=${guess[index].toUpperCase()}]`).style.color= "fekete";
 [...document.querySelector(`.sor-${sor + 1}`).children][index].style.backgroundColor = szín;
 })
}

A játék most befejeződött. Most már csak fel kell hívnia a getNewWord funkciót, és már mehet is.

getNewWord();

Gratulálunk, most hozta létre újra a Wordle-t.

Emelje JavaScript-készségeit a következő szintre a játékok újraalkotásával

Kezdőként új nyelvet tanulni nem könnyű. Az olyan játékok, mint a Tic-tac-toe, Hangman és Wordle újbóli létrehozása olyan nyelven, mint a JavaScript, segíthet a kezdőknek elsajátítani a nyelv fogalmait azáltal, hogy átültetik azokat a gyakorlatba.