Pierwsza gra w Phaserze 3

Pozostały nam dwie ostatnie funkcjonalności, które dodamy do gry: zagrażający graczowi wróg do omijania oraz wynik zliczany za zgromadzone gwiazdki. Zacznijmy od wyniku.

Aby to uzyskać wykorzystamy obiekt Text Game. Stwórzmy dwie nowe zmienne, jedna do przechowywania wyniku, a druga do obiektu z wyświetlanym tekstem:

var score = 0;
var scoreText;

Obiekt z wyświetlanym tekstem scoreText ustawiamy w obrębie funkcji create:

scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

16 na 16 wyznacza koordynaty gdzie tekst zostanie wyświetlony. 'score: 0' to standardowy tekst do wyświetlenia, pozostały parametr to styl tekstu (wielkość i kolor wypełnienia). Jeżeli nie powiemy Phaserowi jaki font ma użyć, wybrany zostanie standardowo Courier.

Teraz pozostaje nam jeszcze odpowiednio zmodyfikować metodę collectStar tak żeby gracz otrzymywał punkty za zbierane gwiazdki:

function collectStar (player, star)
{
    star.disableBody(true, true);

    score += 10;
    scoreText.setText('Score: ' + score);
}

Za każdą gwiazdkę dodawane jest 10 punktów i tekst scoreText jest adekwatnie aktualizowany. Jeżeli uruchomisz plik part9.html zobaczysz spadające gwiazdki i zwiększajacy się wynik gdy je zbierasz.

W ostatniej części poradnika dodamy wrogów.