Введение в разработку игр с помощью HTML5

Это руководство создано в качестве справочника для семинара по разработке игр HTML5 для CarlHacks 2015.

Цель семинара

К концу этого семинара вы должны настроить Phaser и понять, как кодировать и развертывать такую игру: (нажмите ниже, чтобы попробовать!)

КарлВарс

Почему HTML5?

Независимо от того, являетесь ли вы новичком в программировании или ветераном, HTML5 — отличная технология, с которой можно начать. Что мне лично нравится в этом, так это то, как легко развернуть что-то, что можно воспроизводить / использовать как на настольных компьютерах, так и на мобильных телефонах.

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

Круто, не так ли?

Обзор и фазер

Основная суть HTML5 заключается в использовании тега canvas для рисования всего, что вам нравится, и для создания многофункциональных, динамичных приложений и игр. API рисования относительно низкоуровневый, требующий большого количества стандартного кода, чтобы что-то сделать.

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

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

Подготовка

Полное подробное руководство по настройке Phaser находится в официальной документации.

Однако, если вы просто хотите сразу приступить к работе, вы можете клонировать или загрузить этот репозиторий:

https://github.com/OmarShehata/BasicPhaser

Который содержит минимум необходимых вам файлов и базовый пример!

Что вы должны увидеть, если успешно запустите базовый пример

Создание игры

Для этого примера мы собираемся сделать очень минималистичный, простой шутер. Репозиторий можно найти здесь:

https://github.com/OmarShehata/PhaserExample

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