JavaScript — удивительно мощный язык программирования; без него не было бы почти никакой интерактивности, которую мы ожидаем от веб-сайта и принимаем как должное. Многие новички начинают свое знакомство с JavaScript с написания функций прослушивания событий, которые реагируют на вводимые пользователем данные, такие как щелчки и нажатия клавиш. И хотя прослушиватели событий невероятно важны и полезны, истинная мощь JavaScript заключается в функциональности переменных в сочетании с манипулированием DOM.

Когда я был новичком в JavaScript, единственной вещью, которая помогла мне больше всего, когда дело дошло до манипулирования данными, а также понимания более творческих способов взаимодействия с DOM и перемещения по нему, было создание игры с JavaScript. Давайте обсудим кое-что из того, что входит в создание игры на JavaScript на высоком уровне, и как это поможет вам отточить свои навыки в качестве разработчика JS.

Создание игры заставляет вас лучше манипулировать данными

Мы можем использовать переменные для условного рендеринга определенных элементов в DOM, следить за тем, где пользователь находится на веб-сайте, отслеживать аналитику и так далее. Это становится еще более эффективным при использовании фреймворка на основе компонентов, такого как React, который в значительной степени зависит от разновидности переменной, называемой «состояние». По этим причинам разработчикам JS невероятно важно понимать, как манипулировать переменными и данными, особенно теми, которые взаимодействуют и зависят друг от друга.

При создании игры приходится учитывать неприличное количество переменных, которые отслеживают многие вещи; счет пользователя, его прогресс в игре, сколько жизней у него осталось, его здоровье, условия, при которых он проигрывает… список можно продолжать буквально вечно. Если вы делаете игру с помощью JavaScript, вам, естественно, придется отслеживать множество различных типов взаимодействующих данных и манипулировать ими, что, несомненно, поможет в изучении основ JS.

Создание игры заставляет вас взглянуть на DOM с другой точки зрения.

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

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

Создание игры заставляет вас думать о пользовательском опыте

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

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

Собираем все вместе

Создание игры — это то, что может помочь вам отточить свои навыки JavaScript множеством способов. Во-первых, это подталкивает вас к тому, чтобы лучше манипулировать данными, потому что игры по своей природе имеют множество различных переменных, которые постоянно меняются. Далее, это заставляет вас по-другому взглянуть на DOM; большинство элементов в играх на JavaScript, вероятно, не имеют никакого семантического значения, но, тем не менее, имеют значение для пользователя, о чем мы должны знать и учитывать при написании кода. Наконец, это заставляет вас думать о пользовательском опыте, поскольку ожидается, что каждый элемент будет работать определенным образом в зависимости от контекста, в котором он находится. Эти контексты могут варьироваться настолько, насколько могут различаться разные виды игр.

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