Jak zbudować klon Wordle za pomocą JavaScript

Worlde to popularna gra, która szturmem podbiła świat na początku 2022 roku. Odtworzenie gry Wordle lub przynajmniej zbudowanie jej prostszej wersji jest czymś, co programiści, którzy są nowicjuszami w JavaScript, powinni rozważyć.

Jak działa Wordle

W Wordle istnieje tajne pięcioliterowe słowo. Gracz ma sześć prób i musi odgadnąć różne pięcioliterowe słowa, aby zobaczyć, jak blisko jest tajnego słowa.

Po tym, jak gracz zgadnie, Wordle używa kolorów, aby powiedzieć graczowi, jak blisko jest tajnego słowa. Jeśli litera ma kolor żółty, oznacza to, że jest w tajnym słowie, ale w złym miejscu.

Kolor zielony informuje użytkownika, że ​​litera znajduje się w tajnym słowie i we właściwej pozycji, podczas gdy kolor szary mówi graczowi, że litery nie ma w słowie.

Konfigurowanie serwera deweloperskiego

Kod użyty w tym projekcie jest dostępny w formacie Repozytorium GitHub i jest darmowy do użytku na licencji MIT. Jeśli chcesz zobaczyć wersję tego projektu na żywo, możesz to sprawdzić próbny.

Projekt wykorzystuje tzw Narzędzie do budowania Vite za pośrednictwem Interfejs wiersza poleceń (CLI) do rusztowań. Upewnij się, że masz zainstalowaną Yarn na swoim komputerze, ponieważ jest generalnie szybsza niż Menedżer pakietów węzłów (NPM). Otwórz terminal i uruchom następujące polecenie:

przędza tworzy vite

Spowoduje to utworzenie nowego projektu Vite. Ramy powinny być Wanilia a wariant powinien być ustawiony na JavaScript. Teraz uruchom:

przędza

Spowoduje to zainstalowanie wszystkich zależności niezbędnych do działania projektu. Po tej instalacji uruchom następujące polecenie, aby uruchomić serwer deweloperski:

rozwinięcie przędzy

Konfigurowanie gry i projektowanie klawiatury

Otwórz projekt w edytorze kodu, wyczyść zawartość pliku main.js plik i upewnij się, że folder projektu wygląda tak:

Teraz zastąp zawartość pliku indeks.html plik z następującym kodem szablonu:

HTML>
<HTMLlang="pl">
<głowa>
<metazestaw znaków=„UTF-8” />
<połączyćrel="Ikona"typ=„obraz/svg+xml”href="/vite.svg" />
<metanazwa=„rzutnia”treść=„szerokość = szerokość urządzenia, skala początkowa = 1,0” />
<tytuł>JS Wordletytuł>
głowa>
<ciało>
<dzID=„aplikacja”>
<dz>
<h1>Klon Wordle'ah1>
<dzID="sterownica">
<przyciskID="restart-btn">Powtórna rozgrywkaprzycisk>
<przyciskID=„pokaż-btn”>Pokaż odpowiedźprzycisk>
dz>
<dzID="wiadomość">Proszę czekać. Gra się ładuje...dz>
dz>
<dzID="interfejs">
<dzID="tablica">dz>
<dzklasa="klawiatura">dz>
dz>
dz>
<scenariusztyp="moduł"źródło="/main.js">scenariusz>
ciało>
HTML>

W przypadku CSS przejdź do repozytorium GitHub tego projektu i skopiuj zawartość pliku styl.css zapisz we własnym zakresie styl.css plik.

Teraz w terminalu zainstaluj pakiet Toastify NPM, uruchamiając następujące polecenie:

przędza dodaj toastify -S

Toastify to popularny pakiet JavaScript, który umożliwia wyświetlanie alertów użytkownikowi. Dalej, w main.js plik, zaimportuj plik styl.css plik i opiekać pożytek.

import"./styl.css"
import opiekać z„toastify-js”

Zdefiniuj następujące zmienne, aby ułatwić interakcję z elementami DOM:

pozwalać tablica = dokument.querySelector("#tablica");
pozwalać wiadomość = dokument.querySelector("#wiadomość");
pozwalać klucze = "QWERTYUIOPASDFGHJKLZXCVBNM".podział("");
pozwalać restartBtn = dokument.querySelector("#restart-btn");
pozwalać pokażBtn = dokument.querySelector("#pokaż-btn");
showBtn.setAttribute("wyłączony", "PRAWDA");
klucze.push(„Cofnięcie”);
pozwalać klawiatura = dokument.querySelector(".klawiatura");

Przygotowanie planszy do gry

Ponieważ Wordle to gra, w której użytkownik musi odgadnąć pięcioliterowe słowo w sześciu próbach, zdefiniuj zmienną o nazwie zawartość tablicy który zawiera tablicę sześciu tablic. Następnie zdefiniuj zmienne bieżący wiersz I Obecne pole żeby łatwiej było się przejechać zawartość tablicy.

pozwalać zawartość planszy = [
 [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],
];
pozwalać bieżący wiersz = 0;
pozwalać bieżące pole = 0;
pozwalać Sekretne słowo;

Aby wyrenderować tablicę z pięcioma polami w każdym z sześciu wierszy przy użyciu elementów HTML, użyj zagnieżdżonych pętli do iteracji i tworzenia elementów. Na koniec dołącz je do tablicy.

Do (pozwalać ja = 0; ja <= 5; i++) {
pozwalać wiersz = dokument.utwórzElement(„dział”)
Do (pozwalać y = 0; y <= 4; y++) {
pozwalać pudełko = dokument.utwórzElement('Zakres');
 row.appendChild (pole);
 wiersz.nazwaklasy = `wiersz-${i + 1}`
 }
 board.appendChild (wiersz);
}

Dodawanie klawiatury i słuchanie danych wprowadzanych z klawiatury

Aby utworzyć klawiaturę, wykonaj iterację klawiszy za pomocą dla każdego, tworząc element przycisku dla każdego wpisu. Ustaw tekst przycisku na Backspace jeśli wpis jest *, w przeciwnym razie ustaw ją na wartość wpisu.

Przypisz klucz class do przycisku i ustaw klucz danych atrybut do wartości wpisu pisanej wielkimi literami. Następnie dodaj detektor zdarzeń kliknięcia do przycisku, który wywołuje funkcję wstaw klucz z dużą wartością wpisu.

klucze.dlaKażdego(wejście => {
pozwalać klucz = dokument.utwórzElement("przycisk");
Jeśli (wejście "*") {
 klucz.innerText = „Cofnięcie”;
 } w przeciwnym razie {
 klucz.innerText = wpis;
 }
 nazwa.klucza = "klucz";
 klucz.setAttribute(„klucz danych”, wpis.toUpperCase());
 key.addEventListener("Kliknij", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
dokument.querySelector(`przycisk[klucz-danych=${entry.toUpperCase()}]`).plama();
 }, 250)
 })
 klawiatura.dołącz (klawisz);
})

Pobieranie nowego słowa z interfejsu API

Kiedy użytkownik po raz pierwszy ładuje grę, gra powinna pobrać nowe pięcioliterowe słowo z pliku Losowe słowo API. To słowo jest następnie przechowywane w Sekretne słowo zmienny.

funkcjonowaćpobierzNoweSłowo() {
asynchronicznyfunkcjonowaćPobierz słowo() {
próbować {
konst odpowiedź = czekać na aportować(" https://random-word-api.herokuapp.com/word? długość = 5");
Jeśli (odpowiedź ok) {
konst dane = czekać na odpowiedź.json();
powrót dane;
 } w przeciwnym razie {
rzucićnowyBłąd("Coś poszło nie tak!")
 }
 } złapać (błąd) {
 wiadomość.innerText = `Coś poszło nie tak. \N${błąd}\nSprawdź swoje połączenie internetowe.`;
 }
 }
 fetchWord().then().dane => {
 tajne słowo = dane [0].toUpperCase();
 główny();
 })
}

W powyższym bloku kodu plik główny działa, jeśli losowe słowo zostanie pomyślnie pobrane. zdefiniuj główny funkcja tuż pod pobierzNoweSłowo funkcjonować:

funkcjonowaćgłówny(){
}

Aby nadać styl każdemu polu na planszy, będziesz potrzebować listy wszystkich pól w każdym rzędzie. Zadeklaruj zmienną, wiersz który pobiera wszystkie wiersze w DOM. Ustaw też tzw wiadomość styl wyświetlania do nic:

 wiersze.forEach(wiersz => [...wiersz.dzieci].forEach(dziecko => pudełka.push (dziecko)))
 pudełka.dlaKażdego((skrzynka) => {
 box.classList.add("pusty");
 })
 wiadomość.styl.wyświetlacz = "nic";

Następnie dodaj a kluczowanie detektor zdarzeń do obiektu okna i sprawdź, czy wydany klucz jest ważny. Jeśli jest prawidłowy, skup się na odpowiednim przycisku, zasymuluj kliknięcie i rozmyj je po 250 ms opóźnienia:

okno.addEventListener(„kluczowanie”, (e) => {
Jeśli (isValidCharacter (e.key)) {
dokument.querySelector(`przycisk[klucz-danych=${e.key.toUpperCase()}]`).centrum();
dokument.querySelector(`przycisk[klucz-danych=${e.key.toUpperCase()}]`).Kliknij();
 setTimeout(() => {
dokument.querySelector(`przycisk[klucz-danych=${e.key.toUpperCase()}]`).plama();
 }, 250)
 }
 })

Pod kluczowanie detektor zdarzeń, skonfiguruj detektory zdarzeń dla dwóch przycisków: pokażBtn I restartBtn. Gdy gracz kliknie pokażBtn, wyświetl wyskakujące powiadomienie z wartością Sekretne słowo zmienny.

Kliknięcie restartBtn ponownie ładuje stronę. Upewnij się również, że zawierasz jest prawidłowym znakiem funkcja sprawdzająca, czy klucz jest prawidłowym znakiem.

 showBtn.addEventListener('Kliknij', () => {
 opiekać({
 tekst: `Dobrze dobrze! odpowiedź to ${tajne słowo}`,
 czas trwania: 2500,
 Nazwa klasy: "alarm",
 }).showToast();
 })
 restartBtn.addEventListener('Kliknij', () => {
 lokalizacja.przeładuj();
 })
funkcjonowaćjest prawidłowym znakiem(wartość) {
powrót (wart.dopasowanie(/^[a-zA-Z]+$/) && (val.długość 1 || wartość „Cofnięcie”))
 }

Na zewnątrz główny funkcja, utwórz a renderBox funkcję i podać trzy parametry: wiersz (numer wiersza), skrzynka (indeks pola w wierszu) i dane (treść tekstowa do aktualizacji).

funkcjonowaćrenderBox(wiersz, pole, dane) {
 [...document.querySelector(`.wiersz-${wiersz}`).dzieci][ramka].innerText = dane;
}

Obsługa wprowadzania z klawiatury za pomocą funkcji

Aby obsłużyć kluczowe dane wejściowe i zaktualizować tablicę, utwórz plik wstaw klucz funkcja z a klucz parametr. Funkcja powinna zachowywać się zgodnie z przekazanym parametrem.

funkcjonowaćwstaw klucz(klucz) {
Jeśli (klucz „Cofnięcie”.toUpperCase() && currentRow < boardContent.length) {
 boardContent[bieżącyRow][bieżącyBox] = 0;
Jeśli (obecne pole!== 0) {
 Obecne pole--;
 renderBox (bieżący wiersz + 1, bieżąca skrzynka, "");
 }
 } w przeciwnym razie {
Jeśli (bieżący wiersz < zawartość tablicy. długość) {
 boardContent[bieżącyRow][bieżącyBox] = klucz;
 renderBox (bieżący wiersz + 1, currentBox, klucz);
 ObecnyBox++;
 }
Jeśli (bieżącyRow 0) {
 oceń (bieżący wiersz, klucz);
 bieżące pole = 0;
 bieżący wiersz++;
 }
 }
}

Ocena odgadnięcia gracza

Stworzyć oceniać funkcja, która akceptuje parametr wiersza. Ta funkcja odpowiada za ocenę odgadnięcia gracza.

funkcjonowaćoceniać(wiersz){
}

Każda gra ma Pokaż odpowiedź przycisk, który pojawia się dopiero po czterech próbach odgadnięcia przez użytkownika. Tak więc w funkcji zaimplementuj funkcjonalność, która właśnie to robi:

Jeśli (bieżący wiersz 4) {
 showBtn.removeAttribute('wyłączony')
}

Następnie zdefiniuj zmienną zgadywania i zmienną odpowiedzi, która sprawdza, czy litery znajdują się we właściwej pozycji.

pozwalać zgadnij = tablicaZawartość[wiersz].join(''.toUpperCase();
pozwalać odpowiedź = tajne słowo.split("");

Przyda się tutaj algorytm kolorowania kafelków. Przypomnij sobie, że kafelek lub litera powinny być zielone, jeśli znajdują się w słowie i we właściwym miejscu.

Jeśli kafelek znajduje się w słowie, ale w niewłaściwym miejscu, kafelek jest żółty, a szary kolor dotyczy kafelków, których nie ma w słowie.

pozwalać kolory = zgadnij
 .podział("")
 .mapa((list, idx) => litera == odpowiedź[idx]? (odpowiedź[idx] = FAŁSZ): list)
 .mapa((list, idx) =>
 list
? (idx = odpowiedź.indeksOf (litera)) < 0
? "szary"
: (odpowiedź[idx] = "żółty")
: "zielony"
);

Podany blok kodu powyżej wykonuje porównanie element po elemencie między zgadywać tablica i odpowiedź szyk. Na podstawie wyników tego porównania kod aktualizuje plik zabarwienie szyk.

Następnie zdefiniuj a zestawKolory funkcja, która może przyjąć zabarwienie array jako parametr i odpowiednio pokoloruj kafelki:

funkcjonowaćzestawKolor(zabarwienie) {
 kolory.dlaKażdego((kolor, indeks) => {
dokument.querySelector(`przycisk[klucz-danych=${zgadnij[indeks].toUpperCase()}]`).style.backgroundColor = kolor;
dokument.querySelector(`przycisk[klucz-danych=${zgadnij[indeks].toUpperCase()}]`).styl.kolor= "czarny";
 [...document.querySelector(`.wiersz-${wiersz + 1}`).dzieci][indeks].style.backgroundColor = kolor;
 })
}

Gra jest teraz kompletna. Wszystko, co musisz teraz zrobić, to zadzwonić pod numer tel pobierzNoweSłowo działa i możesz już iść.

pobierzNoweSłowo();

Gratulacje, właśnie odtworzyłeś Wordle.

Przenieś swoje umiejętności JavaScript na wyższy poziom, odtwarzając gry

Nauka nowego języka jako początkujący nie jest łatwa. Odtwarzanie gier, takich jak Kółko i krzyżyk, Wisielec i Wordle w języku takim jak JavaScript, może pomóc początkującym opanować koncepcje języka poprzez zastosowanie ich w praktyce.