В процессе перевода.

Это 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' };

We can now use this variable when stlying our text labels — update your code so that the multiple instances of the text styling are replaced with the variable:

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;

This way changing the font in one variable will apply the changes to every place it is used.

The lives handling code

To implement lives in our game, let's first change the ball's function bound to the onOutOfBounds event. Instead of executing an anonymous function and showing the alert right away :

ball.events.onOutOfBounds.add(function(){
    alert('Game over!');
    location.reload();
}, this);

We will assign a new function called ballLeaveScreen; delete the previous event handler (shown above) and replace it with the following line:

ball.events.onOutOfBounds.add(ballLeaveScreen, this);

We want to decrease the number of lives every time the ball leaves the canvas. Add the ballLeaveScreen() function definition at the end of our code:

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();
    }
}

Instead of instantly printing out the alert when you lose a life, we first subtract one life from the current number and check if it's a non-zero value. If yes, then the player still has some lives left and can continue to play — they will see the life lost message, the ball and paddle positions will be reset on screen and on the next input (click or touch) the message will be hidden and the ball will start to move again.

When the number of available lives reaches zero, the game is over and the game over alert message will be shown.

Events

You have probably noticed the add() and addOnce() method calls in the above two code blocks and wondered how they differ. The difference is that the add() method binds the given function and causes it to be executed every time the event occurs, while addOnce() is useful when you want to have the bound function executed only once and then unbound so it is not executed again. In our case, on every outOfBounds event the ballLeaveScreen will be executed, but when the ball leaves the screen we only want to remove the message from the screen once.

Compare your code

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

Next steps

Lives made the game more forgiving — if you lose one life, you still have two more left and can continue to play. Now let's expand the look and feel of the game by adding animations and tweens.

Метки документа и участники

Внесли вклад в эту страницу: BVaflick
Обновлялась последний раз: BVaflick,