Жизни
Это 12 из 16 уроков руководства разработки игры с помощью Phaser. Исходный код этого урока вы можете найти здесь: Gamedev-Phaser-Content-Kit/demos/lesson13.html.
Мы можем растянуть удовольствие от игры, добавив жизни. Это позволит игроку сделать несколько попыток, а не одну.
Новый переменные
Добавьте следующие переменные сразу после всех наших текущих определений переменных:
var lives = 3;
var livesText;
var lifeLostText;
Эти переменные хранят, соответственно, количество жизней, надпись с количеством оставшихся жизней, и надпись, которая выведется на экран, если игрок потеряет жизнь.
Определяем новые надписи
Надписи мы уже определяли, когда реализовывали систему очков. Добавьте следующие строки кода в после определения надписи scoreText
в функции create()
:
livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' });
livesText.anchor.set(1,0);
lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', { font: '18px Arial', fill: '#0095DD' });
lifeLostText.anchor.set(0.5);
lifeLostText.visible = false;
Объекты livesText
и lifeLostText
очень похожи на scoreText
— они определяют положение на экране, текст надписи и стилизацию шрифта. Чтобы всё выглядело должным образом, надпись с жизнями мы закрепляем в правом верхнем углу, а надпись о потере жизни, мы выводим в центре экрана. И всё это при помощи функции anchor.set()
.
Надпись lifeLostText
появится только при потере жизни, поэтому её видимость мы выставляем в false
.
Чистим код, стилизирующий надписи
Как вы могли заметить, мы используем одинаковые стили для всех надписей: scoreText
, livesText
и lifeLostText
. Однако, налицо копирование кода и если мы, когда-либо, захотим изменить размер шрифта или цвет, то нам придётся делать это в нескольких местах. Чтобы избежать этого, мы вынесем стиль в отдельную переменную. Напишите следующую строку сразу после всех наших текущих определений переменных:
var textStyle = { font: '18px Arial', fill: '#0095DD' };
Теперь мы можем использовать эту переменную для нашего текста — обновите ваш код и замените повторяющиеся участки со стилем текста на переменную.
scoreText = game.add.text(5, 5, 'Points: 0', textStyle);
livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, textStyle);
livesText.anchor.set(1,0);
lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', textStyle);
lifeLostText.anchor.set(0.5);
lifeLostText.visible = false;
Теперь, чтобы изменить стиль всего текста в игре, достаточно изменить только эту переменную.
Код обработки жизни
Чтобы реализовать жизнь в нашей игре, давайте сначала изменим функцию шара, связанную с событием onOutOfBounds
. Вместо того, чтобы выполнять анонимную функцию и сразу показывать сообщение:
ball.events.onOutOfBounds.add(function(){
alert('Game over!');
location.reload();
}, this);
Мы объявим новую функцию ballLeaveScreen
; Удалим предыдущий обработчик (зачёркнутый код сверху) и заменим его следующей линией:
ball.events.onOutOfBounds.add(ballLeaveScreen, this);
Мы будем уменьшать количество жизней каждый раз, когда шар выйдет за пределы окна Canvas. Добавьте функцию ballLeaveScreen()
в конец кода:
function ballLeaveScreen() {
lives--;
if(lives) {
livesText.setText('Lives: '+lives);
lifeLostText.visible = true;
ball.reset(game.world.width*0.5, game.world.height-25);
paddle.reset(game.world.width*0.5, game.world.height-5);
game.input.onDown.addOnce(function(){
lifeLostText.visible = false;
ball.body.velocity.set(150, -150);
}, this);
}
else {
alert('You lost, game over!');
location.reload();
}
}
Вместо того, чтобы сразу вызывать сообщение, когда мяч выходит за пределы Canvas, мы сначала вычитаем одну жизнь из текущего числа и проверяем, не равно ли оно нулю. Если не равно, то у игрока все ещё осталось несколько жизней, и он может продолжать играть - он увидит сообщение о потере жизни, позиции мяча и платформы будут сброшены и при следующем клике мышью сообщение будет скрыто и мяч снова начнёт двигаться.
Когда количество жизней достигнет нуля игра заканчивается, а игроку показывается соответствующее сообщение.
События
Скорее всего вы заметили вызов методов add()
и addOnce()
в двух блоках кода выше и хотите знать, чем они отличаются. Разница в том, что метод add()
и привязанная к нему функция выполняется каждый раз, когда выполняется событие, тогда как метод addOnce()
полезен, когда вы хотите, чтобы связанная с ним функция выполнилась единожды и не повторялась снова. В нашем случае при каждом событии outOfBounds
будет выполняться ballLeaveScreen
, но когда мяч покидает экран, сообщение с экрана удалится единожды.
Проверь свой код
Вы можете проверить готовый код этого урока в его демо-версии и поиграть с ним чтобы лучше понять, как он работает:
Следующий шаг
Жизни делают игру более казуальной — даже если вы проиграете единожды, у вас будут ещё 2 жизни и вы сможете продолжить игру. Теперь мы можем поработать над внешним видом игры, сделать её более красивой, добавив анимацию и эффекты (en-US).