Очки

Это 11 из 16 уроков руководства разработки игры с помощью Phaser. Исходный код этого урока вы можете найти здесь:  Gamedev-Phaser-Content-Kit/demos/lesson11.html.

Очки сделают игру более интересной — вы можете пробовать побить собственный рекорд или рекорд друзей. В этой главе мы добавим систему очков в нашу игру.

Мы будем использовать отдельные переменные для хранения количества очков и текста, который Phaser выведет на экран при помощи функции text().

Определим переменные

Добавьте две новых переменных после всех наших текущих опеределений переменных:

// ...
var scoreText;
var score = 0;

Выводим очки на экран

А сейчас добавим строку кода в самый конец функции create():

scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' });

Функция text() может принимать четыре параметра:

  • Координаты x и y текста.
  • Сам текст.
  • Шрифт и стиль текста.

Последний параметр выглядит очень похожим на CSS-стиль. В нашем случае, текст будет голубой, размер 18 пикселей, шрифт Arial.

Обновляем очки при разрушении кирпича

Мы будем увеличивать количество очков каждый раз, когда мячик разобьёт кирпич и обновлять текст scoreText, который отображает на экране текущие очки. Текст обновляется вызовом функции setText(). Добавьте эти две строчки кода в функцию ballHitBrick():

function ballHitBrick(ball, brick) {
    brick.kill();
    score += 10;
    scoreText.setText('Points: '+score);
}

Вот и всё — обновите страницу index.html и проверьте, как очки изменяются, при разрушении кирпича.

Сравните свой код

Вы можете проверить код из этого урока и поиграть с ним, чтобы лучше понять, как он работает:

Следующий шаг

Теперь мы имеем систему очков, но какой смысл в этом, если мы не можем выиграть? Давайте добавим логику выигрыша.