Како направити Вордле клон са ЈаваСцрипт-ом

Ворлде је популарна игра која је освојила свет почетком 2022. Поново креирање игре Вордле или барем прављење њене једноставније верзије је нешто што би програмери који су тек почели са ЈаваСцрипт-ом требало да размотре.

Како Вордле ради

У Вордле-у постоји тајна реч од пет слова. Играч има шест покушаја и мора да погоди различите речи од пет слова да би видео колико су близу тајној речи.

Након што играч поднесе нагађање, Вордле користи боје да каже играчу колико је близу тајној речи. Ако слово има жуту боју, то значи да је слово у тајној речи, али на погрешној позицији.

Зелена боја говори кориснику да је слово у тајној речи и на правом месту, док сива боја говори играчу да слово није у речи.

Подешавање развојног сервера

Код који се користи у овом пројекту доступан је у а ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом. Ако желите да погледате живу верзију овог пројекта, можете погледати ово демо.

Пројекат користи Вите алат за прављење преко тхе Интерфејс командне линије (ЦЛИ) за скеле. Уверите се да имате инсталиран Иарн на рачунару јер је генерално бржи од Ноде Пацкаге Манагер (НПМ). Отворите свој терминал и покрените следећу команду:

предиво створити вите

Ово ће креирати нови пројекат Вите. Оквир треба да буде Ванила а варијанту треба поставити на ЈаваСцрипт. Сада покрените:

пређе

Ово ће инсталирати све зависности неопходне да би пројекат функционисао. Након ове инсталације, покрените следећу команду да покренете развојни сервер:

иарн дев

Подешавање игре и дизајнирање тастатуре

Отворите пројекат у уређивачу кода, обришите садржај маин.јс датотеку и уверите се да фасцикла вашег пројекта изгледа овако:

Сада замените садржај индек.хтмл фајл са следећим шаблонским кодом:

хтмл>
<хтмлланг="ен">
<глава>
<метацхарсет="УТФ-8" />
<линкрел="икона"тип="имаге/свг+кмл"хреф="/вите.свг" />
<метаиме="виевпорт"садржаја="видтх=девице-видтх, инитиал-сцале=1.0" />
<наслов>ЈС Вордленаслов>
глава>
<тело>
<дивид="апликација">
<див>
<х1>Вордле Цлонех1>
<дивид="контроле">
<дугмеид="рестарт-бтн">Реплаидугме>
<дугмеид="схов-бтн">Покажи Одговордугме>
див>
<дивид="порука">Сачекајте. Игра се учитава...див>
див>
<дивид="интерфејс">
<дивид="одбор, табла">див>
<дивкласа="тастатура">див>
див>
див>
<скриптатип="модул"срц="/маин.јс">скрипта>
тело>
хтмл>

За ЦСС, идите на ГитХуб репозиторијум овог пројекта и копирајте садржај стиле.цсс датотеку у своју стиле.цсс фајл.

Сада, у терминалу, инсталирајте Тоастифи НПМ пакет тако што ћете покренути следећу команду:

пређе додати тоастифи -С

Тоастифи је популаран ЈаваСцрипт пакет који вам омогућава да прикажете упозорења кориснику. Следеће, у маин.јс датотеку, увезите стиле.цсс фајл и наздравити корисност.

увоз"./стиле.цсс"
увоз Тоастифи из'тоастифи-јс'

Дефинишите следеће променљиве да бисте олакшали интеракцију са ДОМ елементима:

дозволити табла = документ.куериСелецтор("#одбор, табла");
дозволити порука = документ.куериСелецтор("#мессаге");
дозволити кључеви = „КВЕРТИУИОПАСДФГХЈКЛЗКСЦВБНМ“.разделити("");
дозволити рестартБтн = документ.куериСелецтор(„#рестарт-бтн“);
дозволити сховБтн = документ.куериСелецтор("#схов-бтн");
сховБтн.сетАттрибуте("инвалид", "истина");
кеис.пусх("Бацкспаце");
дозволити тастатура = документ.куериСелецтор(".тастатура");

Постављање плоче за игру

Пошто је Вордле игра у којој корисник мора да погоди реч од пет слова у шест покушаја, дефинишите променљиву под називом боардЦонтент који садржи низ од шест низова. Затим дефинишите променљиве цуррентРов и цуррентБок да би се лакше прелазило боардЦонтент.

дозволити боардЦонтент = [
 [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],
];
дозволити цуррентРов = 0;
дозволити цуррентБок = 0;
дозволити Тајна реч;

Да бисте приказали плочу са пет оквира у сваком од шест редова користећи ХТМЛ елементе, користите угнежђене петље за понављање и креирање елемената. На крају, додајте их на таблу.

за (дозволити и = 0; и <= 5; и++) {
дозволити ред = документ.цреатеЕлемент('див')
за (дозволити и = 0; и <= 4; и++) {
дозволити бок = документ.цреатеЕлемент('спан');
 ров.аппендЦхилд (кутија);
 ров.цлассНаме = `ред-${и + 1}`
 }
 боард.аппендЦхилд (ред);
}

Додавање тастатуре и слушање уноса са тастатуре

Да бисте креирали тастатуру, итерирајте кроз тастере користећи за сваки, креирајући елемент дугмета за сваки унос. Поставите текст дугмета на Бацкспаце ако је унос *, иначе га поставите на вредност уноса.

Доделите кључ класе на дугме и подесите кључ података атрибут вредности уноса великим словима. Затим додајте слушалац догађаја клика дугмету које позива функцију инсертКеи са вредношћу уноса великим словима.

кеис.форЕацх(улазак => {
дозволити кључ = документ.цреатеЕлемент("дугме");
ако (улаз "*") {
 кеи.иннерТект = "Бацкспаце";
 } друго {
 кеи.иннерТект = унос;
 }
 кеи.цлассНаме = "кључ";
 кеи.сетАттрибуте("кључ података", ентри.тоУпперЦасе());
 кеи.аддЕвентЛистенер("кликни", () => {
 инсертКеи (ентри.тоУпперЦасе())
 сетТимеоут(() => {
документ.куериСелецтор(`буттон[дата-кеи=${ентри.тоУпперЦасе()}]`).блур();
 }, 250)
 })
 тастатура.додати (кључ);
})

Добијање нове речи из АПИ-ја

Када корисник први пут учита игру, игра треба да преузме нову реч од пет слова из Случајна реч АПИ. Ова реч се затим чува у Тајна реч променљива.

функцијагетНевВорд() {
асинцфункцијафетцхВорд() {
покушати {
конст одговор = чекати донеси (" https://random-word-api.herokuapp.com/word? дужина=5");
ако (одговор.ок) {
конст подаци = чекати респонсе.јсон();
повратак подаци;
 } друго {
бацитиНоваГрешка("Нешто није у реду!")
 }
 } улов (грешка) {
 мессаге.иннерТект = `Нешто је пошло по злу. \н${еррор}\нПроверите своју интернет везу.`;
 }
 }
 фетцхВорд().затим(података => {
 тајна реч = подаци[0].тоУпперЦасе();
 главни();
 })
}

У блоку кода изнад, тхе главни функција се покреће ако је случајна реч успешно преузета. Дефинишите а главни функција одмах испод гетНевВорд функција:

функцијаглавни(){
}

Да бисте стилизовали сваку кутију на табли, требаће вам листа свих кутија у сваком реду. Декларисати променљиву, ред који хвата све редове у ДОМ-у. Такође, подесите порука стил приказа до ниједан:

 ровс.форЕацх(ред => [...ред.цхилдрен].форЕацх(дете => бокес.пусх (дете)))
 бокес.форЕацх((кутија) => {
 бок.цлассЛист.адд("празно");
 })
 мессаге.стиле.дисплаи = "ниједан";

Затим додајте а кеиуп слушалац догађаја на објекат прозора и провери да ли је отпуштени кључ важећи. Ако је валидно, фокусирајте се на одговарајуће дугме, симулирајте клик и замаглите га након кашњења од 250 мс:

прозор.аддЕвентЛистенер('кеиуп', (е) => {
ако (исВалидЦхарацтер (е.кеи)) {
документ.куериСелецтор(`буттон[дата-кеи=${е.кеи.тоУпперЦасе()}]`).фоцус();
документ.куериСелецтор(`буттон[дата-кеи=${е.кеи.тоУпперЦасе()}]`).цлицк();
 сетТимеоут(() => {
документ.куериСелецтор(`буттон[дата-кеи=${е.кеи.тоУпперЦасе()}]`).блур();
 }, 250)
 }
 })

Под кеиуп слушалац догађаја, подесите слушаоце догађаја за два дугмета: сховБтн и рестартБтн. Када играч кликне сховБтн, прикажите обавештење о здрављу са вредношћу Тајна реч променљива.

Кликање рестартБтн поново учитава страницу. Такође, обавезно укључите и исВалидЦхарацтер функција за проверу да ли је кључ исправан карактер.

 сховБтн.аддЕвентЛистенер('кликни', () => {
 Тоастифи({
 текст: `У реду, добро! одговор је ${сецретВорд}`,
 трајање: 2500,
 Назив класе: "упозорење",
 }).сховТоаст();
 })
 рестартБтн.аддЕвентЛистенер('кликни', () => {
 лоцатион.релоад();
 })
функцијаисВалидЦхарацтер(вал) {
повратак (вал.матцх(/^[a-zA-Z]+$/) && (вал.ленгтх 1 || вал "Бацкспаце"))
 }

Изван главни функција, створи а рендерБок функција и обезбеди три параметра: ред (број реда), кутија (индекс оквира унутар реда), и података (садржај текста за ажурирање).

функцијарендерБок(ред, кутија, подаци) {
 [...доцумент.куериСелецтор(`.ров-${ров}`).цхилдрен][бок].иннерТект = подаци;
}

Руковање уносом са тастатуре са функцијом

Да бисте управљали кључним уносима и ажурирали плочу, креирајте инсертКеи функција са а кључ параметар. Функција треба да се понаша у складу са пренетим параметром.

функцијаинсертКеи(кључ) {
ако (кључ "Бацкспаце".тоУпперЦасе() && цуррентРов < боардЦонтент.ленгтх) {
 боардЦонтент[цуррентРов][цуррентБок] = 0;
ако (цуррентБок !== 0) {
 цуррентБок--;
 рендерБок (тренутниРов + 1, цуррентБок, "");
 }
 } друго {
ако (цуррентРов < боардЦонтент.ленгтх) {
 боардЦонтент[цуррентРов][цуррентБок] = кључ;
 рендерБок (тренутниРов + 1, цуррентБок, кључ);
 цуррентБок++;
 }
ако (цуррентРов < боардЦонтент.ленгтх && боардЦонтент[цуррентРов][цуррентБок] !== 0) {
 евалуате (цуррентРов, кеи);
 цуррентБок = 0;
 цуррентРов++;
 }
 }
}

Процена претпоставке играча

Направите ан проценити, оценити функција која прихвата параметар реда. Ова функција је одговорна за процену играчевог нагађања.

функцијапроценити, оценити(ред){
}

Свака игра има а Покажи Одговор дугме које се појављује тек након што корисник четири пута погоди. Дакле, у функцији имплементирајте функционалност која ради управо то:

ако (тренутни ред 4) {
 сховБтн.ремовеАттрибуте('онемогућено')
}

Затим дефинишите променљиву за погађање и променљиву одговора која проверава да ли су слова у исправном положају.

дозволити гуесс = боардЦонтент[ред].јоин('').тоУпперЦасе();
дозволити одговор = сецретВорд.сплит("");

Алгоритам бојења плочица ће бити од користи овде. Подсетите се да плочица или слово треба да буду зелене ако се налазе у речи и на тачном месту.

Ако је плочица у речи, али на погрешном месту, плочица је жута и на крају, сива боја је за плочице које нису у речи.

дозволити боје = погоди
 .разделити("")
 .Мапа((писмо, идк) => писмо == одговор[идк]? (одговор[идк] = лажно): писмо)
 .Мапа((писмо, идк) =>
 писмо
? (идк = ансвер.индекОф (слово)) < 0
? "сиви"
: (одговор[идк] = "жуто")
: "зелен"
);

Горе наведени блок кода врши поређење елемент по елемент између погоди низ и одговор низ. На основу резултата овог поређења, код ажурира боје низ.

Затим дефинишите а сетЦолорс функцију која може да преузме боје низ као параметар и обојите плочице на одговарајући начин:

функцијасетЦолор(боје) {
 цолорс.форЕацх((боја, индекс) => {
документ.куериСелецтор(`буттон[дата-кеи=${гуесс[индек].тоУпперЦасе()}]`).стиле.бацкгроундЦолор = боја;
документ.куериСелецтор(`буттон[дата-кеи=${гуесс[индек].тоУпперЦасе()}]`).стиле.цолор= "црн";
 [...доцумент.куериСелецтор(`.ров-${ров + 1}`).цхилдрен][индек].стиле.бацкгроундЦолор = боја;
 })
}

Игра је сада завршена. Све што сада треба да урадите је да позовете гетНевВорд функција, и спремни сте.

гетНевВорд();

Честитамо, управо сте поново креирали Вордле.

Подигните своје ЈаваСцрипт вештине на следећи ниво тако што ћете поново креирати игре

Учити нови језик као почетник није лако. Поново креирање игара као што су Тиц-тац-тое, Хангман и Вордле на језику као што је ЈаваСцрипт, може помоћи почетницима да савладају концепте језика тако што ће их применити у пракси.