|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
30.09.2016, 17:38 | #1 |
Старожил
Регистрация: 02.01.2011
Сообщений: 3,327
|
Ваша первая игра на JavaScript и Phaser (перевод)
Ваша первая игра на JavaScript и Phaser (перевод)
Источник Запустить демку в браузере Скачать исходники финального проекта Все любят классические игры. Многие же из вас помнят ретро игру "змейка" на старых Nokia? Мы уверены, что многие. Поэтому мы решили сделать "змейку", используя HTML5. Есть такой великолепный фреймворк с открытым исходным кодом для разработки игры под названием Phaser. Его мы и будем использовать. Приготовления Скачайте .zip архив с рисунками и с пустыми файлами кода здесь. Код мы напишем позже. Папки и файлы отражают структуру нашего проекта. Откройте index.html, напишите название игры в теле тега "title" и подключите скрипты из папки "assets/js/". Позже, чтобы играть вам нужно будет всего лишь открыть index.html в браузере. index.html Код:
|
30.09.2016, 17:42 | #2 |
Старожил
Регистрация: 02.01.2011
Сообщений: 3,327
|
Как организована игра
Игры, которые используют Phaser организованы вокруг состояний. Представляйте состояния, как разные части вашей игры. Это состояния нашей игры:
main.js - это наш самый главный скрипт. В этом скрипте мы сейчас создадим объект game и добавим наше первое состояние "Меню" 1. Загрузка изображения К настоящему моменту наша игра не делает ничего. Давайте добавим состояние "Меню" и сделаем так, чтобы оно отображало изображение с заголовком игры. В разделе "Установка" мы подключили скрипт phaser.js в нашем файле index.html, поэтому нам доступен глобальный объект Phaser, с помощью которого мы можем получать доступ к функциям и методам библиотеки phaser.js Сейчас мы, используя глобальный объект Phaser, создадим объект game. Этот объект представляет всю нашу игру. Мы будем добавлять состояния к этому объекту. main.js Код:
menu.js Код:
От переводчика: Начало координат игры располагается в левом верхнем углу области рисования. Ось X направлена вправо, а ось Y направлена вниз. По умолчанию якорная точка изображения располагается в левом верхнем углу изображения. Эту точку можно менять с помощью метода anchor.setTo. Например, можно установить якорную точку на середину изображения: this.obj.anchor.setTo(0.5, 0.5); Изображения, которые располагаются в игровом мире называют спрайтами. Из-за ограничения безопасности браузера мы не можем загружать изображения с локального диска. Простыми словами, мы не можем просто кликнуть два раза по index.html и запустить игру. Поэтому запускать игру нужно с локального сервера, например, из среды Visual Studio, которая автоматически запустит локальный сервер IIS. Если всё было сделано правильно, то стартовое изображение должно появится в вашем браузере: запустить демку |
30.09.2016, 17:44 | #3 |
Старожил
Регистрация: 02.01.2011
Сообщений: 3,327
|
2. Вывод змейки на экран
Как было упомянуто ранее, сам процесс игры происходит в состоянии "Игра". В этом же состоянии мы выводим змейку на экран. Так же как мы поступали с состоянием "Меню" ранее, мы должны зарегистрировать состояние "Игра" в скрипте main.js: main.js Код:
Это окончательный код скрипта menu.js: Код:
game.js Код:
|
30.09.2016, 17:46 | #4 |
Старожил
Регистрация: 02.01.2011
Сообщений: 3,327
|
3. Движение и контроль
Для того, чтобы змейка двигалась нам нужно написать код в функции update скрипта game.js Мы создадим функции-обработчики нажатий клавиш-стрелок. Реализация движения немного сложновато для понимания на первый взгляд. Функция update срабатывает с очень высокой частотой (около 60 кадров в секунду (60 fps)) и если мы будем перемещать змейку в каждом вызове функции update, то скорость змейки будет огромная. Для того, чтобы решить эту проблему мы напишем условие, которое будет определять, какой это вызов update по счёту. Например, мы может вызывать код передвижения только каждый 10-й вызов функции update. Для того чтобы узнать, какой это вызов по счёту, мы будем использовать переменную-счётчик updateDelay. Если это 10-й вызов функции update, то мы удаляем последний квадрат нашей змейки (первый элемент в списке), даём ему новые координаты, согласно текущему направлению и помещаем его перед головой змейки (наверх списка). Так выглядит код: Код:
|
30.09.2016, 17:47 | #5 |
Старожил
Регистрация: 02.01.2011
Сообщений: 3,327
|
4. Определение столкновений
Игра, в которой змейка может свободно передвигаться по игровому полю, не встречая припятствий, - не цепляет и не приносит радость. Нам нужно определять, когда змейка приходит в контакт с стеной, яблоком или сама с собой. Это называется определение столкновений (коллизий). Это обычно уже сделано с помощью физического движка. Phaser поддерживает несколько физических движков. Но они сложные для такой игры, как эта. Вместо этого мы сделаем своё собственное определение столкновений с помощью сравнений координат. В функции update, после кода, который перемещает змейку, мы вызовем несколько методов. Эти методы будут сравнивать координаты, чтобы определить было столкновение или нет. Код:
Добавим код самого состояния в скрипт game_over.js: Код:
Запустить демку Для дальнейшего изучения: |
01.12.2016, 09:54 | #6 |
Старожил
Регистрация: 02.01.2011
Сообщений: 3,327
|
Ошибка. В конце тутора, после фразы "Добавим эту строчку кода в самый низ скрипта main.js:", нужно добавить:
Код:
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Моя первая в жизни игра=)) | Dmitry96 | Gamedev - cоздание игр: Unity, OpenGL, DirectX | 17 | 18.11.2014 16:05 |
Ваша первая программа | MooNDeaR | Свободное общение | 18 | 16.08.2011 14:36 |
Моя первая игра На C++ | ThisIzGame | Gamedev - cоздание игр: Unity, OpenGL, DirectX | 4 | 31.08.2009 19:40 |
Моя первая игра на Pascal | Gapro | Gamedev - cоздание игр: Unity, OpenGL, DirectX | 18 | 20.08.2009 17:58 |
Моя первая и последняя игра. | BangBangFM | Gamedev - cоздание игр: Unity, OpenGL, DirectX | 13 | 05.12.2008 22:12 |