Olete kindlasti Wordle mängu mänginud. Siit saate teada, kuidas saate JavaScripti abil Wordle oma versiooni luua.

Worlde on populaarne mäng, mis vallutas maailma 2022. aasta alguses. Wordle'i mängu uuesti loomine või vähemalt selle lihtsama versiooni loomine on midagi, mida JavaScripti uued arendajad peaksid kaaluma.

Kuidas Wordle töötab

Wordle'is on salajane viietäheline sõna. Mängijal on kuus katset ja ta peab ära arvama erinevaid viietähelisi sõnu, et näha, kui lähedal need salasõnale on.

Pärast seda, kui mängija on oletuse esitanud, kasutab Wordle värve, et öelda mängijale, kui lähedal nad salasõnale on. Kui täht on kollast värvi, tähendab see, et täht on salasõnas, kuid vales asendis.

Roheline värv annab kasutajale teada, et täht on salasõnas ja õiges asendis, hall aga annab teada, et tähte sõnas pole.

Arendusserveri seadistamine

Selles projektis kasutatav kood on saadaval a GitHubi hoidla ja seda saate MIT-i litsentsi alusel tasuta kasutada. Kui soovite vaadata selle projekti reaalajas versiooni, saate seda vaadata demo.

instagram viewer

Projekt kasutab Vite ehitustööriist kaudu Käsurea liides (CLI) tellingute jaoks. Veenduge, et teie arvutisse oleks installitud lõng, kuna see on üldiselt kiirem kui Sõlme paketihaldur (NPM). Avage oma terminal ja käivitage järgmine käsk:

lõng luua vite

See loob uue Vite projekti. Raamistik peaks olema Vanill ja variandiks tuleks määrata JavaScript. Nüüd jookse:

lõng

See installib kõik projekti toimimiseks vajalikud sõltuvused. Pärast installimist käivitage arendusserveri käivitamiseks järgmine käsk:

lõng dev

Mängu seadistamine ja klaviatuuri kujundamine

Avage projekt oma koodiredaktoris, tühjendage selle sisu main.js faili ja veenduge, et teie projekti kaust näeb välja selline:

Nüüd asendage sisu index.html faili järgmise standardkoodiga:

html>
<htmllang="en">
<pea>
<metamärgistik="UTF-8" />
<linkrel="ikoon"tüüp="image/svg+xml"href="/vite.svg" />
<metanimi="vaateava"sisu="laius = seadme laius, esialgne skaala = 1,0" />
<pealkiri>JS Wordlepealkiri>
pea>


<keha>
<divid="rakendus">
<div>
<h1>Wordle kloonh1>
<divid="kontrollid">
<nuppuid="restart-btn">Kordusnuppu>
<nuppuid="show-btn">Näita vastustnuppu>
div>
<divid="sõnum">Palun oota. Mängu laaditakse...div>
div>
<divid="liides">
<divid="laud">div>
<divklass="klaviatuur">div>
div>
div>
<stsenaariumtüüp="moodul"src="/main.js">stsenaarium>
keha>
html>

CSS-i jaoks minge selle projekti GitHubi hoidlasse ja kopeerige selle sisu stiil.css faili enda omasse stiil.css faili.

Nüüd installige terminalis Toastify NPM pakett, käivitades järgmise käsu:

lõng lisa röstitud -S

Toastify on populaarne JavaScripti pakett, mis võimaldab kuvada kasutajale hoiatusi. Järgmisena main.js fail, importige stiil.css fail ja röstima kasulikkust.

importida"./style.css"
importida Röstima alates'toastify-js'

DOM-i elementidega suhtlemise hõlbustamiseks määratlege järgmised muutujad.

lase tahvel = dokument.querySelector("#laud");
lase sõnum = dokument.querySelector("#sõnum");
lase võtmed = "QWERTYUIOPASDFGHJKLZXCVBNM".split("");
lase restartBtn = dokument.querySelector("#restart-btn");
lase showBtn = dokument.querySelector("#show-btn");
showBtn.setAttribute("puuetega", "tõsi");
keys.push("Tagasilükke");
lase klaviatuur = dokument.querySelector(".klaviatuur");

Mängulaua seadistamine

Kuna Wordle on mäng, kus kasutaja peab kuue katsega ära arvama viietähelise sõna, defineeri muutuja nimega tahvliSisu mis sisaldab kuuest massiivist koosnevat massiivi. Seejärel määrake muutujad praeguneRida ja praeguneBox et oleks lihtsam läbida tahvliSisu.

lase 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],
];
lase praeguneRida = 0;
lase praeguneBox = 0;
lase salajane sõna;

Tahvli renderdamiseks viie kastiga igas kuues reas, kasutades HTML-elemente, kasutage elementide itereerimiseks ja loomiseks pesastatud silmuseid. Lõpuks lisage need tahvlile.

jaoks (lase i = 0; mina <= 5; i++) {
lase rida = dokument.createElement('div')
jaoks (lase y = 0; y <= 4; y++) {
lase kast = dokument.createElement('span');
 row.appendChild (kast);
 rida.klassiNimi = `rida-${i + 1}`
 }
 board.appendChild (rida);
}

Klaviatuuri lisamine ja klaviatuuri sisendi kuulamine

Klaviatuuri loomiseks korrake klahve kasutades igaühele, luues iga kirje jaoks nupuelemendi. Määrake nupu tekstiks Tagasilükkeklahv kui kanne on *, vastasel juhul määrake see sisestusväärtusele.

Määrake võti klassi nupule ja määrake andmevõti atribuut suurtähtedele. Järgmisena lisage funktsiooni kutsuvale nupule klõpsamissündmuste kuulaja sisestamisklahv suurtähtedega.

keys.forEach(sisenemine => {
lase võti = dokument.createElement("nupp");
kui (sisenemine "*") {
 key.innerText = "Tagasilükke";
 } muidu {
 key.innerText = sisestus;
 }
 key.className = "võti";
 key.setAttribute("andmevõti", kanne.Suurtähe());
 key.addEventListener("klõpsake", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
dokument.querySelector(`nupp[andmevõti=${entry.toUpperCase()}]`).blur();
 }, 250)
 })
 klaviatuur.lisa (klahv);
})

Uue sõna hankimine API-st

Kui kasutaja mängu esimest korda laadib, peaks mäng hankima uue viietähelise sõna Juhuslik sõna API. Seejärel salvestatakse see sõna kausta salajane sõna muutuv.

funktsioonihankige NewWord() {
asünkrfunktsioonitõmba Word() {
proovige {
konst vastus = ootama tõmba(" https://random-word-api.herokuapp.com/word? pikkus = 5");
kui (response.ok) {
konst andmed = ootama vastus.json();
tagasi andmed;
 } muidu {
viskamauusViga("Midagi läks valesti!")
 }
 } püüda (viga) {
 sõnum.innerText = `Midagi läks valesti. \n${error}\nKontrollige oma Interneti-ühendust.`;
 }
 }
 tõmba sõna().then(andmeid => {
 salasõna = andmed[0].Suurtähe();
 main();
 })
}

Ülaltoodud koodiplokis on peamine funktsioon käivitub, kui juhuslik sõna on edukalt laetud. Määratlege a peamine funktsioon otse all hankige NewWord funktsioon:

funktsioonipeamine(){
}

Tahvli iga kasti stiili kujundamiseks vajate iga rea ​​kõigi kastide loendit. deklareerida muutuja, rida mis haarab kõik DOM-i read. Samuti määrake sõnum kuvamisstiil mitte ühtegi:

 rows.forEach(rida => [...row.children].forEach(laps => boxes.push (laps)))
 boxes.forEach((kasti) => {
 box.classList.add("tühi");
 })
 message.style.display = "mitte ükski";

Järgmisena lisage a klahvivajutus sündmusekuulaja aknaobjektile ja kontrollige, kas vabastatud võti on kehtiv. Kui see kehtib, keskenduge vastavale nupule, simuleerige klõpsamist ja hägustage see pärast 250 ms viivitust:

aken.addEventListener('keyup', (e) => {
kui (isValidCharacter (e.key)) {
dokument.querySelector(`nupp[andmevõti=${e.key.toUpperCase()}]`).focus();
dokument.querySelector(`nupp[andmevõti=${e.key.toUpperCase()}]`.click();
 setTimeout(() => {
dokument.querySelector(`nupp[andmevõti=${e.key.toUpperCase()}]`).blur();
 }, 250)
 }
 })

all klahvivajutus sündmuste kuulaja, seadistage sündmuste kuulajad kahe nupu jaoks: showBtn ja restartBtn. Kui mängija klõpsab showBtn, kuvab röstsaiateatise väärtusega salajane sõna muutuv.

Klõpsates restartBtn laadib lehe uuesti. Samuti veenduge, et lisate isValid Character funktsiooni, et kontrollida, kas võti on kehtiv märk.

 showBtn.addEventListener("klõps", () => {
 Toastify({
 tekst: `Hea küll! vastus on ${secretWord}`,
 kestus: 2500,
 klassi nimi: "hoiatus",
 }).showToast();
 })
 restartBtn.addEventListener("klõps", () => {
 asukoht.reload();
 })
funktsiooniisValid Character(val) {
tagasi (val.match(/^[a-zA-Z]+$/) && (val.pikkus 1 || val "Tagasilükke"))
 }

Väljaspool peamine funktsioon, loo a renderBox funktsiooni ja esitage kolm parameetrit: rida (rea number), kasti (rea sees olev kastiregister) ja andmeid (värskendatav tekstisisu).

funktsioonirenderBox(rida, kast, andmed) {
 [...document.querySelector(`.rida-${row}`.children][box].innerText = andmed;
}

Funktsiooniga klaviatuurisisendi käsitlemine

Võtmesisendite haldamiseks ja plaadi värskendamiseks looge sisestamisklahv funktsioon koos a võti parameeter. Funktsioon peaks käituma vastavalt edastatud parameetrile.

funktsioonisisestamisklahv(võti) {
kui (võti "Tagasilükke".toUpperCase() && currentRow < boardContent.length) {
 boardContent[praegune rida][praegune kast] = 0;
kui (praegune kast !== 0) {
 currentBox--;
 renderBox (currentRow + 1, praegune kast, "");
 }
 } muidu {
kui (praegune rida < boardContent.length) {
 boardContent[praegune rida][praegune kast] = võti;
 renderBox (currentRow + 1, currentBox, võti);
 currentBox++;
 }
kui (praeguneRida < boardContent.length && boardContent[praegune rida][praegune kast] !== 0) {
 hindama (praeguneRida, võti);
 praeguneBox = 0;
 praeguneRida++;
 }
 }
}

Mängija arvamise hindamine

Loo an hinnata funktsioon, mis aktsepteerib reaparameetrit. See funktsioon vastutab mängija oletuse hindamise eest.

funktsioonihinnata(rida){
}

Igal mängul on a Näita vastust nupp, mis ilmub alles pärast seda, kui kasutaja on teinud neli oletust. Seega rakendage funktsioonis funktsioon, mis teeb just seda:

kui (praegune rida 4) {
 showBtn.removeAttribute('puuetega')
}

Seejärel määratlege oletusmuutuja ja vastuse muutuja, mis kontrollib, kas tähed on õiges asendis.

lase aim = boardContent[rida].join('').Suurtähe();
lase vastus = secretWord.split("");

Siin tuleb kasuks plaatide värvimise algoritm. Tuletage meelde, et paan või täht peaks olema roheline, kui see on sõnas ja õiges kohas.

Kui plaat on sõnas, kuid vales kohas, on paan kollane ja lõpuks on hall värv plaatide jaoks, mida sõnas pole.

lase värvid = oletus
 .split("")
 .map((täht, idx) => täht == vastus[idx]? (vastus[idx] = vale): kiri)
 .map((täht, idx) =>
 kiri
? (idx = vastus.indexOf (täht)) < 0
? "hall"
: (vastus[idx] = "kollane")
: "roheline"
);

Ülaltoodud koodiplokk võrdleb elementide kaupa arvan massiiv ja vastama massiivi. Selle võrdluse tulemuste põhjal värskendab kood värvid massiivi.

Järgmisena määratlege a määrama Värvid funktsioon, mida saab kasutada värvid massiivi parameetrina ja värvige plaadid sobivalt:

funktsioonisetColor(värvid) {
 color.forEach((värv, indeks) => {
dokument.querySelector(`nupp[andmevõti=${guess[index].toUpperCase()}]`).style.backgroundColor = värv;
dokument.querySelector(`nupp[andmevõti=${guess[index].toUpperCase()}]`).style.color= "must";
 [...document.querySelector(`.rida-${rida + 1}`).children][index].style.backgroundColor = värv;
 })
}

Mäng on nüüd lõppenud. Kõik, mida pead nüüd tegema, on helistada hankige NewWord funktsiooni ja oletegi valmis.

getNewWord();

Õnnitleme, lõite Wordle just uuesti.

Viige oma JavaScripti oskused järgmisele tasemele, luues mänge uuesti

Uue keele õppimine algajana ei ole lihtne. Mängude, nagu Tic-tac-toe, Hangman ja Wordle, taasloomine sellises keeles nagu JavaScript võib aidata algajatel keele kontseptsioone omandada, rakendades neid praktikas.