Gérer un game over et lancer une nouvelle partie
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 et l’affichage d’un score.
Afin de stopper toutes les animations et interactions, on ajouter une propriété gameOn à la scène fixée à false. Et on encapsule tout le contenu de la méthode update dans un test sur cette nouvelle variable.
export default class Game extends Phaser.Scene
{
gameOn = false;
....
update() {
if ( this.gameOn ) {
....
}
}Avec 2 images, on choisit d’afficher un « game over » lorsque la barre de vie du joueur est épuisée et un « play » pour relancer la partie. Cela devient une habitude maintenant : on les charge depuis preload.
preload() {....
this.load.image('play', 'assets/play.png');
this.load.image('gameOver', 'assets/gameOver.png');
....}Depuis create, on les ajoute à la scène et au layer playerInfLayer en le centrant et en laissant visible l’image play.
create() {....
this.play = this.add.image(this.sys.game.canvas.width/2,this.sys.game.canvas.height/3,'play');
this.play.setVisible(true);
this.gameOver = this.add.image(this.sys.game.canvas.width/2,this.sys.game.canvas.height/1.5,'gameOver');
this.gameOver.setVisible(false);
....
this.playerInfLayer.add([this.scoreText,this.healthBar,this.play,this.gameOver]);
...}On les rend visible lorsque la barre de vie du joueur est vide tout en supprimant les météorites, en cachant le shooter et en fixant la valeur de gameOn à false.
handleShooterMeteorCollision(shooter,meteor) {....
if ( this.healthBar.decrease(10) ) {
this.gameOver.setVisible(true);
this.play.setVisible(true);
this.shooter.setVisible(false);
this.meteorGroup.clear(true,true);
this.gameOn = false;
}
....}On active le spawn des météorites uniquement lorsqu’une partie est en cours.
this.meteorTimer = this.time.addEvent( {
delay : 1000,
callback: () => {
....
if ( this.gameOn ) {
this.spawnMeteor(meteorView,0,100,15,this,this.gameLayer);
}
....
}); Pour relancer une partie, il suffit de cliquer sur l’image play, et de remettre les compteurs à 0 : le score, la barre de vie, la génération des météorites, et rendre visible le shooter.
On commence par rendre sensible au clic l’image play avec la méthode setInteractive puis on traite l’événement clic rattaché duquel on appelle toutes les instructions nécessaires à la remise en marche du jeu.
create() {....
this.play.setInteractive();
this.play.on(Phaser.Input.Events.POINTER_DOWN, () => {
this.play.setVisible(false);
this.gameOver.setVisible(false);
this.shooter.setX(300);
this.shooter.setY(600);
this.shooter.setVisible(true);
this.randomData.sow(999);
this.score = 0;
const value = `Score: ${this.score}`;
this.scoreText.text = value;
this.healthBar.value = 100;
this.healthBar.draw();
this.gameOn = true;
});
....}Le prochain article sera consacré aux interactions physiques.
