PhaserJS
Fiche 5

On va maintenant créer un système de points. Crée un objet que tu devra collectionner sur le chemin pour gagner des points. Cela peuvent être des étoiles, des bonbons, des gateaux ou ce que tu veux!

Lorsque tu as créé ton objet qui vaut des points, load le dans ton programme.

On va alors le faire apparaître dans la map aux différents endroits. Dans ta constante map, tu peux ajouter des "a" pour les objets qui donnent des points.

Dans la fonction create, tu dois alors créer un groupe statique pour les objects qui valent des points. Chez moi c'est des étoiles, donc j'appelle le groupe "stars".

              this.stars = this.physics.add.staticGroup();
            

Dans la fonction create, dans la boucle for, on va alors ajouter un else if en plus, pour vérifier si la lettre est égale à "a".

              } else if (c === 'a') {
                this.stars.create(X, Y+10, "star");
              }
            

Maintenant tes étoiles apparaîssent sur l'écran. Mais rien ne se passe lorsqu'on les touche...

Comme pour la pièce qui nous fait gagner, on va donc ajouter un overlap.

              this.physics.add.overlap(this.player, this.stars, function(player, star) {
                
              }, null, this);
            

Pour l'instant, fais en sorte que l'étoile se détruise lorsque tu la touches!

On aimerait bien recevoir des points lorsqu'on détruit une étoile. Pour ce faire, tout au début de la fonction create, on va initialiser une variable points à 0.

              this.points = 0;
            

À chaque toucher d'étoile, en plus de détruire l'étoile, on va augementer les points de 1. C'est très facile!

              this.points = this.points + 1;
            

Il existe d'autres manières d'écrire la même chose. Les 3 écritures suivantes sont synonymes:

              this.points = this.points + 1;
              this.points += 1;
              this.points++;
            

Quelle manière préféres-tu? Et pourquoi?

Maintenant on doit montrer le score sur l'écran. Pour ce faire, on va simplement afficher un texte en haut à gauche de l'écran.

              this.scoreText = this.add.text(0, 0, "Mon Texte");
            

Tu verra surement que le texte bouge lorsque tu bouges. On doit en effet fixer le texte à l'écran. Pour ce faire, on ajoute un scrollFactor.

              this.scoreText = this.add.text(/* ... */).setScrollFactor(0);
            

On doit alors adapter le texte affiché. Facile! On veut afficher "Score: " suivi de notre score.

              "Score: " + this.points
            

Chaque fois qu'on attrape une étoile, on doit re-adapter ce texte. Sinon il ne se met que au début et restera à 0 pendant toute la partie...

Lorsque tu touches une étoile, il te suffit de faire ce code:

              this.scoreText.setText(/* Nouveau Texte */);
            

Et voilà, ton score se met à jour lorsque tu attrapes des pièces.

Challenge: Ajoute une touche "triche". Par example, lorsque tu appuies sur la touche "Y", tu reçois 100 points gratuits!

Une chose est d'arriver à avoir le plus de points possibles, une autre est de réussir le niveau sans mourir trop souvent.

Ajoute une variable "lives" au début du code, au même endroit que tu crées la variable this.score.

              this.lives = 3;
            

Ensuite, on veut afficher le nombre de variables en dessous du nombre de points.

              this.livesText = this.add.text(0, 50, /* Nombre de vies */);
            

Lorsque tu meurs (Tomber ou toucher des piques), tu peux alors changer le nombre de vies, et changer le texte, comme on avait fait avant.

Lorsque tu n'as plus de vies, on doit arrêter le jeu. Pour ce faire, on veut afficher un grand texte "GAME OVER" au milieu de l'écran, et arrêter le jeu. Ceci ressemble fort au code qu'on a fait lorsqu'on gagne le jeu. Pour rappel, voici le code pour gagner:

              let victoryText = this.add.text(0, 0, "VICTORY", {
                color: "#d53636",
                fontSize: "70px"
              }).setScrollFactor(0);
              Phaser.Display.Align.In.Center(victoryText, this.add.zone(270, 180, 270, 180));
              this.physics.pause();
            

Tout ceci doit bien sûr se placer dans une condition qui vérifie si on a encore des vies restantes ou non.

              if(this.lives == 0) {
                // Arreter le jeu
              }
            

Adapte ce code pour qu'il relfète une perte plutôt qu'une victoire.

CHALLENGE: Plutôt que d'afficher en texte le nombre de vies, affiche le nombre de coeurs en dessin. Dessine 3 coeurs si tu as 3 vies, etc. Pour ce faire, tu dois importer une image de coeur, et les dessiner aux bons endroits.