Как работает такая веб-игра, как Wordle? Что нужно знать, чтобы создать свою игру?
Не для каждой игры требуется огромная команда разработчиков и годы разработки, чтобы стать хитом. Wordle, например, был создан Джошем Уордлом для его партнера Палака Шаха за короткий промежуток времени, и, несмотря на его простоту и очень мало функций, его невероятная популярность принесла ему выкуп в New York Times.
Как работает такая веб-игра, как Wordle
Если у вас есть идея простой, но захватывающей игры, которая могла бы привлечь внимание всего мира и принести вам большие деньги, вполне возможно написать веб-приложение, такое как Wordle, самостоятельно.
Структура веб-сайта Wordle, как и любой веб-сайт, представляет собой HTML, язык гипертекстовой разметки. Это код, на который полагаются все веб-сайты, чтобы сообщить вашему браузеру, куда помещать элементы при загрузке страницы. Сайт, который вы сейчас читаете, закодирован в формате HTML, предоставляя не только фактический контент, но и инструкции по отображению этого контента, от положения в меню до размера шрифта.
Помимо HTML есть CSS, Cascading Style Sheets: это дополнение к HTML для облегчения компоновки элементов, будь то свойства изображения или блока текста. С помощью CSS, если у вас есть несколько страниц на вашем сайте, вы можете установить их визуальные свойства один раз, а не для каждой страницы отдельно.
Если вы хотите уметь создавать веб-страницы, вам необходимо изучить HTML и CSS, хотя многие сервисы позволяют делать это без написания единой строчки кода. Эти сервисы предлагают возможность перетаскивать ваши элементы в очень продвинутом интерфейсе и контролировать все HTML и CSS.
Чтобы сайт был полностью интерактивным, как Wordle, вам также нужен JavaScript для преобразования статических страниц HTML и CSS в более динамичные страницы, будь то окно поиска или панель инструментов. JavaScript может манипулировать видео, 2D или 3D, хранить введенную пользователем информацию, загружать данные из базы данных, выполнять вычисления, выполнять предопределенный код в соответствии с конкретным действием пользователя и т. д.
Как объяснил TechCrunch Джош Уордл, Wordle был написан на JavaScript, коде, который загружается при загрузке страницы, что позволяет играть в игру в автономном режиме после завершения первоначальной загрузки. Современные браузеры могут понимать и выполнять JavaScript, который в нашем случае загружает слово из базы данных, идентифицирует ввод пользователя и предоставляет информацию для каждой буквы.
Сам Джош Уордл признает, что код игры не особенно сложен, что объясняет, почему можно было скачать Wordle полностью до того, как его купило NYT, со всеми словами в своей базе данных. Также можно было найти решения, просто изучив исходный код сайта.
Что нужно знать, чтобы создать свою игру?
Но как самому создать такую игру, как Wordle? Программирование требует обучения, но вам не нужно знать все о HTML, CSS и JavaScript, чтобы создавать что-то на уровне Wordle. Как поясняется на Codecademy, одним из используемых методов программирования является цикл for, который проверяет каждую введенную букву и отображает ее соответствующим цветом.
Codecademy — один из сайтов, где вы можете бесплатно изучать HTML, CSS, JavaScript и многие другие языки веб-разработки. Упражнения хорошо структурированы, и вы всегда учитесь, выполняя их прямо в браузере. Вы увидите, как это сделать, и сможете непосредственно увидеть последствия. Для некоторых расширенных функций и руководств требуется платная подписка, но многое уже можно узнать бесплатно.
Treehouse идет дальше, чем Codecademy, и вам нужно платить 25 долларов в месяц, чтобы использовать его (доступна бесплатная пробная версия). Это более профессиональный и эффективный ресурс для изучения HTML, CSS, JavaScript и многого другого, но он выходит далеко за рамки того, что вам нужно для такой игры, как Wordle. Подумайте, хотите ли вы пойти дальше.
Противоположность Дому на дереве, Дэш . Сайт охватывает только основы HTML, CSS и JavaScript, но он абсолютно бесплатный и особенно удобен для начинающих. Все управляется прямо в вашем браузере, и, как и Codecademy, вы учитесь на практике, чтобы в полной мере воспользоваться преимуществами этих языков.
Этот список далеко не исчерпывающий, тем более, что это только англоязычные ресурсы, вы можете легко найти их на французском языке, но они являются хорошей базой для начала изучения HTML, CSS и JavaScript. Вам решать играть… и программировать!