Геймдев Код #Статьи #Статьи

26 марта, 2024

ТОП игр на JavaScript

На JS пишут не только сайты и редакция Skillbox.kz докажет это.

Чем игры на JS отличаются от обычных 

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

Раньше веб-игры разрабатывали с помощью Flash. Это платформа для создания мультимедиа в браузере. На нем работали игры, рекламные баннеры. Еще Flash помогал воспроизводить видео и аудио на сайтах. Сейчас Flash уже не работает в большинстве браузеров из-за уязвимостей и тяжеловесности. Ему на замену пришел WebGL. Технология позволяет рисовать графику, создавать анимированные изображения и игры.

Узнайте, как разрабатывать клиентскую и серверную часть кода на платформе Node.js

Узнать больше

Версия редакции Skillbox.kz. 9 интересных игр на JS

1. Keep Out!

Игру сделали с помощью библиотеки three.js. Библиотека помогает разработчику создавать и отображать анимированную 3D-графику.

Суть: бродить по подземельям в поисках выхода и сражаться с врагами. 

Передвижение персонажа в пространстве обычное — WASD. А вот поворачивать камеру можно только горизонтально на 90 градусов клавишами Q — налево и E — направо. Атаковать можно нажатием на Space. Значит мышка в управлении не участвует.

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

2. Heraclos

Сюжет начинается так: нам показывают нарисованную кат-сцену. Кстати, внутриигровые видео редко встречаются в браузерных играх.

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

Играем от третьего лица. Управление обычное — WASD для передвижения и мышка для поворотов камеры.

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

3. OnOff

Игра-платформер с музыкой, которая наверняка понравится любителям восьмибитной классики.

Механика игры: вовремя нажимать на Space, чтобы белые платформы оказывались проницаемы, а черные осязаемы и наоборот.

Всего 25 уровней. Цель каждого — добраться до звезды. Еще есть редактор карт, где любой пользователь может создать свою.

4. Offline Paradise

Еще одна игра-платформер с мелодичной и успокаивающей музыкой.

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

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

5. Epic SkidMarks

Гонки от третьего лица онлайн. Можно подключиться к любому серверу или создать свой.

Отзывчивое управление, трамплины, дрифт и интересные трассы — вот что ждет в этом проекте. Игра в разработке. Поэтому часто случаются баги и вылеты.

6. HexGL

Написана на JavaScript, HTML и CSS.

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

Есть возможность включить режим бога и кататься бесконечно. А также игра адаптивна — можно играть на компьютере и на телефоне.

Исходный код можно посмотреть здесь.

7. Everyone’s sky

РПГ-игра, где игрок исследует космические просторы. Управлять кораблем можно с помощью стрелок, а при нажатии на Space стрелять. Чтобы добыть ресурсы, нужно уничтожать метеориты и другие корабли.

В игре можно враждовать с цивилизациями или вступать в союзы. Еще есть миссии, которые завершаются по-разному: мирно и не очень.

8. Gorescript

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

Здесь несколько типов врагов. Например, синие треугольники атакуют на дальней дистанции, а красные шары — на ближней. 

Уровни линейные, но есть и потайные комнаты. Попасть туда получится с помощью активации кнопок на уровне.

9. Konnekt

Стратегия, в которой игрок очищает систему от вирусов.

Нужно управлять синими шариками и сражаться против красных с помощью построения связей. 

Визуал у проекта минималистичный. Так игрок не отвлекается от продумывания следующего хода.

Почему именно эти игры

  • Новые технологии. Оценивали, есть ли в играх необычные решения, которые не встречались в других проектах.
  • Визуальное оформление. Визуал не должен мешать геймплею. Наоборот, должен дополнять его и создавать атмосферу. Игра может быть обычной, но заметно выделяться и приковывать внимание игроков графикой и дизайном. Хороший пример — Sable
  • Сложность геймплея. К нему относится не только уровень сложности, но и интрига. Насколько игра интересна с течением времени. Если все уровни такие же простые как и первый, игра быстро наскучит. Также с каждым уровнем должны появляться новые механики. На первом уровне игрок может лишь убегать от противников, а на втором уже может сражаться с врагами мечом.
  • Использование возможностей ДжаваСкрипт. Реализация сложных игровых алгоритмов и физики.

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

Что можно создавать с помощью JS

JavaScript — инструмент для разработки игр разного жанра. С этим языком программирования можно создавать легкие головоломки, аркады, RPG и стратегии. 

Что пишут на JS

  • Аркады. Например, HexGL. Это проекты с низким порогом входа, поэтому они подходят для работы в браузере и разработке на ДжаваСкрипт.
  • Платформеры. OnOff — платформер. Простые с точки зрения реализации и гибкие со стороны геймплея. 
  • RPG. Например, Everyone’s sky. Несмотря на обширность и сложность, язык реализовывает большие сюжетные линии и сложную систему прокачки персонажей. Такие проекты встречаются реже, чем аркады. Но программист, который работает на JS может создавать такие игры в браузере.
  • Шутеры. Gorescript — редкий экземпляр. Потому что шутеров, которые написаны на JS в таком жанре мало.
  • Стратегии. Игра из ТОПа — Konnekt. Для реализации сложных алгоритмов и многомерных миров ДжаваСкрипт тоже подходит.

i

Также JS и браузеры позволяют программистам интегрировать мультиплеер в игры.

Будущее и развитие JavaScript в игровой индустрии

Развитие JavaScript, его фреймворков и библиотек, таких как Three.js для 3D-графики или Phaser для создания 2D-игр открывает много возможностей для разработчиков. С инструментами легче создать игры с богатым интерактивным геймплеем. А еще развитие языка снижает порог входа для новых разработчиков в индустрию.

Также ДжаваСкрипт увеличивает доступность игр. Браузер есть почти на любом устройстве. Игры, написанные на JS доступны везде: старые мобильные телефоны, планшеты и компьютеры. Это делает проекты открытыми для аудитории по всему миру.

Полезные ресурсы 

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

И не только фронтенд. Не только ту часть, что видит пользователь. С помощью JS можно разрабатывать и серверную сторону, с помощью которой обрабатываются и передаются данные.

Если вам интересен ДжаваСкрипт, рекомендуем изучить книги, ресурсы и сообщества ниже. 

Литература:

  • Дэвид Флэнаган «JavaScript. Подробное руководство» — классика, которая детально и с примерами объясняет, как писать код на языке. Подходит новичкам и опытным разработчикам.
  • Кайл Симпсон «Вы не знаете JS» — эта серия поможет глубже погрузиться в особенности языка. Идеально подойдет тем, кто хочет по-настоящему понять язык.
  • Этан Браун «Изучаем JavaScript» — подходит для начинающих. Книга содержит примеры и упражнения для закрепления материала.
  • Алекс Бэнкс и Ева Порселло «React и Redux. Функциональная веб-разработка» — руководство по разработке веб-приложений с использованием библиотеки React и менеджера состояния Redux для JavaScript.

Ресурсы:

  • Codin Game — игра для изучения языков программирования. JavaScript тоже поддерживается.
  • JSRobot — игра для изучения языка. Здесь нужно писать код, чтобы управлять роботом.
  • JavaScript30 — сборник уроков и руководств по языку.

Станьте Фронтенд-разработчиком

Изучите базовую и продвинутую веб-верстку, основы JavaScript. Получите продвинутые навыки: TypeScript и инструменты разработчика, React.js или Vue.js (на выбор) и станьте востребованным frontend-разработчиком.

Забрать доступ