Cum să construiți o clonă Wordle cu JavaScript

Worlde este un joc popular care a luat lumea cu asalt la începutul anului 2022. Recrearea jocului Wordle sau cel puțin construirea unei versiuni mai simple a acestuia este ceva pe care dezvoltatorii care sunt noi în JavaScript ar trebui să ia în considerare.

Cum funcționează Wordle

În Wordle, există un cuvânt secret din cinci litere. Jucătorul are șase încercări și trebuie să ghicească diferite cuvinte din cinci litere pentru a vedea cât de aproape sunt acestea de cuvântul secret.

După ce jucătorul trimite o presupunere, Wordle folosește culori pentru a-i spune jucătorului cât de aproape este de cuvântul secret. Dacă o literă are culoarea galbenă, înseamnă că litera se află în cuvântul secret, dar în poziție greșită.

Culoarea verde îi spune utilizatorului că litera se află în cuvântul secret și în poziția corectă, în timp ce culoarea gri îi spune jucătorului că litera nu este în cuvânt.

Configurarea serverului de dezvoltare

Codul folosit în acest proiect este disponibil în a Depozitul GitHub și este gratuit pentru utilizare sub licența MIT. Dacă doriți să aruncați o privire la o versiune live a acestui proiect, puteți verifica aceasta demonstrație.

Proiectul folosește Vite build instrument prin intermediul Interfață de linie de comandă (CLI) pentru schele. Asigurați-vă că aveți Yarn instalat pe computer, deoarece este în general mai rapid decât Node Package Manager (NPM). Deschideți terminalul și rulați următoarea comandă:

yarn create vite

Acest lucru va crea un nou proiect Vite. Cadrul ar trebui să fie Vanilie iar varianta ar trebui să fie setată la JavaScript. Acum rulați:

fire

Acest lucru va instala toate dependențele necesare pentru ca proiectul să funcționeze. După această instalare, rulați următoarea comandă pentru a porni serverul de dezvoltare:

fire dev

Configurarea jocului și proiectarea tastaturii

Deschideți proiectul în editorul de cod, ștergeți conținutul main.js fișier și asigurați-vă că folderul proiectului arată astfel:

Acum, înlocuiți conținutul index.html fișier cu următorul cod standard:

html>
<htmllang="ro">
<cap>
<metaset de caractere=„UTF-8” />
<legăturărel="icoana"tip=„imagine/svg+xml”href=„/vite.svg” />
<metaNume="vizor"conţinut=„width=device-width, initial-scale=1.0” />
<titlu>JS Wordletitlu>
cap>
<corp>
<divid=„aplicație”>
<div>
<h1>Clona Wordleh1>
<divid="controale">
<butonid="repornire-btn">Reluarebuton>
<butonid=„show-btn”>Arată răspunsulbuton>
div>
<divid="mesaj">Va rugam asteptati. Jocul se încarcă...div>
div>
<divid="interfata">
<divid="bord">div>
<divclasă="tastatură">div>
div>
div>
<scenariutip="modul"src=„/main.js”>scenariu>
corp>
html>

Pentru CSS, mergeți la depozitul GitHub al acestui proiect și copiați conținutul fișierului stil.css dosar în propriul tău stil.css fişier.

Acum, în terminal, instalați pachetul Toastify NPM rulând următoarea comandă:

fire adauga toastify -S

Toastify este un pachet JavaScript popular care vă permite să afișați alerte utilizatorului. În continuare, în main.js fișier, importați stil.css dosarul și toastify utilitate.

import„./style.css”
import Toastify din„toastify-js”

Definiți următoarele variabile pentru a facilita interacțiunea cu elementele DOM:

lăsa bord = document.querySelector("#bord");
lăsa mesaj = document.querySelector("#mesaj");
lăsa chei = „QWERTYUIOPASDFGHJKLZXCVBNM”.Despică("");
lăsa restartBtn = document.querySelector(„#repornire-btn”);
lăsa showBtn = document.querySelector(„#show-btn”);
showBtn.setAttribute("dezactivat", "Adevărat");
keys.push("Backspace");
lăsa tastatura = document.querySelector(".tastatură");

Configurarea tablei de joc

Deoarece Wordle este un joc în care utilizatorul trebuie să ghicească un cuvânt de cinci litere în șase încercări, definiți o variabilă numită boardContent care deține o matrice de șase matrice. Apoi definiți variabilele currentRow și currentBox pentru a fi mai ușor de traversat boardContent.

lăsa 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],
];
lăsa currentRow = 0;
lăsa currentBox = 0;
lăsa cuvant secret;

Pentru a reda placa cu cinci casete în fiecare dintre cele șase rânduri folosind elemente HTML, utilizați bucle imbricate pentru a repeta și a crea elementele. În cele din urmă, adăugați-le pe tablă.

pentru (lăsa i = 0; eu <= 5; i++) {
lăsa rând = document.createElement('div')
pentru (lăsa y = 0; y <= 4; y++) {
lăsa caseta = document.createElement('span');
 row.appendChild (caseta);
 row.className = `rând-${i + 1}`
 }
 board.appendChild (rând);
}

Adăugarea tastaturii și ascultarea intrării de la tastatură

Pentru a crea tastatura, repetați tastele folosind pentru fiecare, creând un element buton pentru fiecare intrare. Setați textul butonului la Backspace dacă intrarea este *, în caz contrar setați-o la valoarea de intrare.

Atribuiți cheie clasa la butonul și setați cheie de date atribut valorii de intrare majuscule. Apoi, adăugați un ascultător de evenimente clic la butonul care apelează funcția insertKey cu valoarea de intrare majuscule.

keys.forEach(intrare => {
lăsa cheie = document.createElement("buton");
dacă (intrare "*") {
 key.innerText = "Backspace";
 } altfel {
 key.innerText = intrare;
 }
 key.className = "cheie";
 key.setAttribute("cheie de date", entry.toUpperCase());
 key.addEventListener("clic", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
document.querySelector(`button[data-key=${entry.toUpperCase()}]`).estompa();
 }, 250)
 })
 keyboard.append (tasta);
})

Obținerea unui cuvânt nou dintr-un API

Când utilizatorul încarcă pentru prima dată jocul, jocul ar trebui să preia un cuvânt nou de cinci litere din Cuvânt aleatoriu API. Acest cuvânt este apoi stocat în cuvant secret variabil.

funcţiegetNewWord() {
asincronfuncţiefetchWord() {
încerca {
const răspuns = așteaptă aduce(" https://random-word-api.herokuapp.com/word? lungime=5");
dacă (răspuns.ok) {
const date = așteaptă răspuns.json();
întoarcere date;
 } altfel {
aruncanouEroare("Ceva n-a mers bine!")
 }
 } captură (eroare) {
 message.innerText = „Ceva a mers prost. \n${error}\nVerificați-vă conexiunea la internet.`;
 }
 }
 fetchWord().then(date => {
 secretWord = date[0].toUpperCase();
 principal();
 })
}

În blocul de cod de mai sus, principal funcția rulează dacă cuvântul aleatoriu este preluat cu succes. Definiți a principal funcția chiar sub getNewWord funcţie:

funcţieprincipal(){
}

Pentru a stila fiecare casetă de pe tablă, veți avea nevoie de o listă cu toate casetele din fiecare rând. Declarați o variabilă, rând care apucă toate rândurile din DOM. De asemenea, setați mesaj stilul de afișare la nici unul:

 rows.forEach(rând => [...rând.copii].pentruFiecare(copil => cutii.împinge (copil)))
 boxes.forEach((cutie) => {
 box.classList.add("gol");
 })
 mesaj.style.display = "nici unul";

Apoi, adăugați a tastare ascultător de evenimente la obiectul fereastră și verificați dacă cheia eliberată este validă. Dacă este valid, concentrați-vă pe butonul corespunzător, simulați un clic și estompați-l după o întârziere de 250 ms:

fereastră.addEventListener('keyup', (e) => {
dacă (isValidCharacter (e.key)) {
document.querySelector(`button[data-key=${e.key.toUpperCase()}]`).focus();
document.querySelector(`button[data-key=${e.key.toUpperCase()}]`).clic();
 setTimeout(() => {
document.querySelector(`button[data-key=${e.key.toUpperCase()}]`).estompa();
 }, 250)
 }
 })

Sub tastare ascultător de evenimente, configurați ascultători de evenimente pentru două butoane: aratăBtn și restartBtn. Când jucătorul dă clic aratăBtn, afișați o notificare toast cu valoarea lui cuvant secret variabil.

Făcând clic restartBtn reîncarcă pagina. De asemenea, asigurați-vă că includeți un isValidCharacter funcție pentru a verifica dacă o tastă este un caracter valid.

 showBtn.addEventListener('clic', () => {
 Toastify({
 text: `Bine bine! raspunsul este ${secretWord}`,
 durată: 2500,
 numele clasei: "alerta",
 }).showToast();
 })
 restartBtn.addEventListener('clic', () => {
 locație.reîncărcare();
 })
funcţieisValidCharacter(val) {
întoarcere (val.match(/^[a-zA-Z]+$/) && (lungimea val 1 || val "Backspace"))
 }

In afara principal funcția, creați a renderBox funcţionează şi oferă trei parametri: rând (numărul rândului), cutie (indexul casetei din rând) și date (conținutul textului de actualizat).

funcţierenderBox(rând, casetă, date) {
 [...document.querySelector(`.rând-${row}`).copii][box].innerText = date;
}

Gestionarea intrării de la tastatură cu o funcție

Pentru a gestiona intrările cheie și pentru a actualiza placa, creați un insertKey functioneaza cu a cheie parametru. Funcția ar trebui să se comporte conform parametrului transmis.

funcţieinsertKey(cheie) {
dacă (cheie "Backspace".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
dacă (currentBox !== 0) {
 currentBox--;
 renderBox (currentRow + 1, currentBox, "");
 }
 } altfel {
dacă (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = cheie;
 renderBox (currentRow + 1, currentBox, cheie);
 currentBox++;
 }
dacă (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 evalua (currentRow, cheie);
 currentBox = 0;
 currentRow++;
 }
 }
}

Evaluarea presupunerii jucătorului

Creaza un a evalua funcție care acceptă un parametru de rând. Această funcție este responsabilă pentru evaluarea ipotezei jucătorului.

funcţiea evalua(rând){
}

Fiecare joc are un Arată răspunsul buton care apare numai după ce utilizatorul a făcut patru ghiciri. Deci, în funcție, implementați funcționalitatea care face exact asta:

dacă (Rândul curent 4) {
 showBtn.removeAttribute('dezactivat')
}

Apoi definiți variabila ghici și o variabilă de răspuns care verifică dacă literele sunt în poziția corectă.

lăsa ghici = boardContent[row].join('').toUpperCase();
lăsa răspuns = secretWord.split("");

Algoritmul de colorare a plăcilor va fi util aici. Amintiți-vă că o țiglă sau o literă ar trebui să fie verde dacă se află în cuvânt și în locul corect.

Dacă țigla este în cuvânt, dar în locul greșit, țigla este galbenă și, în sfârșit, culoarea gri este pentru plăcile care nu sunt în cuvânt.

lăsa culori = ghici
 .Despică("")
 .Hartă((scrisoare, idx) => scrisoare == răspuns[idx]? (răspunde[idx] = fals): scrisoare)
 .Hartă((scrisoare, idx) =>
 scrisoare
? (idx = răspuns.indexOf (litera)) < 0
? "gri"
: (răspunde[idx] = "galben")
: "verde"
);

Blocul de cod dat de mai sus realizează o comparație element cu element între ghici matrice și Răspuns matrice. Pe baza rezultatelor acestei comparații, codul actualizează culorile matrice.

Apoi, definiți a setColors funcţie care poate prelua în culorile matrice ca parametru și colorați plăcile în mod corespunzător:

funcţiesetColor(culorile) {
 culori.pentru fiecare((culoare, index) => {
document.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).style.backgroundColor = culoare;
document.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).stil.culoare= "negru";
 [...document.querySelector(`.rând-${rând + 1}`).copii][index].style.backgroundColor = culoare;
 })
}

Jocul este acum complet. Tot ce trebuie să faci acum este să suni la getNewWord funcția și ești gata.

getNewWord();

Felicitări, tocmai ai recreat Wordle.

Du-ți abilitățile JavaScript la nivelul următor recreând jocuri

Să înveți o nouă limbă ca începător nu este ușor. Recrearea jocurilor precum Tic-tac-toe, Hangman și Wordle într-un limbaj precum JavaScript poate ajuta începătorii să stăpânească conceptele limbajului punându-le în practică.