Трябва да сте играли играта Wordle. Ето как можете да създадете своя собствена версия на Wordle с помощта на JavaScript.

Worlde е популярна игра, която завладя света в началото на 2022 г. Пресъздаването на играта Wordle или поне изграждането на нейна по-опростена версия е нещо, което разработчиците, които са нови в JavaScript, трябва да обмислят.

Как работи Wordle

В Wordle има тайна дума от пет букви. Играчът има шест опита и трябва да познае различни петбуквени думи, за да види колко близо са до тайната дума.

След като играчът направи предположение, Wordle използва цветове, за да каже на играча колко близо е до тайната дума. Ако една буква има жълт цвят, това означава, че буквата е в тайната дума, но на грешна позиция.

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

Настройка на сървъра за разработка

Кодът, използван в този проект, е наличен в a GitHub хранилище и е безплатен за използване под лиценза на MIT. Ако искате да разгледате версия на живо на този проект, можете да проверите това

instagram viewer
демонстрация.

Проектът използва Vite инструмент за изграждане чрез Интерфейс на командния ред (CLI) за скеле. Уверете се, че имате инсталиран Yarn на вашия компютър, защото обикновено е по-бърз от Мениджър на пакети на възли (NPM). Отворете вашия терминал и изпълнете следната команда:

прежда създават vite

Това ще създаде нов проект Vite. Рамката трябва да бъде Ванилия и вариантът трябва да бъде зададен на JavaScript. Сега стартирайте:

прежда

Това ще инсталира всички зависимости, необходими за работата на проекта. След тази инсталация изпълнете следната команда, за да стартирате сървъра за разработка:

разработка на прежда

Настройване на играта и проектиране на клавиатурата

Отворете проекта във вашия редактор на код, изчистете съдържанието на main.js файл и се уверете, че папката на вашия проект изглежда така:

Сега заменете съдържанието на index.html файл със следния шаблонен код:

html>
<htmlезик="bg">
<глава>
<метанабор от знаци="UTF-8" />
<връзкаотн="икона"Тип="изображение/svg+xml"href="/vite.svg" />
<метаиме="viewport"съдържание="width=device-width, initial-scale=1.0" />
<заглавие>JS Wordleзаглавие>
глава>


<тяло>
<дивдокумент за самоличност="приложение">
<див>
<h1>Wordle Cloneh1>
<дивдокумент за самоличност="контроли">
<бутондокумент за самоличност="рестартиране-btn">Повторениебутон>
<бутондокумент за самоличност="покажи-бтн">Покажи отговорабутон>
див>
<дивдокумент за самоличност="съобщение">Моля Изчакай. Играта се зарежда...див>
див>
<дивдокумент за самоличност="интерфейс">
<дивдокумент за самоличност="дъска">див>
<дивклас="клавиатура">див>
див>
див>
<сценарийТип="модул"src="/main.js">сценарий>
тяло>
html>

За CSS отидете до GitHub Repository на този проект и копирайте съдържанието на style.css файл във вашия собствен style.css файл.

Сега в терминала инсталирайте пакета Toastify NPM, като изпълните следната команда:

прежда добавите препичане -S

Toastify е популярен JavaScript пакет, който ви позволява да показвате предупреждения на потребителя. На следващо място, в main.js файл, импортирайте style.css файл и препичам полезност.

импортиране"./style.css"
импортиране Препечете от'toastify-js'

Дефинирайте следните променливи, за да улесните взаимодействието с DOM елементите:

позволявам дъска = документ.querySelector("#дъска");
позволявам съобщение = документ.querySelector("#съобщение");
позволявам ключове = "QWERTYUIOPASDFGHJKLZXCVBNM".split("");
позволявам restartBtn = документ.querySelector("#restart-btn");
позволявам showBtn = документ.querySelector("#show-btn");
showBtn.setAttribute("хора с увреждания", "вярно");
keys.push("Backspace");
позволявам клавиатура = документ.querySelector(".клавиатура");

Настройване на таблото за игра

Тъй като Wordle е игра, в която потребителят трябва да познае дума от пет букви в шест опита, дефинирайте променлива, наречена boardContent който съдържа масив от шест масива. След това дефинирайте променливите currentRow и currentBox за по-лесно преминаване boardContent.

позволявам 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],
];
позволявам currentRow = 0;
позволявам currentBox = 0;
позволявам тайна дума;

За да визуализирате дъската с пет полета във всеки от шестте реда, като използвате HTML елементи, използвайте вложени цикли за повторение и създаване на елементите. Накрая ги прикрепете към дъската.

за (позволявам аз = 0; аз <= 5; i++) {
позволявам ред = документ.createElement("div")
за (позволявам y = 0; y <= 4; y++) {
позволявам кутия = документ.createElement("участък");
 row.appendChild (кутия);
 row.className = `ред-${i + 1}`
 }
 board.appendChild (ред);
}

Добавяне на клавиатурата и слушане на въвеждане от клавиатурата

За да създадете клавиатурата, преминете през клавишите, като използвате за всеки, създавайки елемент бутон за всеки запис. Задайте текста на бутона на Backspace ако влизането е *, в противен случай го задайте на въведената стойност.

Присвояване на ключ клас към бутона и задайте ключ за данни атрибут към стойността на запис с главни букви. След това добавете слушател на събитие за кликване към бутона, който извиква функцията вмъкване на ключ с въведената стойност с главни букви.

keys.forEach(влизане => {
позволявам ключ = документ.createElement("бутон");
ако (влизане "*") {
 key.innerText = "Backspace";
 } друго {
 key.innerText = запис;
 }
 key.className = "ключ";
 key.setAttribute("ключ за данни", entry.toUpperCase());
 key.addEventListener("клик", () => {
 insertKey (entry.toUpperCase())
 setTimeout(() => {
документ.querySelector(`бутон[данни-ключ=${entry.toUpperCase()}]`).blur();
 }, 250)
 })
 keyboard.append (клавиш);
})

Получаване на нова дума от API

Когато потребителят зареди играта за първи път, тя трябва да извлече нова дума от пет букви от Случайна дума API. След това тази дума се съхранява в тайна дума променлива.

функцияgetNewWord() {
асинхроненфункцияfetchWord() {
опитвам {
конст отговор = изчакайте извличане (" https://random-word-api.herokuapp.com/word? дължина=5");
ако (response.ok) {
конст данни = изчакайте response.json();
връщане данни;
 } друго {
хвърлямновГрешка("Нещо се обърка!")
 }
 } улов (грешка) {
 message.innerText = `Нещо се обърка. \н${грешка}\nПроверете вашата интернет връзка.`;
 }
 }
 fetchWord().then(данни => {
 secretWord = данни [0].toUpperCase();
 основен ();
 })
}

В кодовия блок по-горе, основен функцията се изпълнява, ако произволната дума е извлечена успешно. Определете а основен функция точно под getNewWord функция:

функцияосновен(){
}

За да стилизирате всяко поле на дъската, ще ви трябва списък с всички полета във всеки ред. Декларирайте променлива, ред който хваща всички редове в DOM. Освен това задайте съобщение стил на показване към нито един:

 rows.forEach(ред => [...row.children].forEach(дете => boxes.push (дете)))
 boxes.forEach((кутия) => {
 box.classList.add("празен");
 })
 message.style.display = "нито един";

След това добавете a keyup слушател на събития към обекта прозорец и проверете дали освободеният ключ е валиден. Ако е валидно, фокусирайте върху съответния бутон, симулирайте щракване и го замъглете след забавяне от 250 милисекунди:

прозорец.addEventListener("ключ", (e) => {
ако (isValidCharacter (e.key)) {
документ.querySelector(`бутон[данни-ключ=${e.key.toUpperCase()}]`).фокус();
документ.querySelector(`бутон[данни-ключ=${e.key.toUpperCase()}]`).кликнете();
 setTimeout(() => {
документ.querySelector(`бутон[данни-ключ=${e.key.toUpperCase()}]`).blur();
 }, 250)
 }
 })

Под keyup слушател на събития, настройте слушатели на събития за два бутона: showBtn и рестартирайте Btn. Когато играчът щракне showBtn, показва тост известие със стойността на тайна дума променлива.

Щракване рестартирайте Btn презарежда страницата. Освен това се уверете, че сте включили isValidCharacter функция за проверка дали даден ключ е валиден знак.

 showBtn.addEventListener('клик', () => {
 Препечете({
 текст: `Добре добре! Отговорът е ${secretWord}`,
 продължителност: 2500,
 className: "тревога",
 }).showToast();
 })
 restartBtn.addEventListener('клик', () => {
 местоположение.презареждане();
 })
функцияisValidCharacter(вал) {
връщане (val.match(/^[a-zA-Z]+$/) && (val.length 1 || вал "Backspace"))
 }

Извън основен функция, създайте a renderBox функция и предоставя три параметъра: ред (номерът на реда), кутия (индексът на кутията в реда) и данни (текстовото съдържание за актуализиране).

функцияrenderBox(ред, кутия, данни) {
 [...document.querySelector(`.row-${ред}`).children][box].innerText = данни;
}

Обработка на въвеждане от клавиатурата с функция

За да се справите с ключовите входове и да актуализирате дъската, създайте вмъкване на ключ функция с a ключ параметър. Функцията трябва да се държи според предадения параметър.

функциявмъкване на ключ(ключ) {
ако (ключ "Backspace".toUpperCase() && currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = 0;
ако (currentBox !== 0) {
 currentBox--;
 renderBox (currentRow + 1, currentBox, "");
 }
 } друго {
ако (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = ключ;
 renderBox (currentRow + 1, currentBox, ключ);
 currentBox++;
 }
ако (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 оценявам (текущ ред, ключ);
 currentBox = 0;
 currentRow++;
 }
 }
}

Оценяване на предположението на играча

Създайте оценявам функция, която приема параметър на ред. Тази функция е отговорна за оценката на предположението на играча.

функцияоценявам(ред){
}

Всяка игра има Покажи отговора бутон, който се появява само след като потребителят направи четири предположения. Така че във функцията имплементирайте функционалността, която прави точно това:

ако (текущ ред 4) {
 showBtn.removeAttribute('хора с увреждания')
}

След това дефинирайте променливата за предположение и променливата за отговор, която проверява дали буквите са в правилната позиция.

позволявам guess = boardContent[row].join('').toUpperCase();
позволявам отговор = secretWord.split("");

Алгоритъмът за оцветяване на плочки ще бъде полезен тук. Спомнете си, че една плочка или буква трябва да е зелена, ако е в думата и на правилното място.

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

позволявам цветове = предположение
 .split("")
 .map((писмо, idx) => писмо == отговор[idx]? (отговор[idx] = невярно): писмо)
 .map((писмо, idx) =>
 писмо
? (idx = answer.indexOf (буква)) < 0
? "сив"
: (отговор[idx] = "жълто")
: "зелен"
);

Даденият кодов блок по-горе извършва сравнение елемент по елемент между познайте масив и отговор масив. Въз основа на резултатите от това сравнение кодът актуализира цветове масив.

След това дефинирайте a setColors функция, която може да поеме в цветове масив като параметър и оцветете плочките по подходящ начин:

функцияsetColor(цветове) {
 colors.forEach((цвят, индекс) => {
документ.querySelector(`бутон[данни-ключ=${guess[index].toUpperCase()}]`).style.backgroundColor = цвят;
документ.querySelector(`бутон[данни-ключ=${guess[index].toUpperCase()}]`).style.color= "черно";
 [...document.querySelector(`.row-${ред + 1}`).children][index].style.backgroundColor = цвят;
 })
}

Играта вече е завършена. Всичко, което трябва да направите сега, е да се обадите на getNewWord функция и сте готови.

getNewWord();

Поздравления, току-що пресъздадохте Wordle.

Издигнете своите JavaScript умения на следващото ниво, като пресъздадете игри

Научаването на нов език като начинаещ не е лесно. Пресъздаването на игри като Tic-tac-toe, Hangman и Wordle на език като JavaScript може да помогне на начинаещите да овладеят концепциите на езика, като ги приложат на практика.