БлогNot. Пишем 2D-платформер на Javascript

Пишем 2D-платформер на Javascript

Классические 2D-платформеры, такие как Prince of Percia, Aladdin и т.п., были и остаются любимыми целыми поколениями пользователей. Пожалуй, это самый первый класс игр, в котором у каждого есть своя избранная забава. Реализуем небольшой платформер средствами Javascript, как показывающий основные возможности этого класса игр, так и загружающий игровое поле из стандартного бесплатного редактора уровней.

Уровни удобнее всего нарисовать в Tiled map editor. Скачав и установив эту бесплатную программу, создадим новую карту с такими настройками:

Тайлы, новая карта
Тайлы, новая карта

Сохраним её как файл level1.tmx

Создадим в той же папке файл tiles1.png с тайлами (спрайтами для стен), я сделал пять тайлов, на самом деле, всё равно сколько, только незаполненное место, помеченное нулями, будет разрешено для перемещения героя. У меня линейные размеры файла PNG составили 160 x 32 пискеля, картинки любые, это будут стены, нарисуем их мышью в программке.

Вторая картинка - heroes1.png, будет хранить изображения героев, я выбрал тот же линейный размер файла - две картинки 32 на 32 пикселя для героя, две для монстра и одна для сокровища, так как сокровище будет мерцать в духе старого доброго "Диггера".

Добавим в файл уровня слой объектов и их типы (меню Вид - Редактор типов объектов, нам хватит treasure и monster). Самих монстров и сокровища изобразим просто как прямоугольники.

У монстров при этом будут установлены пользовательские свойства defaultDx, определяющее наибольшую скорость монстра по умолчанию и left или right, которые определяют направление первоначального движения (достаточно указать одно из свойств со значением true). Тип свойств можно оставить string, не суть важно.

Разбор дополнительных свойств у нас реализован прямо в коде скрипта, поэтому если таковые нужны, меняем метод setupEntity.

Разработка уровня игры в Tiled map editor
Разработка уровня игры в Tiled map editor

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

Затем выполняем команду Файл - Экспортировать как - JSON map-файлы. Укажем имя файла, по которым сохранили данные, аргументом метода openURL для загрузки в игру.

Основной исходник составляет около 400 строк, в нём много комментариев, учтены гравитация, ускорение, инерция, прыжок в движении (пробел можно нажимать, не отпуская стрелки), обработка столкновений для монстров и сокровищ, победа или поражение. Ну а так как пределов совершенству нет, думаю, можно прикрутить туда загрузку уровней, призы и т.п.

 Поиграть в платоформер на Javascript онлайн

Вот архив .zip со всеми файлами, имеющими отношение к проекту (на момент написания приложения). После скачивания все файлы могут располагаться в одной папке. Так как происходит загрузка уровня через AJAX, приложение не будет работать просто по клику на файле index.html (то есть, по протоколу file://), а нужно запускать его локально с локалхоста, такого как XAMPP.

 Скачать проект JS 2D Platformer в архиве .zip (21 Кб)

Содержимое архива:

  • index.html, главный файл скрипта
  • platformer.js, файл приложения
  • level1.json, файл с картой
  • tiles1.png, файл со спрайтами стен
  • heroes1.png, файл со спрайтами героев
  • level1.tmx, файл карты для Tiled map editor, для размещения на хосте не нужен

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

Совместимостью с Internet Explorer не озадачивался (напомним IE, в том числе 11 версии, устарел и больше не поддерживается), в остальных браузерах должно работать.

Версия Tiled map editor 1.6.0 Win64, которой я пользовался для создания уровня, файл-установщик .msi:

 Tiled-1.6.0-win64.msi, скачать с Яндекс-диска

26.05.2021, 14:02 [343 просмотра]


теги: javascript графика программирование софт ретро игра