Как создать клон Wordle с помощью JavaScript

Worlde — популярная игра, которая покорила мир в начале 2022 года. Разработчики, плохо знакомые с JavaScript, должны подумать о том, чтобы воссоздать игру Wordle или, по крайней мере, создать ее более простую версию.

Как работает Wordle

В Wordle есть секретное слово из пяти букв. У игрока есть шесть попыток, и он должен угадывать разные слова из пяти букв, чтобы увидеть, насколько они близки к секретному слову.

После того, как игрок отправляет предположение, Wordle использует цвета, чтобы сообщить игроку, насколько он близок к секретному слову. Если буква имеет желтый цвет, это означает, что буква находится в секретном слове, но не в том месте.

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

Настройка сервера разработки

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

пряжа создать вите

Это создаст новый проект Vite. Каркас должен быть ваниль и вариант должен быть установлен на JavaScript. Теперь запустите:

пряжа

Это установит все зависимости, необходимые для работы проекта. После этой установки выполните следующую команду, чтобы запустить сервер разработки:

пряжа разработчик

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

Откройте проект в редакторе кода, очистите содержимое main.js файл и убедитесь, что папка вашего проекта выглядит так:

Теперь замените содержимое index.html файл со следующим шаблонным кодом:

HTML>
<HTMLязык="ан">
<голова>
<метакодировка="УТФ-8" />
<связьотн.="икона"тип="изображение/svg+xml"href="/vite.svg" />
<метаимя="окно просмотра"содержание="ширина = ширина устройства, начальный масштаб = 1,0" />
<заголовок>JS Wordleзаголовок>
голова>
<тело>
<дивидентификатор="приложение">
<див>
<h1>Вордле Клонh1>
<дивидентификатор="управляет">
<кнопкаидентификатор="перезагрузка-кнопка">Повторкнопка>
<кнопкаидентификатор="шоу-бтн">Покажи ответкнопка>
див>
<дивидентификатор="сообщение">Пожалуйста, подождите. Игра загружается...див>
див>
<дивидентификатор="интерфейс">
<дивидентификатор="доска">див>
<дивсорт="клавиатура">див>
див>
див>
<сценарийтип="модуль"источник="/main.js">сценарий>
тело>
HTML>

Для CSS перейдите в репозиторий GitHub этого проекта и скопируйте содержимое стиль.css файл в свой собственный стиль.css файл.

Теперь в терминале установите пакет Toastify NPM, выполнив следующую команду:

пряжа добавить поджарить -S

Toastify — это популярный пакет JavaScript, который позволяет показывать пользователю оповещения. Далее, в main.js файл, импортируйте стиль.css файл и поджаривать полезность.

Импортировать"./стиль.css"
Импортировать Поджарить от'поджарить-js'

Определите следующие переменные, чтобы упростить взаимодействие с элементами DOM:

позволять доска = документ.querySelector("#доска");
позволять сообщение = документ.querySelector("#сообщение");
позволять ключи = "КВЕРТИЮОПАСДФГХЖКЛЗХЦВБНМ".расколоть("");
позволять перезагрузкаBtn = документ.querySelector("#restart-кнопка");
позволять показатьБтн = документ.querySelector("#show-btn");
showBtn.setAttribute("неполноценный", "истинный");
ключи.push("Возврат");
позволять клавиатура = документ.querySelector(".клавиатура");

Настройка игрового поля

Поскольку Wordle — это игра, в которой пользователь должен угадать слово из пяти букв за шесть попыток, определите переменную с именем доскаКонтент который содержит массив из шести массивов. Затем определите переменные текущая строка и текущая коробка чтобы легче было пройти доскаКонтент.

позволять доска Контент = [
 [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;
позволять секретное слово;

Чтобы визуализировать доску с пятью блоками в каждой из шести строк с помощью элементов HTML, используйте вложенные циклы для итерации и создания элементов. Наконец, добавьте их на доску.

для (позволять я = 0; я <= 5; я++) {
позволять ряд = документ.создатьЭлемент('див')
для (позволять у = 0; у <= 4; у++) {
позволять коробка = документ.создатьЭлемент('охватывать');
 row.appendChild (коробка);
 строка.имя_класса = `ряд-$ {я + 1}`
 }
 board.appendChild (строка);
}

Добавление клавиатуры и прослушивание ввода с клавиатуры

Чтобы создать клавиатуру, переберите клавиши, используя для каждого, создавая элемент кнопки для каждой записи. Установите текст кнопки на Backspace если запись *, в противном случае установите значение ввода.

Назначить ключ класс на кнопку и установите ключ данных атрибут к значению записи в верхнем регистре. Затем добавьте прослушиватель событий щелчка к кнопке, которая вызывает функцию. вставкаКлюч со значением записи в верхнем регистре.

ключи.для каждого(вход => {
позволять ключ = документ.создатьЭлемент("кнопка");
если (вход "*") {
 ключ.внутренний текст = "Возврат";
 } еще {
 key.innerText = запись;
 }
 key.имя_класса = "ключ";
 ключ.setAttribute("ключ данных", запись.toUpperCase());
 key.addEventListener("щелкнуть", () => {
 вставить ключ (entry.toUpperCase())
 установить время ожидания (() => {
документ.querySelector(`кнопка [ключ данных =${entry.toUpperCase()}]`).размытие();
 }, 250)
 })
 keyboard.append (клавиша);
})

Получение нового слова из API

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

функцияполучить новое слово() {
асинхронныйфункцияfetchWord() {
пытаться {
константа ответ = Ждите принести(" https://random-word-api.herokuapp.com/word? длина=5");
если (ответ.хорошо) {
константа данные = Ждите ответ.json();
возвращаться данные;
 } еще {
бросатьновыйОшибка("Что-то пошло не так!")
 }
 } ловить (ошибка) {
 сообщение.внутреннийтекст = `Что-то пошло не так. \n${ошибка}\nПроверьте подключение к Интернету.`;
 }
 }
 fetchWord (). затем (данные => {
 секретное слово = данные[0].toUpperCase();
 основной();
 })
}

В приведенном выше блоке кода основной Функция запускается, если случайное слово успешно выбрано. Определите основной функция прямо под получить новое слово функция:

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

Чтобы стилизовать каждое поле на доске, вам понадобится список всех полей в каждой строке. Объявите переменную, ряд который захватывает все строки в DOM. Кроме того, установите сообщение стиль отображения для никто:

 строки. для каждого (ряд => [...строка.дети].forEach(ребенок => коробки.пуш (ребенок)))
 коробки.для каждого((коробка) => {
 box.classList.добавить ("пустой");
 })
 сообщение.стиль.дисплей = "никто";

Затем добавьте ключ прослушиватель событий для объекта окна и проверьте, действителен ли выпущенный ключ. Если допустимо, сфокусируйтесь на соответствующей кнопке, смоделируйте щелчок и размойте его после задержки в 250 мс:

окно.addEventListener('клавиша', (д) ​​=> {
если (isValidCharacter (e.key)) {
документ.querySelector(`кнопка [ключ данных =${e.key.toUpperCase()}]`).фокус();
документ.querySelector(`кнопка [ключ данных =${e.key.toUpperCase()}]`).щелчок();
 установить время ожидания (() => {
документ.querySelector(`кнопка [ключ данных =${e.key.toUpperCase()}]`).размытие();
 }, 250)
 }
 })

Под ключ прослушиватель событий, настройте прослушиватели событий для двух кнопок: показатьBtn и перезапуститьBtn. Когда игрок нажимает показатьBtn, отобразите всплывающее уведомление со значением параметра секретное слово переменная.

Щелчок перезапуститьBtn перезагружает страницу. Кроме того, убедитесь, что вы включили isValidCharacter Функция для проверки того, является ли ключ допустимым символом.

 showBtn.addEventListener('щелкнуть', () => {
 Поджарить({
 текст: `Хорошо хорошо! ответ ${секретное слово}`,
 продолжительность: 2500,
 имя класса: "тревога",
 }).showToast();
 })
 перезагрузкаBtn.addEventListener('щелкнуть', () => {
 местоположение.перезагрузить();
 })
функцияisValidCharacter(вал) {
возвращаться (val.match(/^[a-zA-Z]+$/) && (знач.длина 1 || вал "Возврат"))
 }

Вне основной функцию, создать рендербокс функцию и предоставить три параметра: ряд (номер строки), коробка (индекс поля в строке) и данные (текстовое содержимое для обновления).

функциярендербокс(строка, поле, данные) {
 [...document.querySelector(`.строка-${строка}`).дети][коробка].innerText = данные;
}

Обработка ввода с клавиатуры с помощью функции

Для обработки ключевых входных данных и обновления доски создайте вставкаКлюч функция с ключ параметр. Функция должна вести себя в соответствии с переданным параметром.

функциявставкаКлюч(ключ) {
если (ключ "Возврат".toUpperCase() && currentRow  boardContent[currentRow][currentBox] = 0;
если (текущий бокс !== 0) {
 текущая коробка--;
 renderBox(currentRow + 1текущая коробка, "");
 }
 } еще {
если (currentRow < boardContent.length) {
 boardContent[currentRow][currentBox] = ключ;
 renderBox(currentRow + 1, текущий бокс, ключ);
 текущая коробка++;
 }
если (currentRow < boardContent.length && boardContent[currentRow][currentBox] !== 0) {
 оценить (текущая строка, ключ);
 текущая коробка = 0;
 текущая строка++;
 }
 }
}

Оценка предположения игрока

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

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

В каждой игре есть Покажи ответ Кнопка, которая появляется только после того, как пользователь сделал четыре предположения. Итак, в функции реализуйте функциональность, которая делает именно это:

если (текущая строка 4) {
 showBtn.removeAttribute('неполноценный')
}

Затем определите переменную предположения и переменную ответа, которая проверяет, находятся ли буквы в правильном положении.

позволять предположение = boardContent[строка].join('').toUpperCase();
позволять ответ = секретное слово.split("");

Здесь пригодится алгоритм окраски плитки. Помните, что плитка или буква должны быть зелеными, если они находятся в слове и в правильном месте.

Если плитка находится в слове, но не в том месте, плитка становится желтой и, наконец, плитка, которой нет в слове, окрашена в серый цвет.

позволять цвета = угадать
 .расколоть("")
 .карта((буква, идентификатор) => буква == ответ[idx]? (ответ[idx] = ЛОЖЬ): письмо)
 .карта((буква, идентификатор) =>
 письмо
? (idx = answer.indexOf (буква)) < 0
? "серый"
: (ответ[idx] = "желтый")
: "зеленый"
);

Приведенный выше блок кода выполняет поэлементное сравнение между предполагать массив и отвечать множество. По результатам этого сравнения код обновляет цвета множество.

Далее определите setColors функция, которая может принимать цвета array в качестве параметра и соответствующим образом раскрасьте плитки:

функцияsetColor(цвета) {
 цвета.для каждого((цвет, указатель) => {
документ.querySelector(`кнопка [ключ данных =${угадай[индекс].toUpperCase()}]`).style.backgroundColor = цвет;
документ.querySelector(`кнопка [ключ данных =${угадай[индекс].toUpperCase()}]`).стиль.цвет= "черный";
 [...document.querySelector(`.строка-${строка + 1}`).children][index].style.backgroundColor = цвет;
 })
}

Теперь игра завершена. Все, что вам нужно сделать сейчас, это позвонить в получить новое слово функция, и вы готовы к работе.

получить новое слово ();

Поздравляем, вы только что воссоздали Wordle.

Поднимите свои навыки JavaScript на новый уровень, воссоздавая игры

Выучить новый язык новичку непросто. Воссоздание таких игр, как крестики-нолики, висельник и Wordle, на языке, подобном JavaScript, может помочь новичкам освоить концепции языка, применяя их на практике.