Учебное пособие MDN «2D-игра с прорывом с помощью Phaser» показывает вам базовый способ создания игры с помощью Phaser 2. Недавно я сделал это руководство, чтобы помочь другим пройти через него.
Однако в этом руководстве не показано, как использовать самую последнюю версию Phaser или как использовать хорошие концепции дизайна, которые помогут вам создать собственную игру с использованием лучших практик JavaScript.
Поэтому я приступил к адаптации учебника по MDN в соответствии с форматом, изложенным в учебнике по фазеру Ourcade Современный JavaScript. В руководстве используется шаблон Phaser3-parcel-template, который помогает при запуске сложного проекта Phaser.
Вот ссылка на готовый код, и еще одна ссылка на ассеты, используемые в проекте.
Последний шаг туториала касался создания кирпичного поля, столкновений и звука.
В этой статье мы рассмотрим шаги с 11 по 13 руководства по MDN: «11. Оценка», «12. Выиграйте игру» и «13. Дополнительные жизни».
Создание партитуры
Для начала мы отойдем от учебника MDN и будем следовать методу, описанному в учебнике Modern JS Phaser, создав класс ScoreLabel. Мы начнем с создания ScoreLabel.js в каталоге «src/ui».
Файл ScoreLabel будет содержать все методы для отслеживания и представления счета. Сцена будет ссылаться на созданную версию ScoreLabel, когда происходят какие-либо события, изменяющие счет — в данном случае мяч ударяется о кирпич.
Метод formatScore в строке 3 преобразует оценку в форматированный отображаемый текст для простоты использования.
Метод add в строке 16 будет вызываться сценой, когда происходит событие, требующее добавления очков к счету.
Затем мы импортируем счет и создаем его в игре, используя процесс, аналогичный тому, как мы создавали предыдущие игровые объекты:
- импортировать ярлык
- сделать свойство объекта Scene в его методе конструктора, в котором будет храниться метка
- сделать метод createLabel в сцене
- вызовите метод createLabel в методе create сцены и присвойте возвращаемое значение свойству, созданному в шаге 2.
Обратите внимание, что мы также вызываем метод add для scoreLabel в строке 25 в методе ballHitBrick сцены.
Метод createScoreLabel создает экземпляр объекта класса ScoreLabel (все в JavaScript является объектом), добавляет его в систему Phaser и возвращает объект метки.
Мы прикрепляем ссылку на метку к свойству объекта Scene, чтобы мы могли ссылаться на нее для вызова методов. То же самое можно сделать для вызова событий спавнера, диалоговых подсказок или любого количества игровых функций.
Выиграть игру
В руководстве MDN окончание игры просто приводит к сообщению о том, что вы выиграли, и предложению сыграть снова.
Мы добавим к этому переменную, которая отслеживает, сколько раз игрок очищал кирпичи. Каждый раз, когда они убирают кирпичи, мяч будет ускоряться, и каждый кирпич будет приносить больше очков.
Мы посетим эту функциональность через минуту, но пока мы будем использовать простой метод из учебника, пока не закончим создавать жизни.
Метод определения того, жив ли кто-либо из членов группы блоков, проще, чем код Phaser 2 из руководства по MDN. Это завершает этот шаг.
Дополнительные жизни
Мы реализуем создание дополнительных жизней, сделав LivesLabel похожим на ScoreLabel. У нас будет константа начальных жизней, которую мы можем передать в LivesLabel при ее создании для создания начальных жизней.
Мы создадим LivesLabel.js в том же каталоге src/ui, что и ScoreLabel.
У жизней будет только одна функция для изменения жизней — метод removeLife. Он удаляет одну жизнь из жизней, хранящихся как свойство объекта LivesLabel.
Если жизни упадут ниже 1, этот метод вернет false. Это означает, что мы можем использовать возвращаемое значение removeLife в качестве проверки условия окончания игры.
Прежде чем мы добавим отображение жизней на экран, давайте создадим файл, содержащий несколько игровых констант, подобно нашему предыдущему файлу физических констант.
Теперь, когда у нас есть игровые константы, давайте вернемся назад и воспользуемся нашей константой basePoints в методе столкновения ballHitBrick. Это позволит нам настроить, сколько очков игрок зарабатывает из логического местоположения.
Далее мы создадим экземпляр LivesLabel в GameScene и добавим код вDetectBounds, чтобы удалить жизнь, если мяч коснется нижней части экрана.
Мы будем следовать шагам, которые мы использовали для добавления ScoreLabel в игру:
- импортировать ярлык
- сделать свойство объекта Scene в его методе конструктора, в котором будет храниться метка
- сделать метод createLabel в сцене
- вызовите метод createLabel в методе create сцены и присвойте возвращаемое значение свойству, созданному в шаге 2.
Далее следует код для изготовления этикетки.
Имея возможность иметь несколько жизней, мы должны иметь возможность сбросить положение мяча и весла. Итак, у нас есть эти функции в методе resetBallPaddlePosition.
Константа deathDelay определяет время ожидания между моментом, когда мяч коснется нижней части экрана, и моментом, когда мы снова запустим мяч.
Код для создания этой задержки находится в строке 31. Обратите внимание на необходимость передачи значения this объекта Scene в метод delayedCall.
Итак, теперь мы создали партитуру и жизни. Игра становится интереснее.
Следующий
В следующей статье этой серии руководств мы добавим возможность увеличивать сложность при прохождении уровня и пройдем этап анимации и анимации в руководстве по MDN.
