Добрый день, уважаемые читатели.
В прошлом уроке мы добавили в игру звезды и возможность их сбора, таким образом наша игра приобрела некий смысл т.к до этого наш мир был пуст и безжизнен. Однако на данный момент процесс сбора звезд не имеет никакой обратной связи, кроме того что звезда исчезает после того как мы "набегаем" на неё нашим персонажем. Для того что бы сделать этот процесс более интерактивным мы добавим в игру счётчик очков.
Подготовка к работе
для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все не обходимые файлы доступны по ссылке.
Реализация счётчика
Для этого мы будем использовать функционал работы с текстом встроенный в phaserjs. Для этого мы объявим две переменные, одна будет содержать текущий счёт, а вторая объект который позволяет работать с текстом:
Для переменной scoreText мы устанавливаем значение в функции create:
Где:
- 16x16 - это координаты на которых будет распологатся счётчик ( отсчёт идет от левого верхнего угла );
- 'score: 0 ' - начальное значение счётчика;
- { fontSize: '32px', fill: '000' } - объект который устанавливает размер и цвет счётчика, если не устанавливать эти параметры по умолчанию phaserjs будет использовать шрифт Courier;
Далее нам нужно изменить функцию collectStar, мы добавим в неё код который будет повышать значение счётчика каждый раз когда мы поднимаем звезду:
Таким образом каждая поднятая звезда будет прибавлять к нашему счётчику 10 очков: