1 | |||||||||||||||||||||||||||||||
Ваша первая игра на JavaScript и Phaser (перевод)28.09.2016, 17:42. Показов 2712. Ответов 2
Метки нет (Все метки)
Ваша первая игра на JavaScript и Phaser (перевод)
Источник Запустить демку в браузере Скачать исходники финального проекта Все любят классические игры. Многие же из вас помнят ретро игру "змейка" на старых Nokia? Мы уверены, что многие. Поэтому мы решили сделать "змейку", используя HTML5. Есть такой великолепный фреймворк с открытым исходным кодом для разработки игры под названием Phaser. Его мы и будем использовать. Приготовления Скачайте .zip архив с рисунками и с пустыми файлами кода здесь. Код мы напишем позже. Папки и файлы отражают структуру нашего проекта. Откройте index.html, напишите название игры в теле тега "title" и подключите скрипты из папки "assets/js/". Позже, чтобы играть вам нужно будет всего лишь открыть index.html в браузере.
Как организована игра Игры, которые используют 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. Если всё было сделано правильно, то стартовое изображение должно появится в вашем браузере: запустить демку 2. Вывод змейки на экран Как было упомянуто ранее, сам процесс игры происходит в состоянии "Игра". В этом же состоянии мы выводим змейку на экран. Так же как мы поступали с состоянием "Меню" ранее, мы должны зарегистрировать состояние "Игра" в скрипте main.js: main.js
Это окончательный код скрипта menu.js:
game.js
1
|
28.09.2016, 17:42 | |
Ответы с готовыми решениями:
2
Ваша первая игра на JavaScript и Phaser (тема-обсуждение) Первая ли книга как первая для JavaScript? Ваша первая программа Какая ваша любимая компьютерная игра? |
28.09.2016, 17:43 [ТС] | 2 | |||||||||||||||
Движение и контроль
Для того, чтобы змейка двигалась нам нужно написать код в функции update скрипта game.js Мы создадим функции-обработчики нажатий клавиш-стрелок. Реализация движения немного сложновато для понимания на первый взгляд. Функция update срабатывает с очень высокой частотой (около 60 кадров в секунду (60 fps)) и если мы будем перемещать змейку в каждом вызове функции update, то скорость змейки будет огромная. Для того, чтобы решить эту проблему мы напишем условие, которое будет определять, какой это вызов update по счёту. Например, мы может вызывать код передвижения только каждый 10-й вызов функции update. Для того чтобы узнать, какой это вызов по счёту, мы будем использовать переменную-счётчик updateDelay. Если это 10-й вызов функции update, то мы удаляем последний квадрат нашей змейки (первый элемент в списке), даём ему новые координаты, согласно текущему направлению и помещаем его перед головой змейки (наверх списка). Так выглядит код:
4. Определение столкновений Игра, в которой змейка может свободно передвигаться по игровому полю, не встречая припятствий, - не цепляет и не приносит радость. Нам нужно определять, когда змейка приходит в контакт с стеной, яблоком или сама с собой. Это называется определение столкновений (коллизий). Это обычно уже сделано с помощью физического движка. Phaser поддерживает несколько физических движков. Но они сложные для такой игры, как эта. Вместо этого мы сделаем своё собственное определение столкновений с помощью сравнений координат. В функции update, после кода, который перемещает змейку, мы вызовем несколько методов. Эти методы будут сравнивать координаты, чтобы определить было столкновение или нет.
Добавим код самого состояния в скрипт game_over.js:
Запустить демку Для дальнейшего изучения:
2
|
tezaurismosis
|
||||||
28.09.2016, 18:13
Ваша первая игра на JavaScript и Phaser (перевод)
#3
|
||||||
0
|
28.09.2016, 18:13 | |
Первая игра Первая игра на C++ Первая игра на Delphi Первая игра. Pacman Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |