PhaserJS
Fiche 6

Souviens-toi que un des challenges la dernière fois était de montrer le nombre de vies en coeurs. C'était en fait un challenge plutôt compliqué, donc on va le résoudre ensemble aujourd'hui!

La première étape, comme toujours, sera de dessiner un coeur en pixelart, sur ton site de pixelart préferé. Moi je vais utiliser pixilart.com comme d'habitude. Voici mon joli coeur:

Importe le dans ton projet et load le, comme pour tous les autres dessins.

On va maintenant devoir dessiner nos coeurs. Comme ceux ci doivent juste être créés et pas changer, on va le faire dans la fonction create

Dessinons d'abord 1 coeurs. On veut le placer dans le coin en haut à droite, et faire en sorte qu'il ne bouge pas...

Pour qu'il ne bouge pas, on connaît déjà la commande! Tu t'en souviens?

Et pour faire apparaître un objet sur la map, on peut juste faire this.physics.add.sprite avec les coordonnées et quel sprite on veut ajouter.

Ensemble ça donne donc ceci. Iil te faudra tout de même changer les coordonnées.

              this.physics.add.sprite(460, 30, "heart").setScrollFactor(0);
            

Challenge: Essaie de faire apparaître 3 coeurs côte à côte!

On veut aussi pouvoir les effacer ces coeurs. Pour ce faire, on doit leur donner un nom.

              this.live1 = this.physics.add.sprite(460, 30, "heart").setScrollFactor(0);
            

Donne leur tous un nom pour qu'on puisse les différencier.

Ensuite, juste après avoir créé ces coeurs, on va créer une liste des coeurs! Cette liste doit contenir les coeurs dans l'ordre, tel que le premier coeur à enlever est tout à droite.

              this.liveList = [this.live1, this.live2, this.live3];
            

Lorsque tu perds une vie, on veut afficher une vie en moins. Facile! On veut enlever un coeur de notre this.liveList, et le détruire.

Pour enlever le dernier coeur de la liste, on va utiliser .pop(). Ceci va enlever uniquement le dernier élément de la liste et rien de plus.

Ensuite, on veut le .destroy() pour détruire ce coeur.

              this.liveList.pop().destroy();
            

Si tu n'as pas encore codé la partie "Perdre", sois sûr de retourner à la fiche précédente et de le faire! Sinon ton jeu va crasher lorsque tu veux perdre une vie que tu n'as pas!

On a déjà ajouté des piques un peu partout dans notre jeu. Mais si on ajoutait des piques qui bougent? Ou encore mieux, des ennemis?

Tout d'abord, décide toi si tu veux utiliser des piques qui bougent ou si tu veux dessiner un nouveau dessin pour tes ennemis. Si tu veux en dessiner un autre, rend toi sur pixilart.com ou ton site de pixelart préferé.

Tu dois alors load ton nouveau dessin dans ton jeu, comme on le fait avec tous les autres dessins dans la fonction preload.

Ensuite, fait apparaître ton ennemi quelque part sur l'écran. Tu peux le faire dans la boucle for (Et donc placer un caractère sur ta map). N'oublie pas de lui donner un nom quand tu le fais apparaître.

              } else if (c === 'e') {
                this.ennemy = this.physics.add.sprite(X, Y, "ennemy");
              }
            

Maintenant, on va devoir se décider sur une direction initiale de notre ennemi. Dans la boucle create, juste après avoir fait apparaître ton ennemi, initialise la direction!

              this.direction = "right";
            

Ceci veut dire qu'il bougera à droite.

Dans la fonction update, on va alors le faire bouger.

Pour le faire toujours bouger, on peut simplement faire ceci:

              this.ennemy.x += 1;
            

Maintenant il bougera toujours à droite.

CHALLENGE: Fait bouger l'ennemi toujours à gauche! Quand c'est réussi, remets le à toujours bouger à droite!

Mais on ne veut pas qu'il bouge toujours à droite. On veut qu'il bouge un peu à droite, puis un peu à gauche, etc.

Pour savoir combien on veut qu'il bouge à droite, fais logguer l'ennemi ses coordonnées.

Juste après avoir ajouté 1 aux x de l'ennemi, ajoute ceci

              console.log(this.ennemy.x);
            

Lorsque l'ennemi atteint l'endroit où tu veux qu'il se retourne, prend note du numéro dans la console. Chez moi, c'est 200.

Donc, lorsqu'il atteint 200, on va changer de direction!

              if(this.ennemy.x > 200) {
                this.direction = "left";
              }
            

Pour l'instant cela ne change rien. Mais c'est parce que l'ennemi bouge juste à droite, sans jamais regarder la direction. Changeons cela!

              if(this.direction === "right") {
                // Bouger à droite
              } else {
                // Bouger à gauche
              }
            

Maintenant, lorsque l'ennemi arrive au point où il doit se retourner, il va se retourner!

Finalement, il nous faut juste faire en sorte qu'il se reretourner lorsqu'il arrive trop à gauche. Prend note de l'X où tu veux qu'il se retourner à nouveau, et fait le tourner

              if(this.ennemy.x < 40) {
                this.direction = "right";
              }
            

Voilà! Ton ennemi bouge de droite à gauche en boucle.

Il ne manque qu'une chose! Pour l'instant, l'ennemi ne fait rien quand on le touche...

Te souviens-tu de comment on faisait pour les piques?

              this.physics.add.overlap(this.player, this.spikes, function(player, spike) {
                // Ce qui se passe lorsqu'on touche une pique
              }, null, this);
            

Crois-tu que tu sais l'adapter aux ennemis? Il faut juste changer 2 petits trucs ;-)