Afficher le score
Suite de la série d’articles consacrés à la création d’un shooter avec phaser.js, le précédent étant consacré à la gestion des effets sonores.
Pour afficher le score, on a tout d’abord besoin d’ajouter une nouvelle variable nommée score initialisée à 0.
export default class Game extends Phaser.Scene
{
score = 0;
....}Puisque la règle est de 10 points gagnés lorsqu’un laser touche une météorite, on ajoute 10 à la variable score depuis la méthode handleLaserMeteorCollision.
handleLaserMeteorCollision(shooter,meteor) {....
this.score += 10;
....}Il reste à afficher ce score sur la scène dans le bon calque, d’abord au lancement du jeu depuis create. On utilise un objet Text qui prend en paramètres sa position, son contenu et sa forme au format css.
create() {....
const style = { color: '#ffffff', fontSize: 1, fontFamily: 'Verdana' };
this.scoreText = this.add.text(0, 0, 'SCORE : 0', style);
....
this.playerInfLayer.add([this.scoreText,this.healthBar]);
....}Puis lorsqu’il change en faisant une interpolation en le plaçant juste après la chaine de caractères « Score : ».
handleLaserMeteorCollision(shooter,meteor) {....
this.score+=10;
const value = `SCORE: ${this.score}`;
this.scoreText.text = value;
....}L’instruction this.scoreText.text va remplacer ${this.score} par la variable score.
Prochaine étape : afficher un Game Over et lancer une nouvelle partie.
