Як створити власну гру Wordle

Як працює така веб-гра, як Wordle? Що потрібно знати, щоб створити власну гру?

Не кожна гра потребує великої команди розробників і років розробки, щоб стати хітом. Wordle, наприклад, був створений Джошем Уордлом для свого партнера Палак Шаха за короткий проміжок часу, і, незважаючи на його простоту та дуже мало функцій, його неймовірна популярність принесла йому викуп New York Times.

Як працює така веб-гра, як Wordle

Якщо у вас є ідея простої, але захоплюючої гри, яка могла б привернути увагу світу та заробити вам великі гроші, цілком можливо самостійно написати веб-програму на зразок Wordle.

Структура веб-сайту Wordle, як і будь-який веб-сайт, HTML, мова гіпертекстової розмітки. Це код, на який покладаються всі веб-сайти, щоб повідомляти вашому браузеру, куди розміщувати елементи під час завантаження сторінки. Сайт, який ви зараз читаєте, закодований у форматі HTML, надає не лише фактичний вміст, але й інструкції щодо відображення цього вмісту, від положення меню до розміру шрифту.

Окрім HTML, існує CSS, каскадні таблиці стилів: це доповнення до 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. Подумайте, чи хочете ви піти далі.

Протилежність Tree House, Dash . Сайт охоплює лише основи HTML, CSS і JavaScript, але він абсолютно безкоштовний і особливо зручний для початківців. Усім керується прямо у вашому браузері, і, як і Codecademy, ви вчитеся на практиці, щоб повною мірою скористатися перевагами цих мов.

Цей список далеко не вичерпний, тим більше, що це лише англомовні ресурси, ви можете легко знайти їх французькою, але вони є гарною базою для початку вивчення HTML, CSS і JavaScript. Вам належить грати… і кодувати!