Очки
Это 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 и проверьте, как очки изменяются, при разрушении кирпича.
Сравните свой код
Вы можете проверить код из этого урока и поиграть с ним, чтобы лучше понять, как он работает:
Следующий шаг
Теперь мы имеем систему очков, но какой смысл в этом, если мы не можем выиграть? Давайте добавим логику выигрыша.