Určite ste hrali hru Wordle. Tu je návod, ako si môžete vytvoriť svoju vlastnú verziu Wordle pomocou JavaScriptu.
Worlde je populárna hra, ktorá začiatkom roku 2022 vzala svet útokom. Obnovenie hry Wordle alebo aspoň vytvorenie jej jednoduchšej verzie je niečo, čo by vývojári, ktorí sú s JavaScriptom noví, mali zvážiť.
Ako Wordle funguje
Vo Wordle je tajné päťpísmenové slovo. Hráč má šesť pokusov a musí uhádnuť rôzne päťpísmenové slová, aby zistil, ako blízko sú k tajnému slovu.
Keď hráč uhádne, Wordle použije farby, aby hráčovi povedal, ako blízko je k tajnému slovu. Ak má písmeno žltú farbu, znamená to, že písmeno je v tajnom slove, ale na nesprávnom mieste.
Zelená farba hovorí používateľovi, že písmeno je v tajnom slove a na správnej pozícii, zatiaľ čo sivá farba hovorí hráčovi, že písmeno v slove nie je.
Nastavenie vývojového servera
Kód použitý v tomto projekte je dostupný v a úložisko GitHub a môžete ho bezplatne používať na základe licencie MIT. Ak sa chcete pozrieť na živú verziu tohto projektu, môžete si pozrieť toto demo.
Projekt využíva Nástroj na zostavenie Vite cez Rozhranie príkazového riadka (CLI) na lešenie. Uistite sa, že máte v počítači nainštalovanú priadzu, pretože je vo všeobecnosti rýchlejšia ako Správca balíkov uzlov (NPM). Otvorte terminál a spustite nasledujúci príkaz:
priadza vytvára vite
Tým sa vytvorí nový projekt Vite. Rámec by mal byť Vanilkový a variant by mal byť nastavený na JavaScript. Teraz spustite:
priadza
Týmto sa nainštalujú všetky závislosti potrebné na to, aby projekt fungoval. Po tejto inštalácii spustite nasledujúci príkaz na spustenie vývojového servera:
priadza výv
Nastavenie hry a návrh klávesnice
Otvorte projekt v editore kódu a vymažte obsah súboru main.js súbor a uistite sa, že priečinok projektu vyzerá takto:
Teraz nahraďte obsah súboru index.html súbor s nasledujúcim štandardným kódom:
html>
<htmllang="sk"><hlavu>
<metaznakovú sadu="UTF-8" />
<odkazrel="ikona"typu="image/svg+xml"href="/vite.svg" />
<metanázov="výrez"obsahu="width=device-width, initial-scale=1.0" />
<titul>JS Wordletitul>
hlavu><telo>
<divid="aplikácia">
<div>
<h1>Klon Wordleh1>
<divid="ovládače">
<tlačidloid="restart-btn">Prehrať znovatlačidlo>
<tlačidloid="show-btn">Ukáž odpoveďtlačidlo>
div>
<divid="správa">Prosím čakajte. Hra sa načítava...div>
div>
<divid="rozhranie">
<divid="doska">div>
<divtrieda="klávesnica">div>
div>
div>
<skripttypu="modul"src="/main.js">skript>
telo>
html>
V prípade CSS prejdite do úložiska GitHub tohto projektu a skopírujte obsah súboru style.css súbor do vlastného style.css súbor.
Teraz v termináli nainštalujte balík Toastify NPM spustením nasledujúceho príkazu:
priadza pridať toastify -S
Toastify je populárny balík JavaScript, ktorý vám umožňuje zobrazovať upozornenia používateľovi. Ďalej v main.js súbor, importujte súbor style.css súbor a opekať užitočnosť.
importovať"./style.css"
importovať Toastify od'toastify-js'
Definujte nasledujúce premenné, aby ste uľahčili interakciu s prvkami DOM:
nech doska = dokument.querySelector("#board");
nech správa = dokument.querySelector("#správa");
nech kľúče = "QWERTYUIOPASDFGHJKLZXCVBNM".split("");
nech reštartBtn = dokument.querySelector("#restart-btn");
nech showBtn = dokument.querySelector("#show-btn");
showBtn.setAttribute("zakázané", "pravda");
keys.push("Backspace");
nech klávesnica = dokument.querySelector(".keyboard");
Nastavenie hernej dosky
Keďže Wordle je hra, v ktorej musí používateľ uhádnuť päťpísmenové slovo na šesť pokusov, definujte premennú s názvom obsah dosky ktorý obsahuje pole šiestich polí. Potom definujte premenné currentRow a currentBox aby sa dalo ľahšie prejsť obsah dosky.
nech obsah dosky = [
[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],
];
nech currentRow = 0;
nech currentBox = 0;
nech tajnéSlovo;
Ak chcete vykresliť tabuľu s piatimi políčkami v každom zo šiestich riadkov pomocou prvkov HTML, použite na iteráciu a vytvorenie prvkov vnorené slučky. Nakoniec ich pripevnite na tabuľu.
pre (nech i = 0; ja <= 5; i++) {
nech riadok = dokument.createElement('div')
pre (nech y = 0; y <= 4; y++) {
nech krabica = dokument.createElement('span');
row.appendChild (box);
row.className = `riadok-${i + 1}`
}
board.appendChild (riadok);
}
Pridanie klávesnice a počúvanie vstupu z klávesnice
Ak chcete vytvoriť klávesnicu, iterujte pomocou klávesov pre každý, čím sa pre každý záznam vytvorí prvok tlačidla. Nastavte text tlačidla na Backspace ak je záznam *, inak ho nastavte na vstupnú hodnotu.
Priraďte kľúč triedy na tlačidlo a nastavte dátový kľúč atribút na veľkú vstupnú hodnotu. Ďalej pridajte prijímač udalosti kliknutia na tlačidlo, ktoré volá funkciu vložiť kľúč so vstupnou hodnotou veľkými písmenami.
kľúče.pre každého(vstup => {
nech kľúč = dokument.createElement("tlačidlo");
ak (vstup "*") {
key.innerText = "Backspace";
} inak {
key.innerText = vstup;
}
key.className = "kľúč";
key.setAttribute("údajový kľúč", entry.toUpperCase());
key.addEventListener("klik", () => {
insertKey (entry.toUpperCase())
setTimeout(() => {
dokument.querySelector(`button[data-key=${entry.toUpperCase()}]`).rozmazať();
}, 250)
})
klávesnica.append (kláves);
})
Získanie nového slova z API
Keď používateľ prvýkrát načíta hru, hra by mala získať nové päťpísmenové slovo z Náhodné slovo API. Toto slovo sa potom uloží do tajnéSlovo premenlivý.
funkciugetNewWord() {
asyncfunkciufetchWord() {
skúste {
konšt odpoveď = čakať priniesť (" https://random-word-api.herokuapp.com/word? dĺžka = 5");
ak (response.ok) {
konšt údaje = čakať response.json();
vrátiť údaje;
} inak {
hodiťNovýChyba("Niečo sa pokazilo!")
}
} chytiť (chyba) {
message.innerText = „Niečo sa pokazilo. \n${error}\nSkontrolujte si internetové pripojenie.`;
}
}
fetchWord().potom(údajov => {
tajnéSlovo = údaje[0].toUpperCase();
Hlavná();
})
}
Vo vyššie uvedenom bloku kódu je Hlavná funkcia sa spustí, ak je náhodné slovo úspešne načítané. Definujte a Hlavná funkcia priamo pod getNewWord funkcia:
funkciuHlavná(){
}
Na vytvorenie štýlu každého políčka na nástenke budete potrebovať zoznam všetkých políčok v každom riadku. Deklarovať premennú, riadok ktorý zachytí všetky riadky v DOM. Tiež nastavte správu štýl zobrazenia žiadny:
rows.forEach(riadok => [...rad.deti].pre každého(dieťa => boxy.push (dieťa)))
boxy.pre kazdeho((box) => {
box.classList.add("prázdny");
})
message.style.display = "žiadny";
Ďalej pridajte a klávesnica poslucháča udalostí objektu okna a skontrolujte, či je uvoľnený kľúč platný. Ak je to platné, zamerajte sa na príslušné tlačidlo, simulujte kliknutie a rozmažte ho po 250 ms oneskorení:
okno.addEventListener('keyup', (e) => {
ak (isValidCharacter (e.key)) {
dokument.querySelector(`button[data-key=${e.key.toUpperCase()}]`).focus();
dokument.querySelector(`button[data-key=${e.key.toUpperCase()}]`).click();
setTimeout(() => {
dokument.querySelector(`button[data-key=${e.key.toUpperCase()}]`).rozmazať();
}, 250)
}
})
Pod klávesnica poslucháč udalostí, nastavte poslucháčov udalostí pre dve tlačidlá: showBtn a reštartBtn. Keď hráč klikne showBtn, zobrazí upozornenie na toast s hodnotou tajnéSlovo premenlivý.
Kliknutie reštartBtn znovu načíta stránku. Nezabudnite tiež uviesť isValidCharacter funkcia na kontrolu, či je kľúč platným znakom.
showBtn.addEventListener('klikni', () => {
Toastify ({
text: 'Dobre dobre! odpoveď je ${secretWord}`,
trvanie: 2500,
className: "upozornenie",
}).showToast();
})
restartBtn.addEventListener('klikni', () => {
location.reload();
})
funkciuisValidCharacter(val) {
vrátiť (val.match(/^[a-zA-Z]+$/) && (val.dĺžka 1 || val "Backspace"))
}
Mimo Hlavná funkciu, vytvoriť a renderBox funkciu a poskytujú tri parametre: riadok (číslo riadku), box (index rámčeka v riadku) a údajov (textový obsah, ktorý sa má aktualizovať).
funkciurenderBox(riadok, políčko, údaje) {
[...document.querySelector(`.riadok-${row}`).deti][box].innerText = dáta;
}
Manipulácia so vstupom z klávesnice pomocou funkcie
Ak chcete spracovať kľúčové vstupy a aktualizovať tabuľu, vytvorte vložiť kľúč funkcia s a kľúč parameter. Funkcia by sa mala správať podľa odovzdaného parametra.
funkciuvložiť kľúč(kľúč) {
ak (kľúč "Backspace".toUpperCase() && currentRow < boardContent.length) {
boardContent[currentRow][currentBox] = 0;
ak (aktuálny rámček !== 0) {
currentBox--;
renderBox (currentRow + 1, currentBox, "");
}
} inak {
ak (currentRow < boardContent.length) {
boardContent[currentRow][currentBox] = kľúč;
renderBox (currentRow + 1, currentBox, key);
currentBox++;
}
ak (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
vyhodnotiť (aktuálny riadok, kľúč);
currentBox = 0;
currentRow++;
}
}
}
Hodnotenie hráčovho odhadu
Vytvorte ohodnotiť funkcia, ktorá akceptuje parameter riadka. Táto funkcia je zodpovedná za vyhodnotenie hráčovho odhadu.
funkciuohodnotiť(riadok){
}
Každá hra má a Ukáž odpoveď tlačidlo, ktoré sa zobrazí až potom, čo používateľ štyrikrát uhádne. Takže vo funkcii implementujte funkciu, ktorá robí práve toto:
ak (aktuálny riadok 4) {
showBtn.removeAttribute('disabled')
}
Potom definujte premennú hádanie a premennú odpovede, ktorá kontroluje, či sú písmená na správnej pozícii.
nech hádať = boardContent[row].join('').toUpperCase();
nech odpoveď = tajnéSlovo.rozdeliť("");
Tu sa hodí algoritmus farbenia dlaždíc. Pripomeňme, že dlaždica alebo písmeno by mali byť zelené, ak sú v slove a na správnom mieste.
Ak je dlaždica v slove, ale na nesprávnom mieste, dlaždica je žltá a nakoniec sivá farba je pre dlaždice, ktoré nie sú v slove.
nech farby = hádať
.split("")
.map((list, idx) => písmeno == odpoveď[idx]? (odpoveď[idx] = falošný): list)
.map((list, idx) =>
list
? (idx = odpoveď.indexOf (písmeno)) < 0
? "sivá"
: (odpoveď[idx] = "žltá")
: "zelená"
);
Vyššie uvedený blok kódu vykonáva porovnanie medzi jednotlivými prvkami hádajte pole a odpoveď pole. Na základe výsledkov tohto porovnania kód aktualizuje farby pole.
Ďalej definujte a setColors funkciu, ktorá môže prevziať farby pole ako parameter a vhodne vyfarbite dlaždice:
funkciusetColor(farby) {
farby.pre kazdeho((farba, index) => {
dokument.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).style.backgroundColor = farba;
dokument.querySelector(`button[data-key=${guess[index].toUpperCase()}]`).štýl.farba= "čierna";
[...document.querySelector(`.riadok-${riadok + 1}`).deti][index].style.backgroundColor = farba;
})
}
Hra je teraz dokončená. Všetko, čo musíte urobiť, je zavolať na getNewWord a môžete začať.
getNewWord();
Gratulujeme, práve ste vytvorili Wordle.
Posuňte svoje zručnosti JavaScriptu na novú úroveň vytvorením hier
Naučiť sa nový jazyk ako začiatočník nie je ľahké. Obnovenie hier ako Tic-tac-toe, Hangman a Wordle v jazyku, ako je JavaScript, môže začiatočníkom pomôcť zvládnuť koncepty jazyka tým, že ich uvediete do praxe.