Очки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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