P5JS
Dodge

Le jeu qu'on va créer s'appelle "Dodge". Son but est très simple: Tu joues une petite balle qui doit aller de la gauche vers la droite de l'écran. Si le joueur ne fait rien, la balle bouge automatiquement à droite, et si le joueur clique sur sa souris, elle bouge à gauche.

Jusque là, le jeu n'est pas bien difficile. Mais il y a un petit bonus: Des bombes vont tomber du ciel et essayer de détruire la pauvre balle. Tu dois donc éviter les bombes!

Tu peux jouer à ma version du jeu ici.

On va commencer par les mouvements du joueur. Comme le joueur peut bouger en X, il nous faut commencer par créer une variable qui garde cette position X. Tu dois initialiser la variable en dehors de toute fonction.

              let positionX = 20;
            

Dans notre fonction draw() on veut alors dessiner le joueur. Je vais simplement dessiner un cercle pour le joueur, mais je te défie d'être plus créatif!

              circle(positionX, 350, 10)
            

On doit ensuite faire bouger le personnage à droite lorsqu'on ne fait rien. On doit donc vérifier si la souris est pressée ou non. Heureusement pour nous, il existe une fonction pour cela!

En effet, on va utiliser la fonction mousePressed(). Tu peux la définir comme la fonction draw()

              function mousePressed() {
                // Code ici
              }
            

Dans la fonction draw(), on peut dire que le joueur doit toujours avancer de 10 pixels. Lorsque la souris est pressée, on peut faire reculer le joueur de 20 pixels. Comme il avancera aussi de 10, cela revient à reculer de 10.

Essaie de coder cela!

Tu te rends sûrement compte qu'il y a un problème... En fait, la function mousePressed() ne s'actionne que lorsque la souris est pressée...

On va donc changer notre façon de penser: On va créer une vitesse, speed, qui vaut genre 10 au début. Lorsqu'on appuie sur la souris, elle vaut -10. Lorsque la souris est relachée, elle vaudra de nouveau 10.

Cela devrait marcher! Il nous faut juste une façon de détecter lorsque la souris est relachée... Chance! Cette fonction s'appelle mouseReleased()!

              function mouseReleased() {
                // Code ici
              }
            

Tu devrais pouvoir compléter le reste par toi-même. Si tu as des problèmes, demande à ton animateur.

10 et -10 sont peut être un peu rapides pour tes vitesses. Tu peux les réduire si tu préferes, genre 4 et -4.

Et si on codait les bombes maintenant? L'idée est de faire apparaître des bombes de façon aléatoire en haut de l'écran, et quelle tombent vers le bas.

Commençons par coder une bombe. Elle a une position X et Y qu'on doit définir en dehors des fonctions.

              let bombeX = 200;
              let bombeY = 0;
            

Dans la fonction draw(), on veut alors dessiner ces bombes à cette position, et les faire tomber un peu vers le bas. Comme ceci:

              rect(bombeX, bombeY, 20, 30);
              bombeY += 2;
            

C'est bien gentil, mais comment est-ce qu'on peut étendre ceci à plusieurs bombes?

On va utiliser quelque chose appelé un dictionnaire! Plutôt que de dire let bombeX = ... et let bombeY = ..., on va les combiner comme ceci:

              let bombe = {
                x: 200,
                y: 0
              }
            

Lorsqu'on utilise les variables x et y de la bombe, on utilise le mot clé bombe.x ou bombe.y. Remplace tous les bombeX et bombeY par les nouvelles valeurs.

Tu ne vois toujours pas comment étendre ceci à plusieurs bombes? C'est normal ;-) Pour créer plusieurs bombes, commence par créer une liste bombes vide.

              let bombes = [];
            

Dans la fonction draw(), on va donc ajouter une nouvelle bombe à la liste à chaque instant:

              bombes.push({
                x: 200,
                y: 0
              });
            

On doit aussi se souvenir de montrer les bombes, comme pour l'instant on ne montre que la bombe de base.

Tu peux effacer la bombe de base (La partie "dessin" et la partie où tu initialises la variable). On veut alors faire une boucle dans la fonction draw(), qui dessine chacune des bombes.

Pour ce faire, on va utiliser une boucle for. Mais on va en utiliser une un peu spéciale, qui est nouvelle à la version 6 de JavaScript. C'est la boucle for ... of .... Elle s'utilise comme suit:

              for(bombe of bombes) {
                // Dessiner bombe
                // Mettre à jour le Y de la bombe
              }
            

Cette boucle va prendre chaque élément bombe dans la liste bombes, et va faire quelque chose avec.

Tu devrais remarquer 2 trucs: Premièrement, les bombes apparaîssent toutes ensembles. On va donc réparer cela!

Plutôt que de faire apparaître ta bombe à 200 en X, tu peux le faire apparaître à une position aléatoire entre 0 et 400.

En p5.js, on utilise la fonction random() pour avoir des numéros aléatoires

              random(0, 10) // Nombre aléatoire entre 0 et 10
            

Un autre truc que tu as pu remarquer est que les bombes ne disparaîssent jamais et que cela commence à buger après un certain temps. C'est parce qu'on n'efface pas les bombes quand elles arrivent en bas.

On ne va pas effacer les bombes en fait, on va simplement les remettre en haut de l'écran. On va définir un nombre maximal de bombes qui peuvent être sur l'écran en même temps, et on ne va que ajouter des bombes si ce nombre n'est pas dépassé.

              if(bombes.length < 20) {
                bombes.push(...);
              }
            

Lorsque les bombes arrivent en bas, on va simplement les remettre en haut, avec une nouvelle position X. Pour ce faire, lorsque tu mets à jour la partie bombe.y, tu dois vérifier que la bombe n'est pas en dehors de l'écran. Si elle n'est, tu dois changer bombe.x et bombe.y

              if(bombe.y > 400) {
                bombe.x = ...;
                bombe.y = ...;
              } else {
                bombe.y += ...;
              }
            

Finalement, tu as sûrement remarqué que les bombes apparaîssent trop prêts les unes des autres. Pour ce faire, on ne peut pas changer les frameRate, comme cela changerait toute la vitesse du jeu...

On va plutôt créer encore une variable qui se souvient de l'instant de la dernière bombe créée. On ne peut en créer une nouvelle que lorsque ce temps est il y a disons 0.2 secondes. Lorsqu'on crée une nouvelle, on mets à jour la variable.

Commençons par créer la variable.

              let lastBombe = 0;
            

Avant de créer une bombe, on doit vérifier que la dernière bombe crée est il y a assez longtemps. On veut aussi mettre à jour la variable.

              if (lastBombe + 200 < millis()) {
                // Créer nouvelle bombe
                lastBombe = millis();
              }
            

Super! Tu peux déjà essayer d'éviter les bombes! En ce moment, elles ne te tuent pas pourtant... Mais ne t'inquiètes pas, cela va venir ;-)

En p5.js on n'a pas de fonctionnalité "Quand ... touché" comme en Scratch. On va donc devoir coder cela par nous mêmes...

On doit d'abord se forger une idée de ce qu'il se passe lorsque le joueur se fait toucher par une bombe. Deux options se présentent: Soit on fait perdre le joueur dès qu'il se fait toucher, soit on le remet simplement au début pour qu'il puisse re-essayer.

Comme c'est bien plus facile de simplement le remettre au début, on va faire cela. Si tu veux le faire perdre, cela peut être un challenge pour toi ;-)

Pour voir si le joueur touche une bombe, on va simplement vérifier si le joueur est près ou non de la bombe. En effet, on a les coordonnées du joueur et de toutes les bombes, donc on peut facilement vérifier si les deux sont trop prêts les uns de l'autre. Lorsqu'ils sont trop prêts, on va faire perdre le joueur, donc le renvoyer au début du jeu.

              for(bombe of bombes) {
                // Bouger bombe
                if(dist(bombe.x, bombe.y, positionX, 350) < 30) {
                  positionX = ...;
                }
              }
            

La fonction dist() nous donne la distance entre deux ensembles de points. Elle prend 4 paramètres, la première coordonnée X, la première coordonnée Y, la deuxième coordonnée X et la deuxième coordonnée Y.

Voilà! Lorsque tu te rapproches trop d'une bombe, tu meurs!

On aimerait aussi vérifier si on a gagné. Pour ce faire, il suffit de regarder si la positionX est plus grande que 400 (La largeur de ton canvas). Lorsque cela est le cas, tu peux afficher un texte sur l'écran.

              if(positionX > ...) {
                // Afficher "T'as gagné!"
              }
            

Ton jeu est maintenant prêt!

Tu peux l'envoyer à tes amis en le partageant. Pour ce faire, sauvegarde d'abord ton projet. Ensuite, sélectionne File>Share. Ici, tu peux copier le lien "Fullscreen", qui est un lien uniquement avec le jeu, sans le code. En utilisant ce lien, tes amis pourront jouer à jeu aussi!

Tu as déjà fini? Ici tu trouveras une liste de challenges que tu peux essayer d'intégrer dans ton jeu. Certains sont plus durs que d'autres, mais essaie les quand même ;-)

• Re-Dessine ton héros pour qu'il soit plus joli!
• Re-Dessine tes bombes pour qu'elles soient plus réalistes
• Fait disparaître les bombes lorsque tu as gagné! Pour ce faire, tu aura peut être besoin d'une variable qui stocke si tu as déjà fini ou non.
• Fait arrêter le mouvement du joueur lorsque tu as gagné. Tu peux re-utiliser la même variable qu'avant pour ce faire.
• Donne un certain nombre de vies à ton joueur. Tu aura certainement besoin de variables pour ce faire. Tu peux aussi afficher le nombre de vies dans le coin de l'écran. Lorsqu'il n'a plus de vies, le jeu doit se terminer et afficher que tu as perdu.