На чем пишут html игры

Ввод в разработку Web-игр

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

Диапазон игр, которые вы можете встретить в web поражает и не уступает «нативным» играм, реализованным с использованием языка программирования c++ и java.Причём это касается не только относительно небольших игр, но и объёмных игр жанра РПГ, 3d шутерах и многом другом. Это уже не аналоги простых карточных игр или многопользовательских социальных играх, реализованных с помощью Flash®, а гораздо более сложные вещи. Благодаря значительным улучшениям языка программирования JavaScript и появлению новых API браузера, вы можете создавать игры, не зависящие от операционной системы. Для их работы необходим только браузер. А иногда, например на устройствах с поддержкой HTML5, таких как Firefox OS, не нужен даже он.

Игровая платформа HTML5

Вы действительно можете подумать, что Web — лучшая платформа для вашей игры. Как мы любим говорить:»Web — это тоже платформа.» Давайте посмотрим на главные аспекты Web платформы:

Функционал	Технология
Аудио	Web Audio API (en-US)
Графика	WebGL (OpenGL ES 2.0)
Ввод	Touch events (en-US) , Gamepad API (en-US) , датчики устройства, WebRTC (en-US) , Full Screen API (en-US) , Pointer Lock API (en-US)
Язык	JavaScript (или C/C++ используйте Emscripten для компиляции в JavaScript)
Сеть	WebRTC (en-US) и/или WebSockets
Данные	IndexedDB или «облако»
Веб	HTML, CSS, SVG (en-US) , Social API (и многое другое!)

Экономическое обоснование

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

Охват паутины огромен, она повсюду. Игры, построенные на HTML5, работают на смартфонах, планшетах, ПК и смарт-телевизорах.
Маркетинг и открытость улучшаются. Вы не ограничиваетесь продвижением своего приложения в чужом магазине приложений. Вместо этого вы можете рекламировать и продвигать свою игру по всему интернету, а также в других средствах массовой информации, используя преимущества присущей сети связности и доступности для новых клиентов.
У вас есть контроль, где это имеет значение: Платежи. Вы не должны отдавать 30% своих доходов кому-то другому только потому, что ваша игра в их экосистеме. Вместо этого, взимать плату, что вы хотите, и использовать любую услугу обработки платежей вам нравится.
Опять же, с большим контролем, вы можете обновить игру, когда захотите. Не жди, затаив дыхание, одобрения, пока кто-то прячется внутри другого.
Контролируйте свою аналитику! Вместо того чтобы полагаться на кого-то другого в принятии решений о том, какая аналитика вам нужна, вы можете собрать свою собственную-или выбрать третью сторону, которая вам больше всего нравится, — чтобы собрать информацию о ваших продажах и досягаемости вашей игры.
Вы можете управлять своими отношениями с клиентами более тесно, по-своему. Больше не придётся работать с обратной связью магазина приложений. Взаимодействуйте со своими клиентами так, как вы хотите, без посредника.
Ваши игроки могут играть в вашу игру в любом месте, в любое время. Поскольку Web распространён повсеместно, ваши клиенты могут проверить статус своей игры на своих телефонах, планшетах, домашних ноутбуках, рабочих столах или на чем-либо ещё.

Web-технологии для разработчиков игр

Давайте покопаемся в API веба, которое приносит на стол и обслуживает разработчиков игр. Вот подробный список, чтобы дать вам представление о том, что Web может сделать для вас:

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

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

Эти технологии помогут вам создать и разместить UI вашей игры, а HTML-элемент это один из способов создать 2D-графику

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

JavaScript, язык программирования, используемый в Интернете, быстро развивается в современных браузерах и становится ещё быстрее. Используйте его возможности для написания кода своей игры или используйте такие технологии, как Emscripten или Asm.js, чтобы с лёгкостью переносить существующие игры.

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

SVG (en-US) (масштабируемая векторная графика)

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

Типизированные массивы JavaScript дают вам доступ к необработанным двоичным данным из кода, что позволяет вам манипулировать текстурами GL, игровыми данными или чем-то ещё, даже если код не в формате JavaScript.

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

Позволяет создавать высокопроизводительную аппаратно-ускоренную 3D (и 2D) графику из веб-контента. Это веб-реализация OpenGL ES 2.0.

API WebRTC (Real-Time Communications) даёт вам возможность управлять аудио- и видеоданными, включая телеконференции и передачу данных из других приложений между двумя пользователями. Хотите, чтобы ваши игроки могли общаться друг с другом, взрывая монстров? Это API для вас!

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

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

Комбинация XMLHttpRequest и File API позволяет отправлять и получать любые нужные для вас данные (не позволяйте «XML» выкинуть вас!) с веб-сервера. Это отличный способ сделать что угодно: от загрузки новых игровых уровней и иллюстраций, до передачи информации о статусе игры в режиме non-real-time и обратно.

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Редактор для создания HTML5 игр

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

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

Небольшой список таких игр приведен ниже:

Веселая игра на Хеллоуни — Pumpking ;
Игра в классическом жанре бродилки — skulldude ;
Bratavism ;
» Ты должен победить эту игру «;
Mobs, Inc .

Это совсем небольшой список игр, которые уже были ранее разработаны при помощи HTML5.

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

Game Coder

Программа Game Coder позиционируется как кросс-платформенная программа для создания игр на основе HTML5 и при помощи языка программирования JavaScript .

Программу можно установить как на Windows, так и на другие платформы такие, как: Mac, Linux и даже Андроид. Все что вам потребуется для установки IDE это скачать его и установить на ваш компьютер/телефон.

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

Особенности среды разработки

Среда имеет Debugger , а также консоль для вывода различных сообщений. Это позволяет следить за кодом и за возможными ошибками в нем. Есть встроенный визуальный редактор объектов, благодаря которому можно намного быстрее и качественнее создавать игры на HTML. Он позволяет создавать игровые локации и настраивать эффекты в пару кликов. Также имеет встроенный дизайнер уровней.

Для создания мультиплеерных проектов или же игр, которые должны связываться с сервером здесь есть встроенный терминал, который поддерживает все стандартные команды. Также есть поддержка серверов от PHP и NodeJS.

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

Из интересных фишек можно также выделить моментальную возможность поиска ошибок в Google или Яндекс. Кроме того, вы можете писать код в «живом» режиме с моментальными изменениями.

Редактор быстрый и позволяет создавать игры буквально за 5-10 минут.

Больше интересных новостей

Где применяется язык Python? Сферы применения

TIOBE: язык Си становится популярнее в 2020 году

MIT: 7 прорывных технологий в 2023 году

7 лучших книг по программированию

На каких языках программирования пишут мобильные игры

На каких языках программирования пишут мобильные игры Фото 0

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

На каком языке пишут мобильные игры

За историю развития программирования человечество создало более 700 самостоятельных и уникальных языков программирования: от реально используемых, до разработанных «for fun». Учитывая вариации (форки) каждого языка, можно насчитать до 10 000 ЯП, многие из которых не получили широкого распространения.

Рассматривая вопрос, на каком языке пишут игры для Android чаще всего, нельзя игнорировать тройку лидеров:

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

Разработка C# учитывала недостатки предшественников: C++, Delphi, Modula, Smalltalk. Язык отлично подходит движку Unity, предлагающему набор необходимых инструментов и готовые пресеты для создания игры без глубоких знаний программирования.

Java легко освоить при наличии базовых знаний о принципах программирования и функционирования ЯП. Язык изначально лишен привязки к определенной платформе, по данной причине считается универсальным. Но некоторые движки (например, Unity) не работают с Java по причине несовместимости.

Важную роль выполняет вышеупомянутый движок – набор центральных компонентов игры (физики, механики, трехмерной графики), используемый для разработки уникальных продуктов. Использование готового движка экономит время, оставляя свободу действий в ключе расширения возможностей. Например, в середине 90-х годов Quake engine (от одноименной игры) использовали для разработки HeXen II, Laser Arena, X-Men: The Ravages of Apocalypse, некоторых других видеоигр.

Выделяют три популярных движка:

Unity. Инди-разработчики и крупные студии создали тысячи игр с помощью данного движка. Вы получаете визуальную среду разработки, модульную систему элементов, кроссплатформенность.
Unreal Engine. Движок от Epic Games поддерживает разработку на C++, предоставляется бесплатно. Если за квартал продукт принесет более 3000$ прибыли, издатель обязан выплатить роялти – 5% дохода. Инди-разработчики часто используют данный движок, особенно при создании тестовых версий.
Frostbite Engine. Для разработки под iOS/Android компания EA Digital Illusions CE создала версию Go. Движок имеет большой выбор функций, инструментов, его главная фишка – разрушаемость объектов и окружающего ландшафта.

Выбор движка зависит от ваших знаний программирования. Уточните, на каком языке пишут в Unreal Engine и других вариантах ПО. Например, UE поддерживает разработку на C++, а Unity – C#, писать на других языках не получится.

Наиболее популярные языки для создания игр в GameDev

Написание функционального, эффективного игрового кода требует знания нескольких языков. Начинать однозначно стоит с HTML, CSS, JavaScript – осваивайте теорию, пробуйте создавать полноценные проекты. Осуществлять разработку серверной части помогают знания баз данных, объектно-ориентированного программирования.

Каждое направление разработки имеет свои ЯП:

backend (разработка функциональной части ПО) – Java, PHP, Python, C#;
frontend (интерфейс, прочие видимые части игры) – CSS, HTML, JavaScript, дополнительно изучают фреймворки React, Angular, Vue.

Программисты-универсалы ценятся, но востребованы и просто frontend-разработчики. Языки имеют различия по платформе: на Android следует учить Java, Kotlin, для iOS достаточно знания Swift.

В чём отличие языков для создания игр: основные факторы

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

возможность синхронизации – редкий проект пишется на одном языке. Часто разработчик использует разные ЯП, например, использует для обработки информации C, создает логику на Java, frontend прорабатывает на JavaScript;
оптимизация – некоторые языки самостоятельно собирают мусор в коде, другие требуют участия программиста для успешного результата;
платформа – для Apple – Objective-C (в прошлом) и Swift (в настоящем), для Android – Java, Cotlin, Python и некоторые другие. При наличии планов работать лишь с одной платформой, не стоит распыляться на неподходящие языки.

Читать:

Сколько стоит honor 30 i

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

Какой язык выбрать для разработки игры высокого качества

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

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

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

Зачастую мобильные проекты собираются из C# и JavaScript, идеально работающих вместе. Спарка позволяет проектировать разнообразные жанры: головоломки, платформеры, аркады, полноценные RPG, шутеры. Выбор C# объясняют преимущества:

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

С C# программист может создавать игры, облачные сервисы, веб-дополнения, многое другое. Среди наиболее известных мобильных тайтлов, написанных на данном языке, присутствуют Pokemon GO, Temple Run, Beholder. Особенно популярен язык у инди-разработчиков, ведь часто изучается в учебных заведениях и делает разработку бесплатной.

Где учиться программированию в геймдеве

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

Курсы. Онлайн-сервисы и IT-школы постоянно объявляют набор в образовательные группы, которые обучают отдельным отраслям программирования. Обычно курсы ориентированы на практическую отработку полученной теории и предполагают, что ученики выпустят первый игровой продукт (хотя бы рабочий прототип) для мобильной платформы к концу обучения. В среднем курс занимает 4–6 месяцев, за которые человек получает нужные знания и навыки.
Университеты. Высшие учебные заведения не обучают конкретно программированию для геймдева. Многие технические специальности уделяют время изучению данного предмета. Обычно специальность называется «Информационные системы и технологии», но также встречаются названия, связанные с прикладной информатикой и другими специфическими терминами.

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

Каждый язык программирования индивидуален, делайте выбор на основе поставленных целей и задач. Рекомендуем начать с базового языка (Java или C++), позволяющего в дальнейшем перейти к другим ЯП с четким пониманием структуры и принципов написания программного обеспечения.

Пишем HTML5-игру за 20 минут, или введение в Phaser framework

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

Введение

Phaser — это движок для разработки мобильных и десктопных HTML5 игр, базирующийся на библиотеке PIXI.js. Поддерживает рендеринг в Canvas и WebGL, анимированные спрайты, частицы, аудио, разные способы ввода и физику объектов. Исходники доступны как для просмотра, так и для свободной модификации. Он создан Ричардом Дейви (Richard Davey), известному благодаря активному участию в сообществе программистов, использующих Flixel framework. Ричард не скрывает, что вдохновлялся Фликселем, поэтому некоторые вещи в Фазере будут знакомы опытным флешерам. Первая версия нового движка вышла 13 сентября этого года, сейчас ведется не только активное развитие библиотеки, но и написание документации, поэтому в данный момент уроков по ней, мягко говоря, немного. Что, по моему скромному мнению, следует исправлять, и прямо сейчас.

Установка библиотеки и локального веб-сервера

Итак, начнем. Для запуска и тестирования приложений нам необходимо установить локальный веб-сервер. Все примеры из комплекта библиотеки используют PHP, поэтому и сервер нужен соответствующий. Я использовал MAMP для MacOS, для Windows подойдет отечественный Denwer или любой другой аналог.

После установки веб-сервера необходимо скачать последнюю версию Фазера c GitHub: https://github.com/photonstorm/phaser. В данный момент (13 октября 2013 года) рекомендую качать dev ветку, так как эта версия содержит в себе ряд очень полезных изменений по сравнению с основной, в том числе и больший объем документации. Для тех, кто не использует GitHub, доступна прямая ссылка на архив: https://github.com/photonstorm/phaser/archive/dev.zip.

Чтобы убедиться, что все настроено правильно, можно запустить небольшое приложение-пример Hello Phaser. Создайте папку hellophaser в директории вашего веб-сервера, предназначенной для сайтов, и скопируйте туда три файла из папки Docs/Hello Phaser:

Запустите свой любимый браузер и откройте URL со скопированными файлами (в моем случае http://localhost:8888/hellophaser/). Если все хорошо, вы увидите вращающийся симпатичный логотип, такой как на скриншоте ниже:

Разработка игры

Подготовка необходимых файлов

Теперь можно приступать к разработке нашей первой игры. Создайте для нее папку phaser-pong на вашем веб-сервере и скопируйте туда файл phaser.js из папки build с исходниками фреймворка. Также создайте в ней папку assets, где мы будем хранить все ресурсы, относящиеся к игре, и файл index.html (собственно, здесь и будет наша игра).

Скопируйте в папку assets изображения шарика, ракетки и фона. Можно взять следующие файлы (в качестве фона я взял звездное небо из примеров Фазера), а можно нарисовать что-то свое. Главное — это убедиться, что вы загружаете в игру нужные картинки с корректными именами и подходящими размерами. Также не стоит выбирать слишком большие изображения, с их отрисовкой могут возникнуть проблемы. Поэтому перед использованием фотографии своего кота уменьшите ее до, скажем, 480х640 (разрешение нашей игры), и все будет хорошо.

В результате содержимое папки phaser-pong будет таким:

А в папке assets будет три картинки:

Создание главного объекта игры, загрузка ресурсов

Наконец-то все подготовительные этапы выполнены, и начинается собственно разработка. Откройте index.html и вставьте туда следующий код:

  var game = new Phaser.Game(480, 640, Phaser.AUTO, '', < preload: preload, create: create, update: update >); function preload() < game.load.image('bet', 'assets/bet.png'); game.load.image('ball', 'assets/ball.png'); game.load.image('background', 'assets/starfield.jpg'); >function create() < game.add.tileSprite(0, 0, 480, 640, 'background'); >function update ()

Откройте в браузере адрес новой игры (у меня это http://localhost:8888/phaser-pong/) и вы увидите ее окно с нарисованным фоном

Что же происходит в написанном коде? Вначале мы импортируем библиотеку. Потом создаем объект типа Game , задавая разрешение нашего приложения, в данном случае ширину 480 и высоту 640 пикселей. Phaser.AUTO означает, что тип рендера будет выбираться автоматически. При желании можно задать Canvas или WebGL. Четвертый параметр задает родительский DOM-объект для игры, его мы не указываем.
В пятом параметре перечислены основные функции игры. preload() содержит код для загрузки ресурсов, create() — инициализацию игры, а update() — команды, выполняемые при обновлении приложения. На настольном компьютере update() вызывается примерно 60 раз в секунду. Именно эта функция будет содержать в себе основную игровую логику.

В функции create() мы добавляем статический спрайт с фоном нашей игры. Спрайт заполняет пространство, указанное в первых четырех параметрах tileSprite .

Игровые объекты

Сейчас перейдем к самому интересному — наполним нашу игру логикой. После объявления переменной game и перед функцией preload() объявим объекты с ракетками игрока и компьютера, мячиком, а также укажем скорости их движения:

 var playerBet; var computerBet; var ball; var computerBetSpeed = 190; var ballSpeed = 300;

Для создания ракеток напишем функцию createBet(x, y) :

function createBet(x, y)

Метод создает спрайт с указанными координатами и добавляет его в игру. Поле anchor отвечает за точку отсчета координат спрайта, устанавливаем его по центру изображения ракетки. body содержит в себе элементы для работы с физикой. Здесь мы ограничиваем движение ракетки пределами игрового пространства, задаем силу «отскока» и указываем, что при столкновении с объектами ракетка не будет отлетать в сторону.

Добавим два вызова этой функции в create(), сразу после создания фона. Ракетки будут добавлены в игру после фонового изображения, поэтому мы будем их видеть на экране:

 playerBet = createBet(game.world.centerX, 600); computerBet = createBet(game.world.centerX, 20);

Аналогичным образом создадим шарик, дописав следующий код сразу после вызовов функции createBet() в create() :

 ball = game.add.sprite(game.world.centerX, game.world.centerY, 'ball'); ball.anchor.setTo(0.5, 0.5); ball.body.collideWorldBounds = true; ball.body.bounce.setTo(1, 1);

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

Логика

Картинка получилась симпатичной, но думаю, стоит ее слегка оживить.
Добавляем переменную, отвечающую за состояние шарика и функцию, которая будет его запускать:

 var ballReleased = false; function releaseBall() < if (!ballReleased) < ball.body.velocity.x = ballSpeed; ball.body.velocity.y = -ballSpeed; ballReleased = true; >>

Функция проверяет, что шарик еще не запущен, и в таком случае задает ему скорость с помощью поля velocity.
Вызов функции повесим на нажатие кнопки мышки, написав следующую строку в create():

 game.input.onDown.add(releaseBall, this);

Теперь клик мышкой запускает шарик, и он отскакивает от границ игры. Добавим движения и ракеткам, отредактировав функцию update() :

function update () < //Управляем ракеткой игрока playerBet.x = game.input.x; var playerBetHalfWidth = playerBet.width / 2; if (playerBet.x < playerBetHalfWidth) < playerBet.x = playerBetHalfWidth; >else if (playerBet.x > game.width - playerBetHalfWidth) < playerBet.x = game.width - playerBetHalfWidth; >//Управляем ракеткой компьютерного соперника if(computerBet.x - ball.x < -15) < computerBet.body.velocity.x = computerBetSpeed; >else if(computerBet.x - ball.x > 15) < computerBet.body.velocity.x = -computerBetSpeed; >else < computerBet.body.velocity.x = 0; >>

Ракетка игрока следует за указателем мыши, ракетка компьютера — за шариком. Для ракетки игрока мы также добавили ограничение на максимальное и минимальное значение координаты x , чтобы она не пыталась выскочить за пределы игрового поля.

Вся суть игры заключается в отбивании шарика ракетками, поэтому нужно организовать проверку столкновений шарика с ракетками. К счастью, в Фазере уже есть соответствующий функционал, поэтому нам достаточно его использовать.
Допишем следующие три строки в конец update() :

 //Проверяем и обрабатываем столкновения мячика и ракеток game.physics.collide(ball, playerBet, ballHitsBet, null, this); game.physics.collide(ball, computerBet, ballHitsBet, null, this);

Метод collide проверяет столкновение двух объектов (первые два параметра) и вызывает указанную в третьем функцию для выполнения каких-либо действий над столкнувшимися спрайтами. Эта функция выглядит так:

 function ballHitsBet (_ball, _bet) < var diff = 0; if (_ball.x < _bet.x) < // Шарик находится с левой стороны ракетки diff = _bet.x - _ball.x; _ball.body.velocity.x = (-10 * diff); >else if (_ball.x > _bet.x) < // Шарик находится с правой стороны ракетки diff = _ball.x -_bet.x; _ball.body.velocity.x = (10 * diff); >else < // Шарик попал в центр ракетки, добавляем немножко трагической случайности его движению _ball.body.velocity.x = 2 + Math.random() * 8; >>

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

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

 function checkGoal() < if (ball.y < 15) < setBall(); >else if (ball.y > 625) < setBall(); >> function setBall() < if (ballReleased) < ball.x = game.world.centerX; ball.y = game.world.centerY; ball.body.velocity.x = 0; ball.body.velocity.y = 0; ballReleased = false; >>

checkGoal() вызывается постоянно, поэтому копируем ее в конец update() :

 //Проверяем, не забил ли кто-то гол checkGoal();

Все! Открываем браузер, наслаждаемся фантастическим и современным геймплеем нашей игры, радуемся жизни и свежеприобретенным навыками программирования.

Заключение

Естественно, игре не хватает еще многого, как минимум подсчета очков и определения победителей. Но мне кажется, что для введения в разработку с Phaser достаточно показанных вещей. Движок поддерживает много других классных функций, которые я собираюсь показать на примере новой игры, чуть более сложной и непосредственно относящейся к Хабру, чтобы было интереснее.
Стей тьюнед.

В ходе разработки я активно использовал код из примера breakout.php. Кроме этого примера, в папке с Фазером есть и другие игры, поэтому тем, кому не терпится использовать новый фреймворк, рекомендую в первую очередь посмотреть на содержимое папки examples.

Update: по совету товарища hell0w0rd закинул пример на гитхаб и создал страничку, чтобы можно было опробовать игру:
https://github.com/nononononono/phaser-pong
http://nononononono.github.io/phaser-pong/

Update от 20.10.2013: fessnecro добавил частицы при столкновении шарика с ракетками и новые уровни, за что ему спасибо. Эти изменения находятся в основном бренче. Оригинальная версия, описанная в статье, находится в ветке gh-pages.

И, на всякий случай, полный исходный код index.html: