Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Design

Создаем игру Пинг-Понг на HTML5 при помощи EaselJS

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

В этом руководстве мы создадим копию классической игры Пинг-Понг на HTML5 при помощи библиотеки EaselJS. В игре будут множество экранов, звуковые эффекты и (очень простой) соперник с AI (* artificial intelligence – искусственный интеллект. Здесь и далее примеч. пер.).

Шаг 1: Краткий обзор

Используя заранее подготовленные изображения мы напишем код занимательной игры Пинг-Понг на HTML5 при помощи библиотеки EaselJS, которая предоставляет интерфейс для элемента canvas HTML5, подобный тому, что используется во Flash. Для получения начальных знаний об EaselJS ознакомьтесь с этой статьей на Activetuts+.

Игрок сможет управлять ракеткой при помощи мышки и играть против соперника, управляемого компьютером, для выигрыша очков.


Шаг 2: Интерфейс

Мы будем использовать простой интерфейс в нео-фантастическом стиле; в нем будет множество объектов разных форм, кнопок, растровых изображений и много еще чего.

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


Шаг 3: Подключаем EaselJS

Для создания нашей игры мы будем использовать библиотеку EaselJS; обязательно прочтите руководство  Getting Started (начало работы с EaselJS), если вы новичок в работе с ней.

Вы можете скачать последнюю версию EaselJS на ее официальном сайте. Однако та версия может быть несовместимой с кодом, который используется здесь, поэтому я вам рекомендую использовать версию библиотеки, которая входит в состав источников для скачивания.


Шаг 4: Структура HTML

Давайте подготовим наш документ HTML. Мы начнем с самых основ, просто с базового шаблона:


Шаг 5: Скрываем выделение элемента на мобильных устройствах

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


Шаг 6: Библиотеки JavaScript

В следующем коде мы добавляем необходимые библиотеки JavaScript для работы нашего приложения.

Помимо EaselJS мы также будем использовать TweenJS (для реализации твининга (* построение промежуточных отображений; плавный переход от одного значения к другому) свойств JavaScript и свойств элементов HTML5 на экране и игровой петли) и SoundJS (для добавления звуковых эффектов).

Main.js – это файл, в котором мы будем размещать наш код на JavaScript.


Шаг 7: Вызываем функцию Main

В следующих строках мы вызываем функцию Main(). С этой функции будет запускаться наше приложение; она будет реализована позже в руководстве внутри Main.js.


Шаг 8: Тег Canvas

В следующей строке мы создаем canvas HTML5; мы задаем значение его ID, благодаря чему мы сможем сослаться на него позже, и также устанавливаем значения его свойств width и height.


Шаг 9: Создаем Main.js

Давайте начнем создавать игру!

Откройте ваш любимый редактор кода на JavaScript (подойдет любой текстовый редактор, однако у вас не будет подсветки синтаксиса) и приготовьтесь писать код. Не забудьте сохранить файл как Main.js в папке вашего проекта.


Шаг 10: Определяем Canvas

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

В следующих переменных будут храниться элемент HTML canvas и сцена, которая будет с ним связана. Переменная stage будет работать подобно тому, как  работает сцена в AS3 (* ActionScript 3.0 – объектно-ориентированный язык программирования, один из диалектов ECMAScript, который добавляет интерактивность, обработку данных и многое другое в содержимое Flash-приложений)


Шаг 11: Фон

В этой переменной хранится фоновое изображение для стартового экрана.


Шаг 12: Title View (* Стартовый экран)

Выше показан стартовый экран – первый интерактивный экран, который появится в нашей игре. В этих переменных хранятся его компоненты.


Шаг 13: Credits (* Список разработчиков)

На этом экране показывается список разработчиков,  авторское право (* способ защиты интеллектуальной собственности - таких творческих работ, как книги, компьютерные программы, мультимедиа-произведения, музыкальные записи, кинофильмы, - в отличие от изобретений, которые защищаются патентами. Законы об авторском праве предоставляют держателю подобных прав (а это может быть не обязательно автор работы или разработчик) исключительные права копирования работы для коммерческих целей и запрещают другим лицам несанкционированно использовать контент работы для создания собственных произведений (плагиат). Как правило, авторские права действуют в течение ограниченного срока. Наличие защиты авторского права обозначается символом © или (c)) и год создания игры; их значения будут храниться в этих переменных:


Шаг 14: Game View (* Экран с игрой)

В следующих переменных хранятся отдельные графические элементы, которые появляются на Game View.


Шаг 15: Счет очков

Счет очков будет осуществляться при помощи следующих переменных:


Шаг 16: Переменные

Это переменные, которые будем использовать; прочитайте комментарии в коде, чтобы понять, для чего они:


Шаг 17: Создаем звуковые эффекты

Мы будем использовать звуковые эффекты для придания игре большей реалистичности. Звуковые эффект в нашем примере были созданы при помощи замечательно бесплатного инструмента as3sfxr и конвертированы в формат MP3 при помощи Audacity.

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

  • hit.mp3: проигрывается при соударении мяча и ракетки
  • playerScore.mp3: проигрывается, когда игрок набирает очки
  • enemyScore.mp3: проигрывается, когда противник набирает очки
  • hit.mp3: проигрывается при соударении мяча с верхней или нижней границами

Шаг 18: Функция Main

Функция Main() будет выполнена первой после загрузки страницы, поскольку мы ее указали в атрибуте onload документа HTML (смотрите шаг 7).

В ней буду вызваны необходимые для начала игры  функции.


Шаг 19: Подключаем сanvas

В этом коде мы выбираем элемент canvas HTML и привязываем его к классу Stage EaselJS. Благодаря этому переменная stage будет работать так, как работает класс stage в AS3. Добавьте этот код в Main().


Шаг 20: Разрешаем использование событий, возникающих при выполнении действий с мышкой

По умолчанию в EaselJS не разрешается использование событий, возникающих при выполнении действий с мышкой, в целях улучшения производительности. Поскольку нам они необходимы для игры, то мы добавляем следующую строку. Добавьте этот код в Main().


Шаг 21: Загружаем звуки

Мы будем использовать SoundJS для добавления звуков в нашу игру; напишите следующий код для импорта необходимых нам звуков. Добавьте этот код в Main().


Шаг 22: Загружаем графику

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

Для каждого задано имя, так что позже мы можем определить, какое изображение было загружено; под конец вызывается функция, которая обрабатывает изображения.

Добавьте этот код в Main().


Шаг 23: Устанавливаем Ticker

Класс Ticker предоставляет централизованный шаг (ритм), рассылаемый по заданному интервалу. Его можно использовать для инициирования игрового  цикла.

В следующем коде частота смены кадров устанавливается равной 30 и сцена определяется в качестве обработчика шагов.

Класс TweenJS будет прослушивать этот шаг для выполнения анимации. Добавьте этот код в Main().


Шаг 24: Функция для предварительной загрузки

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


Шаг 25: Добавляем Title View

После загрузки всех изображений мы добавляем Title View на сцену при помощи следующей функции:


Шаг 26: Слушатели событий для кнопок TitleView

В этой функции добавляются необходимых обработчиков для кнопок TitleView (это часть addTitleView()).


Шаг 27: Показываем Credits

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


Шаг 28: Скрываем Credits

При нажатии на экран Credits он будет постепенно исчезать и удалится со сцены.

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

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

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


Шаг 29:  Game View

В следующих строках происходит удаление TitleView со сцены и добавление элементов GameView на нее. К фону добавлен слушатель событий, возникающих при выполнении действий с мышкой, для запуска игры при клике.


Шаг 30: Движения ракетки игрока

Ракетка игрока будет двигаться вслед за позицией мышки по вертикали:


Шаг 31: Начинаем игру

Этот код выполняется, когда пользователь кликает по фону игры; в нем добавляется обработчик событий, возникающих при выполнении действий с мышкой, который вызывает функцию из предыдущего шага, и Ticker (* обработчик события «tick») для контролирования игровой петли.

Обратите внимание на способ, которым создается Ticker; он является эквивалентом обработчика событий для Timer в AS3.


Шаг 32: Сбрасывание в исходное состояние

После зачисления очка (игроку или компьютеру) ракетки и мячик будут возвращены в начальные позиции и игра будет приостановлена:


Шаг 33: Движение мячика

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


Шаг 34: Движения соперника

Этот код контролирует движения компьютера; ракетка двигается таким образом, что она будет следовать за мячиком и при этом будет учитываться предел допустимой ошибки (* соперник будет немного ошибаться).


Шаг 35: Столкновения с границами

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


Шаг 36: Счет очков

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


Шаг 37: Столкновения мячика с ракетками

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


Шаг 38: Проверяем результаты (Win/Game Over)

Вы можете изменить конечные условия в следующих строках; по умолчанию используется значение 10.


Шаг 39: Всплывающее сообщение

Благодаря этой функции будет остановлена игра и показано сообщение, содержание которого зависит от результата игры.


Шаг 40: Тестирование

Сохраните свою работу (если вы еще этого не сделали) и откройте файл HTML в браузере, чтобы посмотреть, как работает ваша игра!


Заключение

Попробуйте изменить переменные, используемые в игре, для создания вашей собственной версии игры!

Попробуйте изменить переменные, используемые в игре, для создания вашей собственной версии игры!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.