Sigurno ste igrali igru ​​Wordle. Evo kako možete izraditi vlastitu verziju Wordlea koristeći JavaScript.

Worlde je popularna igra koja je zaludila svijet početkom 2022. godine. Ponovno kreiranje igre Wordle ili barem izgradnja njezine jednostavnije verzije nešto je o čemu bi programeri koji su tek upoznati s JavaScriptom trebali razmisliti.

Kako Wordle radi

U Wordleu postoji tajna riječ od pet slova. Igrač ima šest pokušaja i mora pogoditi različite riječi od pet slova kako bi vidio koliko su blizu tajnoj riječi.

Nakon što igrač pogađa, Wordle koristi boje kako bi igraču rekao koliko je blizu tajnoj riječi. Ako slovo ima žutu boju, to znači da je slovo u tajnoj riječi, ali na pogrešnom mjestu.

Zelena boja govori korisniku da je slovo u tajnoj riječi i na pravom mjestu, dok siva boja govori igraču da slovo nije u riječi.

Postavljanje razvojnog poslužitelja

Kod korišten u ovom projektu dostupan je u a GitHub spremište i besplatan je za korištenje pod MIT licencom. Ako želite pogledati verziju ovog projekta uživo, pogledajte ovo demo.

instagram viewer

Projekt koristi Vite alat za izradu preko Sučelje naredbenog retka (CLI) za skele. Provjerite imate li Yarn instaliran na računalu jer je općenito brži od Node Package Manager (NPM). Otvorite svoj terminal i pokrenite sljedeću naredbu:

pređa stvoriti vite

Ovo će stvoriti novi Vite projekt. Okvir bi trebao biti vanilija a varijantu treba postaviti na JavaScript. Sada pokrenite:

pređa

Ovo će instalirati sve ovisnosti potrebne za rad projekta. Nakon ove instalacije, pokrenite sljedeću naredbu za pokretanje razvojnog poslužitelja:

pređa dev

Postavljanje igre i dizajn tipkovnice

Otvorite projekt u uređivaču koda, obrišite sadržaj glavni.js datoteku i provjerite izgleda li mapa vašeg projekta ovako:

Sada zamijenite sadržaj index.html datoteka sa sljedećim šablonskim kodom:

html>
<htmljezik="en">
<glava>
<metaskup znakova="UTF-8" />
<vezarel="ikona"tip="slika/svg+xml"href="/vite.svg" />
<metaIme="viewport"sadržaj="width=device-width, initial-scale=1.0" />
<titula>JS Wordletitula>
glava>


<tijelo>
<diviskaznica="aplikacija">
<div>
<h1>Wordle klonh1>
<diviskaznica="kontrole">
<dugmeiskaznica="ponovno pokretanje-btn">Replaydugme>
<dugmeiskaznica="show-btn">Pokaži odgovordugme>
div>
<diviskaznica="poruka">Molimo pričekajte. Igra se učitava...div>
div>
<diviskaznica="sučelje">
<diviskaznica="odbor">div>
<divrazreda="tipkovnica">div>
div>
div>
<skriptatip="modul"src="/main.js">skripta>
tijelo>
html>

Za CSS prijeđite na GitHub repozitorij ovog projekta i kopirajte sadržaj stil.css unesite u svoj vlastiti stil.css datoteka.

Sada u terminalu instalirajte Toastify NPM paket izvođenjem sljedeće naredbe:

pređe dodati tostify -S

Toastify je popularan JavaScript paket koji vam omogućuje prikazivanje upozorenja korisniku. Dalje, u glavni.js datoteku, uvezite stil.css datoteka i nazdraviti korisnost.

uvoz"./style.css"
uvoz Prepecite iz'toastify-js'

Definirajte sljedeće varijable kako biste olakšali interakciju s DOM elementima:

neka ploča = dokument.querySelector("#odbor");
neka poruka = dokument.querySelector("#poruka");
neka ključevi = "QWERTYUIOPASDFGHJKLZXCVBNM".podjela("");
neka restartBtn = dokument.querySelector("#restart-btn");
neka showBtn = dokument.querySelector("#show-btn");
showBtn.setAttribute("onemogućeno", "pravi");
tipke.push("Backspace");
neka tipkovnica = dokument.querySelector(".tipkovnica");

Postavljanje ploče za igru

Budući da je Wordle igra u kojoj korisnik mora pogoditi riječ od pet slova u šest pokušaja, definirajte varijablu tzv. boardContent koji sadrži niz od šest nizova. Zatim definirajte varijable trenutni redak i CurrentBox kako bi ga lakše pregazili boardContent.

neka 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],
];
neka trenutni red = 0;
neka CurrentBox = 0;
neka tajna rijec;

Da biste prikazali ploču s pet okvira u svakom od šest redaka pomoću HTML elemenata, koristite ugniježđene petlje za ponavljanje i stvaranje elemenata. Na kraju ih pričvrstite na ploču.

za (neka ja = 0; ja <= 5; i++) {
neka red = dokument.createElement('div')
za (neka y = 0; y <= 4; y++) {
neka kutija = dokument.createElement('raspon');
 row.appendChild (kutija);
 row.className = `red-${i + 1}`
 }
 board.appendChild (red);
}

Dodavanje tipkovnice i slušanje unosa s tipkovnice

Da biste stvorili tipkovnicu, iterirajte kroz tipke pomoću za svakoga, stvarajući element gumba za svaki unos. Postavite tekst gumba na Backspace ako je unos *, inače je postavite na vrijednost unosa.

Dodijelite ključ klase na gumb i postavite podatkovni ključ atribut vrijednosti unosa velikim slovima. Zatim dodajte slušatelja klika na gumb koji poziva funkciju insertKey s vrijednošću unosa velikim slovima.

ključevi.zaSvaki(unos => {
neka ključ = dokument.createElement("dugme");
ako (ulaz "*") {
 key.innerText = "Backspace";
 } drugo {
 key.innerText = unos;
 }
 ključ.className = "ključ";
 key.setAttribute("podatkovni ključ", unos.toUpperCase());
 key.addEventListener("klik", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
dokument.querySelector(`gumb[data-key=${entry.toUpperCase()}]`).zamutiti();
 }, 250)
 })
 tipkovnica.dodaj (ključ);
})

Dobivanje nove riječi iz API-ja

Kada korisnik prvi put učita igru, igra bi trebala dohvatiti novu riječ od pet slova iz Slučajna riječ API. Ta se riječ zatim pohranjuje u tajna rijec varijabla.

funkcijagetNewWord() {
asinkronifunkcijadohvati Riječ() {
probati {
konst odgovor = čekati dohvati (" https://random-word-api.herokuapp.com/word? duljina=5");
ako (odgovor.ok) {
konst podaci = čekati odgovor.json();
povratak podaci;
 } drugo {
bacanjenoviGreška("Nešto je pošlo po zlu!")
 }
 } ulov (pogreška) {
 message.innerText = `Nešto nije u redu. \n${greška}\nProvjerite internetsku vezu.`;
 }
 }
 fetchWord().then(podaci => {
 tajnariječ = podaci[0].velikim slovima();
 glavni();
 })
}

U gornjem bloku koda, glavni funkcija se pokreće ako je nasumična riječ uspješno dohvaćena. Definirajte a glavni funkcija odmah ispod getNewWord funkcija:

funkcijaglavni(){
}

Da biste stilizirali svaki okvir na ploči, trebat će vam popis svih okvira u svakom retku. Deklarirajte varijablu, red koji hvata sve retke u DOM-u. Također, postavite poruka prikazati stil za nikakav:

 rows.forEach(red => [...row.children].forEach(dijete => kutije.gurni (dijete)))
 boxes.forEach((kutija) => {
 box.classList.add("prazan");
 })
 message.style.display = "ništa";

Zatim dodajte a keyup slušatelj događaja objektu prozora i provjeri je li otpušteni ključ valjan. Ako je valjano, fokusirajte se na odgovarajući gumb, simulirajte klik i zamutite ga nakon odgode od 250 ms:

prozor.addEventListener('ključ', (e) => {
ako (isValidCharacter (e.key)) {
dokument.querySelector(`gumb[data-key=${e.key.toUpperCase()}]`).usredotočenost();
dokument.querySelector(`gumb[data-key=${e.key.toUpperCase()}]`).klik();
 setTimeout(() => {
dokument.querySelector(`gumb[data-key=${e.key.toUpperCase()}]`).zamutiti();
 }, 250)
 }
 })

Ispod keyup slušatelj događaja, postavite slušatelje događaja za dva gumba: pokazatiBtn i restartBtn. Kad igrač klikne pokazatiBtn, prikazati tost obavijest s vrijednošću tajna rijec varijabla.

Klikanje restartBtn ponovno učitava stranicu. Također, provjerite jeste li uključili isValidCharacter funkcija za provjeru je li ključ važeći znak.

 showBtn.addEventListener('klik', () => {
 Toastify({
 tekst: `U redu dobro! odgovor je ${secretWord}`,
 trajanje: 2500,
 naziv klase: "uzbuna",
 }).showToast();
 })
 restartBtn.addEventListener('klik', () => {
 lokacija.reload();
 })
funkcijaisValidCharacter(val) {
povratak (val.match(/^[a-zA-Z]+$/) && (val.duljina 1 || val "Backspace"))
 }

Izvan glavni funkcija, stvoriti a renderBox funkcioniraju i daju tri parametra: red (broj reda), kutija (indeks okvira unutar retka), i podaci (tekstualni sadržaj za ažuriranje).

funkcijarenderBox(red, okvir, podaci) {
 [...document.querySelector(`.row-${row}`).children][box].innerText = podaci;
}

Rukovanje unosom s tipkovnice pomoću funkcije

Za rukovanje ključnim unosima i ažuriranje ploče, stvorite insertKey funkcija s a ključ parametar. Funkcija bi se trebala ponašati u skladu s proslijeđenim parametrom.

funkcijainsertKey(ključ) {
ako (ključ "Backspace".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
ako (trenutni okvir !== 0) {
 CurrentBox--;
 renderBox (currentRow + 1, CurrentBox, "");
 }
 } drugo {
ako (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = ključ;
 renderBox (currentRow + 1, trenutni okvir, ključ);
 CurrentBox++;
 }
ako (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 evaluate (currentRow, key);
 CurrentBox = 0;
 trenutni red++;
 }
 }
}

Procjena nagađanja igrača

Stvorite procijeniti funkcija koja prihvaća parametar retka. Ova funkcija je odgovorna za procjenu pogađanja igrača.

funkcijaprocijeniti(red){
}

Svaka igra ima Pokaži odgovor gumb koji se pojavljuje tek nakon što korisnik četiri puta pogodi. Dakle, u funkciji implementirajte funkcionalnost koja radi upravo to:

ako (trenutni red 4) {
 showBtn.removeAttribute('onemogućeno')
}

Zatim definirajte varijablu pogađanja i varijablu odgovora koja provjerava jesu li slova u ispravnom položaju.

neka pogodi = boardContent[row].join('').velikim slovima();
neka odgovor = tajnaRiječ.split("");

Ovdje će vam dobro doći algoritam za bojanje pločica. Podsjetimo se da bi pločica ili slovo trebalo biti zeleno ako se nalazi u riječi i na ispravnom mjestu.

Ako je pločica u riječi, ali na pogrešnom mjestu, pločica je žuta i konačno, siva boja je za pločice koje nisu u riječi.

neka boje = pogodi
 .podjela("")
 .karta((pismo, idx) => slovo == odgovor[idx]? (odgovor[idx] = lažno): pismo)
 .karta((pismo, idx) =>
 pismo
? (idx = answer.indexOf (slovo)) < 0
? "siva"
: (odgovor[idx] = "žuta boja")
: "zeleno"
);

Navedeni blok koda iznad izvodi usporedbu element po element između pogoditi niz i odgovor niz. Na temelju rezultata ove usporedbe, kod ažurira boje niz.

Zatim definirajte a setColors funkcija koja može preuzeti boje niz kao parametar i obojite pločice na odgovarajući način:

funkcijasetColor(boje) {
 boje.zaSvaki((boja, indeks) => {
dokument.querySelector(`gumb[data-key=${guess[index].toUpperCase()}]`).style.backgroundColor = boja;
dokument.querySelector(`gumb[data-key=${guess[index].toUpperCase()}]`).style.color= "crno";
 [...document.querySelector(`.row-${redak + 1}`).children][index].style.backgroundColor = boja;
 })
}

Igra je sada završena. Sve što sada trebate učiniti je nazvati getNewWord funkcija i spremni ste.

getNovaRiječ();

Čestitamo, upravo ste ponovno stvorili Wordle.

Podignite svoje vještine JavaScripta na višu razinu rekreiranjem igara

Naučiti novi jezik kao početnik nije lako. Rekreiranje igara poput Tic-tac-toe, Hangman i Wordle na jeziku kao što je JavaScript može pomoći početnicima da svladaju koncepte jezika tako što će ih primijeniti u praksi.