Introduction to HTML5 games
An intermediate tutorial for creating games using HTML5 and Canvas.
Introduction
This tutorial shows you how to build a game using HTML5 and the <canvas> element, and assumes you have an intermediate level of knowledge of JavaScript.
Space Demo main screen
Creating the canvas
To draw objects on the page, we’ll need to first create a canvas. Because this is a No Tears guide, we’ll use jQuery.
Game loop
To simulate the appearance of smooth and continuous gameplay, let’s update the game and redraw the screen slightly faster than the human mind and eye can perceive.
For now we can leave the update() and draw() methods blank, since setInterval() , calls them periodically.
Hello world
Now, let’s update the draw() method to draw text on the screen.
Pro Tip: Be sure to run your app after making changes. It’s much easier to debug a few lines of code than a completed app. What you see now is pretty cool for stationary text. Since we have a game loop already set up, though, let’s enhance this text by adding movement.
Try running the app now. You should see the text move, but you may be seeing some odd results. Because we are not clearing the screen, the previous drawings are being left behind.
Let’s add code to the draw() method to clear the screen.
Now that you’ve created a canvas and added text that moves around on the screen, let’s turn this into a game with players and interaction between the players.
Creating the player
Create an object to hold the player data and be responsible for things like drawing.
At the moment, we’re using a simple colored rectangle to represent the player. When we draw the game, we’ll clear the canvas and draw the player.
Keyboard controls
Using jQuery Hotkeys
The jQuery Hotkeys plugin makes key handling across browsers very easy. Instead of using difficult-to-use cross-browser keyCode and charCode , we can bind events like so:
By binding events, we don’t have to worry specifically about key and code combinations. Instead, we can use jQuery Hotkeys to add events like “when the player presses the Up arrow key, move forward.”
Player movement
Because the way JavaScript handles keyboard events is completely event-driven, there is no built-in query for checking whether a key is pressed. To address this, we’ll create our own query.
Pro Tip: We don’t use an event-driven way of handling keys because the keyboard repeat rate varies across systems. Since these rates are not bound to the timing of the game loop, gameplay could vary greatly from system to system. To create a consistent experience, it is important to tightly integrate the keyboard event detection with the game loop.
With the source code, I’ve included a 16-line JavaScript wrapper called key_status.js that will make event querying available. With this wrapper, you can query the status of a key at any time. For example, you can check keydown.left .
Now that we have the ability to query the status of keys, we can use this simple update() method to move the player on the canvas.
When you test this snippet, you may notice that you can move player off the screen. Let’s keep the player’s position within the bounds. We can also increase the speed of the player’s movement on the screen.
Let’s start working with sample projectiles to see how the key binding works.
Adding more game objects
Projectiles
Now, let’s add proper projectiles (or bullets, since this is, after all, a game). First, create a collection to store them:
Next, create a constructor to create bullet instances.
When the player shoots, create a bullet instance and add it to the collection of bullets.
Finally, we need to add the status of the bullets to the update step function. To prevent the collection of bullets from filling up indefinitely, we filter the list of bullets to only include the active bullets. Filtering this list also allows us to remove bullets that have collided with an enemy.
The final step is to draw the bullets:
Enemies
Now that we have bullets, let’s add enemies to interact with our player.
Loading and drawing images
Now that we have the enemy-player interaction set with box images, let’s draw actual images to make this game more interesting. To avoid what is usually a painful experience with loading and drawing images on canvas, we can use a simple utility class.
Collision detection
Now that we have images flying around on the screen, notice that they’re not interacting with each other. Let’s add collision detection to let the objects know when they’ve collided, and therefore when to blow up.
Let’s use a simple rectangular collision detection algorithm:
We want to check specifically collisions between:
- Player Bullets => Enemy Ships
- Player => Enemy Ships
To check these specific collisions, create a method to handle the collisions which we can call from the update() method.
Finally, to make the interaction realistic, we’ll add the explode() methods to the player and the enemies to remove those that have been hit, and to display an explosion graphic.
Sound
To round out the experience, we’ll add some sweet sound effects. Sounds, like images, can be somewhat of a pain to use in HTML5, but thanks to our magic no-tears formula sound.js, sound can be made very easily.
Although the API is now tear-free, adding sounds is currently the quickest way to crash your application. It’s not uncommon for sounds to cut out or take down the entire browser tab.
You can also play with the full working game demo online.
Source Code
The source code is available here.
Summary
I hope you enjoyed learning the basics of making a simple game in JavaScript and HTML5. By programming at the right level of abstraction, we can insulate ourselves from the more difficult parts of the APIs, as well as be resilient in the face of future changes.
Пишем HTML5-игру за 20 минут, или введение в Phaser framework
Эта статья посвящена разработке стильных, модных и молодежных HTML5 приложений с помощью нового фреймворка Phaser. В ней описан процесс установки библиотеки и создание классической игры Pong.
Введение
Установка библиотеки и локального веб-сервера
Итак, начнем. Для запуска и тестирования приложений нам необходимо установить локальный веб-сервер. Все примеры из комплекта библиотеки используют 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 и вставьте туда следующий код:
Откройте в браузере адрес новой игры (у меня это http://localhost:8888/phaser-pong/) и вы увидите ее окно с нарисованным фоном
Что же происходит в написанном коде? Вначале мы импортируем библиотеку. Потом создаем объект типа Game , задавая разрешение нашего приложения, в данном случае ширину 480 и высоту 640 пикселей. Phaser.AUTO означает, что тип рендера будет выбираться автоматически. При желании можно задать Canvas или WebGL. Четвертый параметр задает родительский DOM-объект для игры, его мы не указываем.
В пятом параметре перечислены основные функции игры. preload() содержит код для загрузки ресурсов, create() — инициализацию игры, а update() — команды, выполняемые при обновлении приложения. На настольном компьютере update() вызывается примерно 60 раз в секунду. Именно эта функция будет содержать в себе основную игровую логику.
В функции create() мы добавляем статический спрайт с фоном нашей игры. Спрайт заполняет пространство, указанное в первых четырех параметрах tileSprite .
Игровые объекты
Сейчас перейдем к самому интересному — наполним нашу игру логикой. После объявления переменной game и перед функцией preload() объявим объекты с ракетками игрока и компьютера, мячиком, а также укажем скорости их движения:
Для создания ракеток напишем функцию createBet(x, y) :
Метод создает спрайт с указанными координатами и добавляет его в игру. Поле anchor отвечает за точку отсчета координат спрайта, устанавливаем его по центру изображения ракетки. body содержит в себе элементы для работы с физикой. Здесь мы ограничиваем движение ракетки пределами игрового пространства, задаем силу «отскока» и указываем, что при столкновении с объектами ракетка не будет отлетать в сторону.
Добавим два вызова этой функции в create(), сразу после создания фона. Ракетки будут добавлены в игру после фонового изображения, поэтому мы будем их видеть на экране:
Аналогичным образом создадим шарик, дописав следующий код сразу после вызовов функции createBet() в create() :
В результате увидим, что в нашей игре появились две ракетки и мячик, пока неподвижные:
Логика
Картинка получилась симпатичной, но думаю, стоит ее слегка оживить.
Добавляем переменную, отвечающую за состояние шарика и функцию, которая будет его запускать:
Функция проверяет, что шарик еще не запущен, и в таком случае задает ему скорость с помощью поля velocity.
Вызов функции повесим на нажатие кнопки мышки, написав следующую строку в create():
Теперь клик мышкой запускает шарик, и он отскакивает от границ игры. Добавим движения и ракеткам, отредактировав функцию update() :
Ракетка игрока следует за указателем мыши, ракетка компьютера — за шариком. Для ракетки игрока мы также добавили ограничение на максимальное и минимальное значение координаты x , чтобы она не пыталась выскочить за пределы игрового поля.
Вся суть игры заключается в отбивании шарика ракетками, поэтому нужно организовать проверку столкновений шарика с ракетками. К счастью, в Фазере уже есть соответствующий функционал, поэтому нам достаточно его использовать.
Допишем следующие три строки в конец update() :
Метод collide проверяет столкновение двух объектов (первые два параметра) и вызывает указанную в третьем функцию для выполнения каких-либо действий над столкнувшимися спрайтами. Эта функция выглядит так:
При столкновении шарик меняет направление своего движения в зависимости от того, на какую часть ракетки попадает.
Осталось только добавить проверку на пропущенный гол. Если кто-то его пропустил, ставим шарик в изначальную позицию по центру поля.
checkGoal() вызывается постоянно, поэтому копируем ее в конец update() :
Все! Открываем браузер, наслаждаемся фантастическим и современным геймплеем нашей игры, радуемся жизни и свежеприобретенным навыками программирования.
Заключение
Естественно, игре не хватает еще многого, как минимум подсчета очков и определения победителей. Но мне кажется, что для введения в разработку с 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.
Пишем игру на HTML5/JS
На выходных нашлось немного свободного времени и я решил попрактиковаться в gamedev разработке. Давно собирался написать какую-нибудь игрушку, но все руки не доходили. Бегло пробежался по сети в поисках как это делают настоящие гуру. Мне понравилась вот эта статья. За основу своей будущей игры я взял фреймворк автора статьи.
Начало
- sprite.js — библиотечка работы со спрайтами
- resources.js — подгрузка ресурсов
- input.js — библиотека ввода с клавиатуры
- app.js — основной файл игры
Далее буду рассказывать только о файле app.js . Разберем его содержимое.
Для плавности анимации будем использовать requestAnimationFrame . Подробно о нем ознакомиться можно здесь
Разделим разработку нашей игры на несколько этапов:
- Создание и инициализация холста (canvas) на странице
- Добавление основной функции-цикла игры
- Инициализация и рендер объектов и ресурсов игры
- Обработка событий ввода пользователя
- Математика и расчет столкновений объектов в игре
- Окончание и перезагрузка игры
Этап 1. Создание и инициализация холста
Первым делом что мы должны сделать — это создать canvas элемент и добавить его к тегу body основной страницы игры.
- Создаем объект canvas
- Указываем, что мы создаем 2D игру (далее будем использовать везде в коде объект ctx )
- Задаем размеры холста
- Добавляем холст к тегу body на странице
Этап 2. Добавление основной функции-цикла
Основной цикл необходим для обновления и рендера игры.
Здесь вызываем функцию requestAnimFrame (к сожалению, поддерживается не во всех браузерах), которая генерирует 60 фреймов/секунду (как это было описано выше).
Этап 3. Инициализация и рендер объектов и ресурсов игры
Используем resource.js для загрузки ресурсов в игру. Хорошим правилом является добавить все изображения в 1 спрайт, но т.к я рисовал не сам, а брал готовые картинки, поэтому я решил с этим на заморачиваться, тем более, что в данном случае это не столь критично. Так это выглядит в коде
В функции init загружаем мир и добавлеем хэндлер кнопки reset , после game over.
Начальное состояние
Обновление состояния игрового процесса
По нашей задумке пауки должны вылезать со всех 4 сторон игрового поля. Для того чтобы это происходило случайным образом, используем функцию getRandomInt.
Здесь же используем sprite.js . Всю функцию можно посмотреть в исходниках.
Этап 4. Обработка событий ввода пользователя
Наш герой должен уметь двигаться вверх, вниз, влево, вправо. Соответственно привожу ниже реализацию данного решения
При клике на пробел по задумке должны ставиться башни которые будут стрелять случайным образом во все стороны. Чтобы немного усложнить процесс игры башни разрешается ставить на некоторм расстоянии друг от друга. В данном случае это 50px .
Этап 5. Математика и расчет столкновений объектов в игре
Анимация персонажей, математика движения пуль, и логика движения NPC в игре описаны в функции updateEntities . Вот тут как раз нам и потребуются базовые знания линейной алгебры.
Логика обновления анимации спрайтов башни. И создаем патроны для каждой башни в своем массиве.
Динамика пуль башни:
Напомню, что нашей целью было чтобы башни стреляли случайным образом во всех направлениях.
Пауков мы наделили простым интелектом и поэтому они ползут всегда за нами, чтобы нас укусить.
Полный код функции updateEntities можно посмотреть в исходникак на GitHub.
Математика расчета столкновений хорошо описана в статье автора (раздел Collision Detection) используемого мной 2d бутстрапа.
Этап 6. Game Over и рестарт
Когда пауки доползают до нашего героя наступает конец света игры.
Показываем окно GAME OVER и кнопку «Начать заного». Кликаем ее и все начинается сначала 🙂
Уроки
Эта страница содержит несколько серий уроков, в которых освещаются различные рабочие процессы для эффективного создания разных типов веб-игр.
В этом пошаговом руководстве вы сможете реализовать простой клон игры Breakout с использованием чистого JavaScript. Попутно вы узнаете основы использования элемента <canvas> для реализации фундаментальной игровой механики, такой как рендеринг и движущиеся изображения, обнаружение столкновения, механизмы управления и выигрышные и проигрышные состояния.
В этом пошаговом руководстве вы будете использовать тот же самый клон Breakout, что и предыдущая серия уроков, за исключением того, что на этот раз вы сделаете это, используя HTML5 игровой фреймворкPhaser. Идея состоит в том, чтобы научить некоторым основам (и преимуществам) работы с фреймворками наряду с фундаментальной игровой механикой.
В этом учебном пособии показано, как создать 2D-игру Лабиринт с использованием HTML5, включая основы, такие как обнаружение столкновения и размещение спрайтов на <canvas> . Это мобильная игра, в которой используются API Ориентация устройства и Вибрация (en-US) для улучшения игрового процесса и построенная с использованием фреймворка Phaser.
В этой серии уроков показано, как создать простую платформенную игру с использованием Phaser, освещаются такие основы, как спрайты, столкновения, физика, коллекции и многое другое.