Gotovo ste igrali igro Wordle. Tukaj je opisano, kako lahko ustvarite svojo različico Wordla z uporabo JavaScripta.

Worlde je priljubljena igra, ki je v začetku leta 2022 prevzela svet. Ponovna izdelava igre Wordle ali vsaj izdelava njene enostavnejše različice je nekaj, o čemer bi morali razmišljati razvijalci, ki so novi v JavaScriptu.

Kako deluje Wordle

V Wordlu obstaja skrivna beseda s petimi črkami. Igralec ima šest poskusov in mora uganiti različne besede s petimi črkami, da vidi, kako blizu so skrivni besedi.

Ko igralec ugiba, Wordle z barvami pove igralcu, kako blizu je skrivni besedi. Če je črka rumene barve, to pomeni, da je črka v skrivni besedi, vendar na napačnem mestu.

Zelena barva pove uporabniku, da je črka v skrivni besedi in na pravem mestu, medtem ko siva barva pove igralcu, da črka ni v besedi.

Nastavitev razvojnega strežnika

Koda, uporabljena v tem projektu, je na voljo v a Repozitorij GitHub in je brezplačen za uporabo pod licenco MIT. Če si želite ogledati različico tega projekta v živo, si lahko ogledate to demo.

instagram viewer

Projekt uporablja Orodje za gradnjo Vite prek Vmesnik ukazne vrstice (CLI) za gradbene odre. Prepričajte se, da imate Yarn nameščen na vašem računalniku, ker je na splošno hitrejši od Node Package Manager (NPM). Odprite terminal in zaženite naslednji ukaz:

preje ustvariti vite

To bo ustvarilo nov projekt Vite. Okvir mora biti Vanilija in različica mora biti nastavljena na JavaScript. Zdaj zaženite:

preja

To bo namestilo vse odvisnosti, potrebne za delovanje projekta. Po tej namestitvi zaženite naslednji ukaz za zagon razvojnega strežnika:

preja dev

Nastavitev igre in oblikovanje tipkovnice

Odprite projekt v urejevalniku kode, počistite vsebino main.js in se prepričajte, da je mapa vašega projekta videti takole:

Zdaj zamenjajte vsebino index.html datoteka z naslednjo kodo:

html>
<htmljezik="en">
<glavo>
<metanabor znakov="UTF-8" />
<povezavarel="ikona"vrsta="slika/svg+xml"href="/vite.svg" />
<metaime="viewport"vsebino="width=device-width, initial-scale=1.0" />
<naslov>JS Wordlenaslov>
glavo>


<telo>
<divid="aplikacija">
<div>
<h1>Wordle Cloneh1>
<divid="kontrole">
<gumbid="restart-btn">Ponovitevgumb>
<gumbid="show-btn">Pokaži odgovorgumb>
div>
<divid="sporočilo">Prosim počakaj. Igra se nalaga ...div>
div>
<divid="vmesnik">
<divid="tabla">div>
<divrazred="tipkovnica">div>
div>
div>
<scenarijvrsta="modul"src="/main.js">scenarij>
telo>
html>

Za CSS pojdite v repozitorij GitHub tega projekta in kopirajte vsebino style.css datoteko v svoje style.css mapa.

Zdaj v terminalu namestite paket Toastify NPM tako, da zaženete naslednji ukaz:

preje dodaj toastify -S

Toastify je priljubljen paket JavaScript, ki omogoča prikazovanje opozoril uporabniku. Naprej, v main.js datoteko, uvozite style.css datoteko in popeči uporabnost.

uvoz"./style.css"
uvoz Nazdravite od'toastify-js'

Za lažjo interakcijo z elementi DOM definirajte naslednje spremenljivke:

pustiti tabla = dokument.querySelector("#tabla");
pustiti sporočilo = dokument.querySelector("#sporočilo");
pustiti ključi = "QWERTYUIOPASDFGHJKLZXCVBNM".split("");
pustiti restartBtn = dokument.querySelector("#restart-btn");
pustiti pokažiBtn = dokument.querySelector("#show-btn");
showBtn.setAttribute("onemogočeno", "prav");
keys.push("Backspace");
pustiti tipkovnica = dokument.querySelector(".tipkovnica");

Postavitev igralne plošče

Ker je Wordle igra, kjer mora uporabnik uganiti besedo s petimi črkami v šestih poskusih, definirajte spremenljivko, imenovano boardContent ki vsebuje niz šestih nizov. Nato definirajte spremenljivke currentRow in currentBox da bi ga lažje prehodili boardContent.

pustiti 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],
];
pustiti trenutna vrstica = 0;
pustiti currentBox = 0;
pustiti Skrita Beseda;

Če želite upodobiti tablo s petimi polji v vsaki od šestih vrstic z uporabo elementov HTML, uporabite ugnezdene zanke za ponavljanje in ustvarjanje elementov. Nazadnje jih pripnite na tablo.

za (pustiti jaz = 0; jaz <= 5; i++) {
pustiti vrstica = dokument.createElement('div')
za (pustiti y = 0; y <= 4; y++) {
pustiti škatla = dokument.createElement('razpon');
 row.appendChild (polje);
 row.className = `vrstica-${i + 1}`
 }
 board.appendChild (vrstica);
}

Dodajanje tipkovnice in poslušanje vnosa s tipkovnico

Če želite ustvariti tipkovnico, ponavljajte tipke z uporabo za vsakogar, ustvarjanje elementa gumba za vsak vnos. Nastavite besedilo gumba na vračalka če je vnos *, sicer ga nastavite na vnosno vrednost.

Dodelite ključ razreda na gumb in nastavite podatkovni ključ atribut vrednosti vnosa z velikimi črkami. Nato gumbu, ki kliče funkcijo, dodajte poslušalca dogodka klika vstaviKey z vrednostjo vnosa z velikimi črkami.

keys.forEach(vstop => {
pustiti ključ = dokument.createElement("gumb");
če (vstop "*") {
 key.innerText = "Backspace";
 } drugače {
 key.innerText = vnos;
 }
 key.className = "ključ";
 key.setAttribute("podatkovni ključ", vpis.toUpperCase());
 key.addEventListener("klik", () => {
 vstaviKey (entry.toUpperCase())
 setTimeout(() => {
dokument.querySelector(`gumb[podatkovni-ključ=${entry.toUpperCase()}]`).blur();
 }, 250)
 })
 keyboard.append (tipka);
})

Pridobivanje nove besede iz API-ja

Ko uporabnik prvič naloži igro, mora ta pridobiti novo besedo s petimi črkami iz Naključna beseda API. Ta beseda se nato shrani v Skrita Beseda spremenljivka.

funkcijogetNewWord() {
asinhfunkcijofetchWord() {
poskusi {
konst odgovor = čakati prinesi (" https://random-word-api.herokuapp.com/word? dolžina=5");
če (odgovor.ok) {
konst podatki = čakati odziv.json();
vrnitev podatki;
 } drugače {
metatinovoNapaka("Nekaj ​​je šlo narobe!")
 }
 } ulov (napaka) {
 message.innerText = `Nekaj ​​je šlo narobe. \n${error}\nPreverite internetno povezavo.`;
 }
 }
 fetchWord().then(podatke => {
 tajnaBeseda = podatki[0].toUpperCase();
 glavni();
 })
}

V zgornjem bloku kode je glavni funkcija se zažene, če je naključna beseda uspešno pridobljena. Določite a glavni funkcijo desno pod getNewWord funkcija:

funkcijoglavni(){
}

Če želite oblikovati vsako polje na tabli, boste potrebovali seznam vseh polj v vsaki vrstici. Deklarirajte spremenljivko, vrstica ki zgrabi vse vrstice v DOM. Prav tako nastavite sporočilo slog prikaza do nobeden:

 rows.forEach(vrstica => [...row.children].forEach(otrok => boxes.push (otrok)))
 boxes.forEach((škatla) => {
 box.classList.add("prazno");
 })
 message.style.display = "noben";

Nato dodajte a keyup poslušalec dogodkov v okenski objekt in preveri, ali je sproščeni ključ veljaven. Če velja, se osredotočite na ustrezni gumb, simulirajte klik in ga zameglite po 250 ms zakasnitvi:

okno.addEventListener('keyup', (e) => {
če (isValidCharacter (e.key)) {
dokument.querySelector(`gumb[podatkovni-ključ=${e.key.toUpperCase()}]`).fokus();
dokument.querySelector(`gumb[podatkovni-ključ=${e.key.toUpperCase()}]`).klikni();
 setTimeout(() => {
dokument.querySelector(`gumb[podatkovni-ključ=${e.key.toUpperCase()}]`).blur();
 }, 250)
 }
 })

Pod keyup poslušalec dogodkov, nastavite poslušalce dogodkov za dva gumba: showBtn in restartBtn. Ko igralec klikne showBtn, prikaže obvestilo o zdravici z vrednostjo Skrita Beseda spremenljivka.

Klikanje restartBtn ponovno naloži stran. Prepričajte se tudi, da vključite isValidCharacter funkcijo za preverjanje, ali je ključ veljaven znak.

 showBtn.addEventListener('klik', () => {
 Toastify({
 besedilo: `Prav dobro! odgovor je ${secretWord}`,
 trajanje: 2500,
 ime razreda: "opozorilo",
 }).showToast();
 })
 restartBtn.addEventListener('klik', () => {
 lokacija.reload();
 })
funkcijoisValidCharacter(val) {
vrnitev (val.match(/^[a-zA-Z]+$/) && (val.dolžina 1 || val "Backspace"))
 }

Zunaj glavni funkcijo, ustvarite a renderBox funkcijo in zagotovite tri parametre: vrstica (številka vrstice), škatla (indeks polja v vrstici) in podatke (vsebina besedila za posodobitev).

funkcijorenderBox(vrstica, polje, podatki) {
 [...document.querySelector(`.row-${row}`).children][box].innerText = podatki;
}

Upravljanje vnosa s tipkovnico s funkcijo

Za obdelavo ključnih vnosov in posodobitev plošče ustvarite vstaviKey funkcija z a ključ parameter. Funkcija se mora obnašati v skladu s podanim parametrom.

funkcijovstaviKey(ključ) {
če (ključ "Backspace".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
če (trenutno polje !== 0) {
 currentBox--;
 renderBox (currentRow + 1, trenutno polje, "");
 }
 } drugače {
če (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = ključ;
 renderBox (currentRow + 1, trenutno polje, ključ);
 currentBox++;
 }
če (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 ovrednotiti (trenutna vrstica, ključ);
 currentBox = 0;
 trenutna vrstica++;
 }
 }
}

Ocenjevanje ugibanja igralca

Ustvarite oceniti funkcija, ki sprejme parameter vrstice. Ta funkcija je odgovorna za ocenjevanje ugibanja igralca.

funkcijooceniti(vrstica){
}

Vsaka igra ima Pokaži odgovor gumb, ki se prikaže šele, ko uporabnik štirikrat ugiba. Torej, v funkciji implementirajte funkcionalnost, ki naredi prav to:

če (trenutna vrstica 4) {
 showBtn.removeAttribute('onemogočeno')
}

Nato določite spremenljivko ugibanja in spremenljivko odgovora, ki preverja, ali so črke v pravilnem položaju.

pustiti guess = boardContent[row].join('').toUpperCase();
pustiti odgovor = secretWord.split("");

Tukaj bo prišel prav algoritem za barvanje ploščic. Ne pozabite, da mora biti ploščica ali črka zelena, če je v besedi in na pravem mestu.

Če je ploščica v besedi, vendar na napačnem mestu, je ploščica rumena in končno je siva barva za ploščice, ki niso v besedi.

pustiti barve = ugibanje
 .split("")
 .zemljevid((pismo, idx) => pismo == odgovor[idx]? (odgovor[idx] = lažno): pismo)
 .zemljevid((pismo, idx) =>
 pismo
? (idx = answer.indexOf (črka)) < 0
? "siva"
: (odgovor[idx] = "rumena")
: "zelena"
);

Navedeni kodni blok zgoraj izvaja primerjavo elementov za elementom med ugibati niz in odgovor niz. Na podlagi rezultatov te primerjave koda posodobi barve niz.

Nato določite a setColors funkcijo, ki lahko prevzame barve polje kot parameter in ploščice ustrezno obarvajte:

funkcijosetColor(barve) {
 colors.forEach((barva, indeks) => {
dokument.querySelector(`gumb[podatkovni-ključ=${guess[index].toUpperCase()}]`).style.backgroundColor = barva;
dokument.querySelector(`gumb[podatkovni-ključ=${guess[index].toUpperCase()}]`).style.color= "Črna";
 [...document.querySelector(`.row-${vrstica + 1}`).children][index].style.backgroundColor = barva;
 })
}

Igra je zdaj končana. Vse kar morate storiti je, da pokličete getNewWord funkcijo in pripravljeni ste.

getNewWord();

Čestitamo, pravkar ste poustvarili Wordle.

S poustvarjanjem iger dvignite svoje spretnosti JavaScripta na višjo raven

Učenje novega jezika kot začetnik ni enostavno. Poustvarjanje iger, kot so Tic-tac-toe, Hangman in Wordle, v jeziku, kot je JavaScript, lahko začetnikom pomaga obvladati koncepte jezika, tako da jih uporabijo v praksi.