Создаем Свою Игру Wordle: Подробное Руководство
Wordle захватил интернет штурмом своей простой, но увлекательной концепцией. Если вы когда-нибудь задумывались о том, как создать свою собственную версию этой популярной игры, вы попали по адресу. В этой статье мы подробно рассмотрим процесс создания Wordle, начиная с основ и заканчивая реализацией рабочего прототипа. Мы рассмотрим основные шаги, необходимые для построения игры, включая выбор слова, обработку пользовательского ввода и отображение результатов. Вы узнаете, как создать функциональную игру Wordle, которую можно будет запускать в браузере.
Что Такое Wordle?
Прежде чем мы погрузимся в технические детали, давайте кратко напомним, что такое Wordle. Это ежедневная игра в угадывание слов, в которой игроку дается шесть попыток угадать слово из пяти букв. После каждой попытки игра сообщает, какие буквы находятся в правильном месте, какие есть в слове, но не в правильном месте, а каких букв в слове нет. Эта обратная связь помогает игроку постепенно сужать круг поиска и приближаться к правильному ответу.
Необходимые Инструменты и Знания
Для создания нашей версии Wordle нам понадобятся следующие инструменты и знания:
- HTML: Для создания структуры игры (разметка элементов, кнопок, полей ввода).
- CSS: Для стилизации внешнего вида игры (цвета, шрифты, размеры, расположение элементов).
- JavaScript: Для обработки логики игры (выбор слова, проверка ввода, обновление интерфейса).
- Базовые знания программирования: Понимание основ программирования поможет вам лучше разобраться в коде и адаптировать его под свои нужды.
- Текстовый редактор или IDE: (например, VS Code, Sublime Text, Atom) для написания кода.
Для этой статьи мы будем использовать простой текстовый редактор и браузер для проверки результатов. Никаких сложных инструментов не потребуется.
Шаг 1: Создание Структуры HTML
Начнем с создания HTML-структуры для нашей игры. Нам понадобится контейнер для игрового поля, а также элементы для ввода букв и отображения результатов. Вот пример простого HTML-кода:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wordle Clone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Wordle</h1>
<div id="game-board"></div>
<input type="text" id="guess-input" maxlength="5">
<button id="guess-button">Проверить</button>
<div id="message"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Разберем этот код:
<!DOCTYPE html>: Объявление типа документа HTML5.<html lang="ru">: Корневой элемент HTML-документа с указанием языка «русский».<head>: Контейнер для метаданных документа (заголовок, подключение CSS).<title>Wordle Clone</title>: Заголовок страницы, который отображается во вкладке браузера.<link rel="stylesheet" href="style.css">: Подключение файла стилей CSS.<body>: Основной контент страницы.<div class="container">: Контейнер для всего контента игры.<h1>Wordle</h1>: Заголовок игры.<div id="game-board"></div>: Контейнер для отображения игрового поля (попытки угадывания).<input type="text" id="guess-input" maxlength="5">: Поле ввода для ввода слова.<button id="guess-button">Проверить</button>: Кнопка для отправки введенного слова.<div id="message"></div>: Контейнер для отображения сообщений (например, «Правильно!», «Неверно!»).<script src="script.js"></script>: Подключение файла JavaScript.
Сохраните этот код в файл с именем index.html.
Шаг 2: Стилизация с Помощью CSS
Теперь создадим файл style.css и добавим стили, чтобы наша игра выглядела более привлекательно. Вот пример CSS-кода:
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.container {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#game-board {
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(5, 1fr);
gap: 5px;
margin: 20px 0;
max-width: 300px;
}
.letter-box {
border: 1px solid #ccc;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
text-transform: uppercase;
}
.letter-box.correct {
background-color: #6aaa64;
color: white;
border: none;
}
.letter-box.present {
background-color: #c9b458;
color: white;
border: none;
}
.letter-box.absent {
background-color: #787c7e;
color: white;
border: none;
}
#guess-input {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
#guess-button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#guess-button:hover {
background-color: #0056b3;
}
#message {
margin-top: 10px;
font-weight: bold;
}
Этот код задает следующие стили:
- Центрирует контент на странице.
- Задает стиль для контейнера игры (фон, рамка, тень).
- Определяет сетку для игрового поля.
- Стилизует ячейки с буквами (границы, размер, центрирование).
- Задает стили для ячеек с правильными, присутствующими и отсутствующими буквами (цвета фона и текста).
- Стилизует поле ввода и кнопку.
- Задает стиль для сообщений.
Сохраните этот код в файл с именем style.css в той же папке, что и index.html.
Шаг 3: Логика Игры на JavaScript
Теперь самое интересное — добавим логику игры на JavaScript. Создайте файл script.js в той же папке и вставьте в него следующий код:
const words = [
"слово",
"кисть",
"книга",
"ручка",
"ветер",
"море",
"солнце",
"небо",
"земля",
"стол",
"стул",
"окно",
"дверь",
"свет",
"ночь",
"день",
"город",
"лес",
"река",
"дом",
"сад",
"друг",
"мир",
"час",
"год",
"печь",
"сыр",
"мясо",
"суп",
"хлеб",
"чай",
"кофе",
"сок",
"вода",
"игры",
"вино",
"пиво",
"кот",
"пес",
"утка",
"рыба",
"жара",
"холод",
"туман",
"гром",
"дождь",
"снег",
"лед",
"луна",
"звезда",
"роза",
"трава",
"лист",
"парк",
"пляж",
"баня",
"поезд",
"авто",
"вело",
"кран",
"врач",
"зуб",
"мозг",
"пол",
"потолок",
"стена",
"канал",
"театр",
"музей",
"школа",
"банк",
"газ",
"ток",
"игла",
"нить",
"часы",
"куст",
"цвет",
"шум",
"вид",
"вкус",
"запах",
"смех",
"сон",
"боль",
"мыло",
"пыль",
"грязь",
"тело",
"ум",
"душа",
"вера",
"зло",
"раб",
"бог"
];
let secretWord;
let currentGuess = "";
let guessesRemaining = 6;
let gameBoard = document.getElementById("game-board");
let guessInput = document.getElementById("guess-input");
let guessButton = document.getElementById("guess-button");
let messageDiv = document.getElementById("message");
function startGame() {
secretWord = words[Math.floor(Math.random() * words.length)];
console.log("Secret Word:", secretWord);
gameBoard.innerHTML = ""; // clear the board
currentGuess = "";
guessesRemaining = 6;
messageDiv.innerText = "";
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 5; j++) {
const letterBox = document.createElement("div");
letterBox.classList.add("letter-box");
gameBoard.appendChild(letterBox);
}
}
}
function updateBoard() {
const boxes = gameBoard.querySelectorAll(".letter-box");
let currentLetterIndex = 0;
for(let i = 0; i < 6; i++) {
for(let j = 0; j < 5; j++) {
const box = boxes[currentLetterIndex];
if(i < 6 - guessesRemaining) {
let pastGuess = document.querySelectorAll(".letter-box")[i*5 + j];
pastGuess.textContent = getPastGuess(i)[j] || "";
if (getPastGuess(i)) {
if (getPastGuess(i)[j] === secretWord[j]){
pastGuess.classList.add("correct");
} else if (secretWord.includes(getPastGuess(i)[j])){
pastGuess.classList.add("present");
} else {
pastGuess.classList.add("absent")
}
}
} else{
box.textContent = "";
box.classList.remove("correct", "present", "absent");
}
currentLetterIndex++;
}
}
}
let pastGuesses = [];
function getPastGuess(index) {
return pastGuesses[index] || "";
}
function handleGuess() {
currentGuess = guessInput.value.toLowerCase();
if (currentGuess.length !== 5) {
messageDiv.innerText = "Слово должно содержать 5 букв.";
return;
}
if (!words.includes(currentGuess)) {
messageDiv.innerText = "Нет такого слова в словаре.";
return;
}
pastGuesses.push(currentGuess);
guessesRemaining--;
updateBoard();
if (currentGuess === secretWord) {
messageDiv.innerText = "Поздравляем, вы угадали слово!" ;
guessInput.disabled = true;
guessButton.disabled = true;
return;
}
if (guessesRemaining === 0) {
messageDiv.innerText = `Вы проиграли. Загаданное слово: ${secretWord}`;
guessInput.disabled = true;
guessButton.disabled = true;
return;
}
guessInput.value = ""; // clear input field
}
guessButton.addEventListener("click", handleGuess);
guessInput.addEventListener("keypress", (event) => {
if (event.key === "Enter") {
handleGuess();
}
});
startGame();
Этот код выполняет следующие действия:
- Инициализация переменных: Определяет список слов, выбирает случайное слово в качестве загаданного, устанавливает начальные значения для переменных.
startGame(): Запускает новую игру, выбирает случайное слово, очищает игровое поле и устанавливает начальное количество попыток.updateBoard(): Обновляет игровое поле на основе введенных пользователем букв.handleGuess(): Обрабатывает ввод пользователя, проверяет слово, обновляет доску и определяет победителя или проигравшего.- Обработчики событий: Назначает обработчики событий для кнопки «Проверить» и нажатия клавиши Enter в поле ввода.
Сохраните этот код в файл с именем script.js в той же папке, что и index.html и style.css.
Шаг 4: Тестирование
Теперь, когда у вас есть все три файла (index.html, style.css и script.js), вы можете открыть index.html в своем браузере. Вы должны увидеть простую игру Wordle. Попробуйте ввести слово и нажать кнопку «Проверить». Убедитесь, что игра работает правильно, и что стили отображаются корректно. Попробуйте несколько слов, чтобы проверить работу разных типов букв.
Улучшения и Дополнения
Этот простой прототип Wordle можно улучшить и дополнить различными функциями. Вот некоторые идеи:
- Сохранение прогресса: Добавьте функцию сохранения состояния игры, чтобы пользователь мог продолжить позже.
- Статистика: Ведите статистику игр пользователя (количество побед, поражений, среднее количество попыток).
- Анимация: Добавьте анимации, чтобы сделать игру более интерактивной и динамичной.
- Сложность: Позвольте пользователю выбирать уровень сложности, например, меняя длину слова или словарь.
- Интерфейс: Сделайте более привлекательный дизайн, включая выбор тем и цветовых схем.
- Адаптивный дизайн: Убедитесь, что игра хорошо отображается на разных устройствах (компьютерах, планшетах, телефонах).
- Локализация: Добавьте поддержку нескольких языков.
Заключение
В этой статье мы рассмотрели все основные шаги для создания игры Wordle с нуля. Мы использовали HTML для структуры, CSS для стилизации и JavaScript для логики игры. Созданный прототип можно использовать в качестве основы для дальнейшего развития и экспериментов. Вы можете добавить новые функции, улучшить дизайн и создать свою уникальную версию Wordle.
Теперь, когда у вас есть базовое понимание того, как создать Wordle, вы можете попробовать создать свою игру и поделиться ею с друзьями. Помните, что программирование — это процесс постоянного обучения и совершенствования, поэтому не бойтесь экспериментировать и пробовать новые вещи!
Если у вас возникнут вопросы или предложения, не стесняйтесь оставлять их в комментариях ниже.