Jak vytvořit klon Wordle pomocí JavaScriptu

Worlde je populární hra, která vzala svět útokem na začátku roku 2022. Znovuvytvoření hry Wordle nebo alespoň vytvoření její jednodušší verze je něco, co by vývojáři, kteří jsou s JavaScriptem noví, měli zvážit.

Jak Wordle funguje

Ve Wordle je tajné pětipísmenné slovo. Hráč má šest pokusů a musí uhodnout různá pětipísmenná slova, aby zjistil, jak blízko jsou k tajnému slovu.

Poté, co hráč uhodne, Wordle pomocí barev sdělí hráči, jak blízko jsou k tajnému slovu. Pokud má písmeno žlutou barvu, znamená to, že písmeno je v tajném slově, ale na špatné pozici.

Zelená barva říká uživateli, že písmeno je v tajném slově a na správné pozici, zatímco šedá barva říká hráči, že písmeno ve slově není.

Nastavení vývojového serveru

Kód použitý v tomto projektu je k dispozici v a úložiště GitHub a můžete jej používat zdarma pod licencí MIT. Pokud se chcete podívat na živou verzi tohoto projektu, můžete se podívat na toto demo.

Projekt využívá Nástroj pro sestavení Vite přes Rozhraní příkazového řádku (CLI) pro lešení. Ujistěte se, že máte na svém počítači nainstalovaný Yarn, protože je obecně rychlejší než Správce balíčků uzlů (NPM). Otevřete terminál a spusťte následující příkaz:

příze vytvořit vite

Tím se vytvoří nový projekt Vite. Rámec by měl být Vanilka a varianta by měla být nastavena na JavaScript. Nyní spusťte:

příze

Tím se nainstalují všechny závislosti potřebné k tomu, aby projekt fungoval. Po této instalaci spusťte následující příkaz pro spuštění vývojového serveru:

příze voj

Nastavení hry a návrh klávesnice

Otevřete projekt v editoru kódu a vymažte obsah souboru main.js soubor a ujistěte se, že složka projektu vypadá takto:

Nyní nahraďte obsah souboru index.html soubor s následujícím standardním kódem:

html>
<htmllang="en">
<hlava>
<metaznaková sada="UTF-8" />
<odkazrel="ikona"typ="image/svg+xml"href="/vite.svg" />
<metanázev="výřez"obsah="width=device-width, initial-scale=1.0" />
<titul>JS Wordletitul>
hlava>
<tělo>
<divid="aplikace">
<div>
<h1>Klon Wordleh1>
<divid="řízení">
<knoflíkid="restart-btn">Přehrátknoflík>
<knoflíkid="show-btn">Ukaž odpověďknoflík>
div>
<divid="zpráva">Prosím, čekejte. Hra se načítá...div>
div>
<divid="rozhraní">
<divid="deska">div>
<divtřída="klávesnice">div>
div>
div>
<skripttyp="modul"src="/main.js">skript>
tělo>
html>

V případě CSS přejděte do úložiště GitHub tohoto projektu a zkopírujte obsah souboru styl.css zařadit do svého vlastního styl.css soubor.

Nyní v terminálu nainstalujte balíček Toastify NPM spuštěním následujícího příkazu:

příze přidat toastify -S

Toastify je populární balíček JavaScriptu, který vám umožňuje zobrazovat upozornění uživateli. Dále v main.js soubor, importujte soubor styl.css soubor a toastovat utility.

import"./style.css"
import Toastify z'toastify-js'

Pro usnadnění interakce s prvky DOM definujte následující proměnné:

nechat deska = dokument.querySelector("#deska");
nechat zpráva = dokument.querySelector("#zpráva");
nechat klíče = "QWERTYUIOPASDFGHJKLZXCVBNM".rozdělit("");
nechat restartBtn = dokument.querySelector("#restart-btn");
nechat showBtn = dokument.querySelector("#show-btn");
showBtn.setAttribute("zakázáno", "skutečný");
klávesy.stisknout("Backspace");
nechat klávesnice = dokument.querySelector(".klávesnice");

Nastavení herního plánu

Protože Wordle je hra, kde uživatel musí uhodnout pětipísmenné slovo v šesti pokusech, definujte proměnnou nazvanou obsah desky který obsahuje pole šesti polí. Poté definujte proměnné currentRow a currentBox aby bylo snazší procházet obsah desky.

nechat obsah desky = [
 [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],
];
nechat currentRow = 0;
nechat currentBox = 0;
nechat skryté slovo;

Chcete-li vykreslit desku s pěti rámečky v každém ze šesti řádků pomocí prvků HTML, použijte k iteraci a vytvoření prvků vnořené smyčky. Nakonec je přiložte na tabuli.

pro (nechat i = 0; i <= 5; i++) {
nechat řada = dokument.createElement('div')
pro (nechat y = 0; y <= 4; y++) {
nechat krabice = dokument.createElement('rozpětí');
 row.appendChild (box);
 row.className = `řádek-${i + 1}`
 }
 board.appendChild (řádek);
}

Přidání klávesnice a poslechu vstupu z klávesnice

Chcete-li vytvořit klávesnici, iterujte pomocí kláves pro každého, čímž se pro každý záznam vytvoří prvek tlačítka. Nastavte text tlačítka na Backspace pokud je záznam *, jinak jej nastavte na vstupní hodnotu.

Přiřadit klíč třídy na tlačítko a nastavte datový klíč atribut k velké vstupní hodnotě. Dále přidejte posluchač události kliknutí k tlačítku, které volá funkci insertKey s velkou vstupní hodnotou.

klíče.pro každého(vstup => {
nechat klíč = dokument.createElement("knoflík");
-li (vstup "*") {
 key.innerText = "Backspace";
 } jiný {
 key.innerText = záznam;
 }
 key.className = "klíč";
 key.setAttribute("datový klíč", entry.toUpperCase());
 key.addEventListener("kliknout", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
dokument.querySelector(`button[data-key=${entry.toUpperCase()}]`).rozmazat();
 }, 250)
 })
 klávesnice.append (klávesa);
})

Získání nového slova z API

Když uživatel hru poprvé načte, hra by měla načíst nové pětipísmenné slovo z Náhodné slovo API. Toto slovo je pak uloženo v skryté slovo variabilní.

funkcegetNewWord() {
asynchronnífunkcenačístWord() {
Snaž se {
konst odpověď = čekat vynést(" https://random-word-api.herokuapp.com/word? délka = 5");
-li (response.ok) {
konst údaje = čekat response.json();
vrátit se data;
 } jiný {
házetNovýChyba("Něco se pokazilo!")
 }
 } chytit (chyba) {
 message.innerText = „Něco se pokazilo. \n${error}\nZkontrolujte připojení k internetu.`;
 }
 }
 fetchWord().pak(data => {
 tajnéSlovo = data[0].toUpperCase();
 hlavní();
 })
}

Ve výše uvedeném bloku kódu je hlavní funkce se spustí, pokud je náhodné slovo úspěšně načteno. Definujte a hlavní funkce přímo pod getNewWord funkce:

funkcehlavní(){
}

Chcete-li upravit každé pole na desce, budete potřebovat seznam všech polí v každém řádku. deklarovat proměnnou, řádek který zachytí všechny řádky v DOM. Také nastavte zpráva styl zobrazení žádný:

 rows.forEach(řádek => [...řada.děti].proKaždou(dítě => boxy.push (dítě)))
 boxy.proKazdy((box) => {
 box.classList.add("prázdný");
 })
 message.style.display = "žádný";

Dále přidejte a klíčování posluchač událostí objektu okna a zkontrolujte, zda je uvolněný klíč platný. Pokud je to platné, zaměřte se na odpovídající tlačítko, simulujte kliknutí a po 250 ms jej rozmažte:

okno.addEventListener('keyup', (e) => {
-li (isValidCharacter (e.key)) {
dokument.querySelector(`button[data-key=${e.key.toUpperCase()}]`).soustředit se();
dokument.querySelector(`button[data-key=${e.key.toUpperCase()}]`).click();
 setTimeout(() => {
dokument.querySelector(`button[data-key=${e.key.toUpperCase()}]`).rozmazat();
 }, 250)
 }
 })

Pod klíčování posluchač událostí, nastavte posluchače událostí pro dvě tlačítka: showBtn a restartBtn. Když hráč klikne showBtn, zobrazí upozornění na přípitek s hodnotou skryté slovo variabilní.

kliknutím restartBtn znovu načte stránku. Nezapomeňte také uvést isValidCharacter funkce pro kontrolu, zda je klíč platným znakem.

 showBtn.addEventListener('kliknout', () => {
 Toastify ({
 text: 'Tak dobře! odpověď je ${secretWord}`,
 doba trvání: 2500,
 jméno třídy: "pozor",
 }).showToast();
 })
 restartBtn.addEventListener('kliknout', () => {
 location.reload();
 })
funkceisValidCharacter(val) {
vrátit se (val.match(/^[a-zA-Z]+$/) && (val.délka 1 || val "Backspace"))
 }

Mimo hlavní funkce, vytvořit a renderBox funkce a poskytuje tři parametry: řádek (číslo řádku), box (index rámečku v řádku) a data (textový obsah k aktualizaci).

funkcerenderBox(řádek, pole, data) {
 [...document.querySelector(`.řádek-${row}`).děti][box].innerText = data;
}

Ovládání vstupu z klávesnice pomocí funkce

Pro zpracování klíčových vstupů a aktualizaci desky vytvořte insertKey funkce s a klíč parametr. Funkce by se měla chovat podle předávaného parametru.

funkceinsertKey(klíč) {
-li (klíč "Backspace".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
-li (currentBox !== 0) {
 currentBox--;
 renderBox (currentRow + 1, currentBox, "");
 }
 } jiný {
-li (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = klíč;
 renderBox (currentRow + 1, currentBox, key);
 currentBox++;
 }
-li (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 vyhodnotit (currentRow, klíč);
 currentBox = 0;
 currentRow++;
 }
 }
}

Vyhodnocení hráčského odhadu

Vytvořit hodnotit funkce, která přijímá parametr řádku. Tato funkce je zodpovědná za vyhodnocení hráčova odhadu.

funkcehodnotit(řádek){
}

Každá hra má a Ukaž odpověď tlačítko, které se objeví až poté, co uživatel provede čtyři odhady. Takže ve funkci implementujte funkci, která dělá právě toto:

-li (aktuální řádek 4) {
 showBtn.removeAttribute('zakázáno')
}

Poté definujte proměnnou hádat a proměnnou odpovědí, která kontroluje, zda jsou písmena ve správné poloze.

nechat uhodnout = boardContent[row].join('').toUpperCase();
nechat odpověď = tajnéSlovo.rozdělit("");

Zde se bude hodit algoritmus barvení dlaždic. Připomeňme, že dlaždice nebo písmeno by měly být zelené, pokud jsou ve slově a na správném místě.

Pokud je dlaždice ve slově, ale na špatném místě, je dlaždice žlutá a nakonec šedá barva je pro dlaždice, které ve slově nejsou.

nechat barvy = hádat
 .rozdělit("")
 .mapa((dopis, idx) => písmeno == odpověď[idx]? (odpověď[idx] = Nepravdivé): dopis)
 .mapa((dopis, idx) =>
 dopis
? (idx = odpověď.indexOf (písmeno)) < 0
? "Šedá"
: (odpověď[idx] = "žlutá")
: "zelená"
);

Uvedený blok kódu výše provádí porovnání prvků po prvku mezi tipni si pole a Odpovědět pole. Na základě výsledků tohoto srovnání kód aktualizuje barvy pole.

Dále definujte a setColors funkce, která může převzít barvy pole jako parametr a dlaždice vhodně vybarvi:

funkcesetColor(barvy) {
 barvy.proKaždý((barva, index) => {
dokument.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).style.backgroundColor = barva;
dokument.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).styl.barva= "Černá";
 [...document.querySelector(`.řádek-${řádek + 1}`).děti][index].style.backgroundColor = barva;
 })
}

Hra je nyní dokončena. Vše, co nyní musíte udělat, je zavolat na getNewWord funkce a můžete začít.

getNewWord();

Gratulujeme, právě jste vytvořili Wordle.

Posuňte své dovednosti JavaScriptu na novou úroveň znovuvytvářením her

Naučit se nový jazyk jako začátečník není snadné. Přetvoření her jako Tic-tac-toe, Hangman a Wordle v jazyce, jako je JavaScript, může začátečníkům pomoci zvládnout koncepty jazyka tím, že je uvede do praxe.