Flappy Bird : Créer un jeu classant en utilisant Javascript et P5. js Framework

1. Promo: Salut, je m'appelle Saran. Dans ce cours, je vais vous montrer comment faire un jeu classique Flappy Bird simple, facile à suivre, en utilisant JavaScript et P5 framework. Nous utiliserons un éditeur en ligne gratuit qui fonctionne sur n'importe quel navigateur web. Je vais vous montrer comment dessiner les formes de base, et faire bouger un objet. Ensuite, je vais dessiner un oiseau, le faire tomber au sol en simulant la gravité. Faites sauter l'oiseau, et faites-le arrêter de sauter quand il est mort. Ensuite, je créais les tuyaux en mouvement, et ajouterais la détection de collision aux tuyaux. Enfin, je vais ajouter le système de score et le rendre plus difficile. Vous pouvez me suivre pour plus de tutoriels de jeu. Maintenant, ouvrons la leçon suivante, et commençons ! 2. Les bases: Dans cette première vidéo, nous allons parler des bases du framework P5.js. Ouvrez un navigateur et accédez à editor.p5js.org. Sur cet écran, nous avons le panneau de codage sur la gauche, et un aperçu sur la droite. Cliquez sur le bouton Exécuter, pour exécuter le code. Le résultat sera affiché sur la droite. Je recommande de créer un compte immédiatement, car vous pouvez enregistrer les projets et éviter, accidentellement, de rafraîchir le site, ce qui efface les progrès que vous avez réalisés. Une fois que vous faites cela, renommez le titre en « Flappy Bird » et enregistrez-le. Vous pouvez parcourir vos projets enregistrés dans le menu Ouvrir. Pour le rendre plus facile à voir, nous utiliserons désormais le thème sombre. Ici, nous avons deux fonctions de base : la fonction de configuration et la fonction de dessin. La fonction d'installation contient le code permettant d'attribuer les valeurs initiales. code à l'intérieur des crochets bouclés ne sera exécuté qu'une seule fois au début. Il y a une fonction à l'intérieur : CreateCanvas, qui définit l'écran d'affichage à 400 pixels de largeur et 400 pixels de hauteur. On peut changer la largeur à 600. Cliquez ensuite sur Exécuter, pour voir la modification. Ramenons-le à 400. Dans la fonction de dessin, nous avons appelé une fonction de fond qui peint l'écran entier avec 220. 220 est une couleur gris clair sur les niveaux de gris. Changez la valeur 0 pour la couleur la plus foncée, ou 255 pour la couleur la plus brillante. Pour d'autres couleurs, nous pouvons google « Sélecteur de couleurs RVB », et choisir la couleur que nous voulons. Dans ce cas, nous voulons une couleur d'un ciel bleu. Ensuite, copiez ces nombres RVB et placez-les dans les parenthèses d'arrière-plan. Lorsque nous appuyons sur run, le code dans la fonction de configuration est appelé. Ensuite, la fonction de dessin est appelée à plusieurs reprises, qui signifie que tout ce qui est à l'intérieur de la fonction de dessin est appelé 60 fois par seconde, ou 60 FPS par défaut. Par exemple, si nous appelons une fonction print, parenthèses, FrameCount et hit run. Nous verrons qu'il imprime le FrameCount sur la fenêtre de la console ci-dessous, à raison de 60 lignes par seconde. Nous pouvons le ralentir en réglant le fraRate à 1 image par seconde. Maintenant dans la console, il dessine le ciel bleu, et imprime le nombre d'images toutes les secondes. 60 est le taux par défaut. Alors supprimons ça. Parlons du système de coordonnées. Dans la plupart des moteurs de jeu 2D, l'origine commence dans le coin supérieur gauche, où la position x est 0 et la position y est 0. Se déplacer vers la droite augmente la valeur x. Déplacer vers le bas augmente à la valeur y. C' est le contraire de ce qu'un système de coordonnées normal utilise. Alors s'il vous plaît gardez cela à l'esprit. Ensuite, dessinons les formes de base que nous allons utiliser dans notre jeu. Le premier est un rectangle. Je vais faire un commentaire ici. Vous n'avez pas besoin d'écrire. Nous appelons une fonction rect qui a besoin de 4 paramètres d'entrée. position x, position y, sa largeur et sa hauteur. Pour dessiner un rectangle de 60 x 30 dans le coin supérieur gauche, nous appelons rect x 0, y 0, largeur 60 et hauteur 30. Les x et y dans un rectangle définissent l'endroit où se trouve la position supérieure gauche. Donc, nous pouvons dire que le pivot est en haut à gauche. Pour déplacer le rectangle vers le centre. Nous allons changer la position x à largeur/2, et y à hauteur/2. La largeur et la hauteur surlignées en rose sont les variables constantes de la toile — à partir d'ici. La forme suivante est une ellipse. Pour dessiner une ellipse, nous devons spécifier 4 paramètres. x, y, diamètre horizontal et diamètre vertical. Si le diamètre horizontal et vertical sont les mêmes, c'est un cercle. Dessinons un cercle au-dessus du rectangle. ellipse, parenthèses, moitié de la largeur, la moitié jusqu'à la hauteur. Le diamètre horizontal est de 50, et le diamètre vertical est également de 50. Lancez-le. Contrairement à un rectangle où le pivot se trouve dans le coin supérieur gauche, un pivot en ellipse se trouve au centre. Ensuite, parlons de changer les couleurs. Pour changer la couleur de ce rectangle, nous appelons une fonction de remplissage avant de dessiner le rectangle La fonction de quelques utilise les mêmes types de paramètres que la fonction d'arrière-plan. Il peut s'agir de 1 numéro en niveaux de gris ou de 3 nombres RVB. Si je veux remplir le rectangle avec une couleur verte, ce serait, fill, rouge 0, vert 255, et bleu 0. Ensuite, après avoir dessiné le rectangle, j'ai pu changer la couleur de remplissage en rouge. Alors remplissez, rouge 255, vert 0, et bleu 0. Pour supprimer les contours, utilisez NoStroke dans la fonction de configuration. Enfin, parlons de l'animation. Même si sur l'écran précédent, il ressemble à une image fixe, la fonction de dessin fonctionne 60 fois par seconde. Changeons la position x en FrameCount. Parce que le FrameCount augmente de 1 dans chaque image. Lorsque la fonction de dessin est appelée, le rectangle se déplace maintenant vers la droite, en commençant à 1. Et il finit par sortir de l'écran. Maintenant que nous avons couvert les bases, dans la prochaine vidéo, nous allons créer un oiseau Flappy. Merci. 3. Oiseau: Dans cette vidéo, nous allons utiliser la classe en JavaScript. Pour en savoir plus à ce sujet, je recommande une lecture rapide du site Web de W3Schools. Afin de rendre notre code facile à organiser, nous allons créer une classe d'oiseau dans un nouveau fichier. Cliquez sur l'icône en forme de flèche pour afficher le dossier d'esquisse. Ensuite, cliquez sur Créer un fichier, nommez un fichier « bird.js ». Accédez au fichier index.html et ajoutez bird.js, dans le cadre des scripts. Ce bird.js ouvert, nous allons créer une classe d'oiseau, classe, oiseau, et une paire de parenthèses. Nous avons besoin d'un constructeur pour créer un objet oiseau. constructeur, parenthèses et parenthèses. Ici, nous allons initialiser la position X et Y de l'oiseau. ceci, point, qui fait référence aux variables dans la classe. Puis x est égal à 1/3 de la largeur de l'écran, ceci .y est égal à la moitié de la hauteur de l'écran. Nous devons également définir la taille de l'oiseau. Faisons-le 5% de la largeur de l'écran, aussi, la classe d'oiseau devrait gérer son propre dessin. Nous allons donc créer une fonction de dessin, qui sera appelée plus tard dans le fichier d'esquisse. Et dessinons un cercle en utilisant la variable locale x et y, ellipse, ce x, ce y, sa taille pour la largeur, et sa taille pour la hauteur. Ensuite, allez dans le fichier d'esquisse, Tout en haut, créez une variable globale nommée oiseau. Dans la configuration, initialisez l'oiseau en le rendant égal à nouveau Bird, parenthèses. Ensuite, dans la fonction de dessin, dessinez l'oiseau, l'oiseau, le point dessinez. Lancez-le. Maintenant, nous montrons l'oiseau. Finissons cela en changeant de couleur. Je vais utiliser à nouveau le sélecteur de couleur, et choisir une couleur jaune. Copiez ses numéros RVB. Ensuite, ajoutez une fonction de remplissage, collez le nombre dans, et c'est tout. Dans la vidéo suivante, nous allons ajouter la physique au jeu. Merci. 4. Déplacer: Parlons un peu de l'accélération des objets en mouvement. Pour faire bouger un objet, nous devons constamment changer sa position. Par exemple, j'ai la vitesse définie sur 1, et nous allons ajouter la vitesse à la position x. le nouveau x, égal à, l'ancien x, plus, la vitesse. On pourrait donc dire que ce bloc se déplace à la vitesse constante de 1 pixel par image. Maintenant, si nous voulons le déplacer plus rapidement, quand le temps passe, nous pourrions augmenter la vitesse dans chaque image, en y ajoutant une autre variable, que nous pouvons appeler accélération. Si l'accélération est égale à 1, cela signifie que la vitesse commencera à partir de 1, puis 2, puis 3, et ainsi de suite. On pourrait simuler un objet qui tombe en utilisant ce concept. Retour à la classe Bird, nous allons simuler la gravité en créant d'abord une vitesse sur la direction y. this.vy est égal à 1. Ensuite, avant de dessiner l'oiseau, ajoutez la vitesse à la position y. Le nouveau y est égal à l'ancien y, plus la vitesse y. Maintenant, il se déplace vers le bas à la vitesse constante. Nous allons introduire l'accélération. Réglez vy à 0. Ensuite, ajoutez ay est égal à 0,15. Avant de mettre à jour la position y, nous augmenterons la vitesse. Le nouveau vy est le vieux vy, plus ay. Même si ay, est juste 0,15, la vitesse s'additionne, et l'oiseau sort de l'écran. On a besoin d'un plancher en bas. Donc, quand l'oiseau frappe le sol, le jeu se termine, et il devrait cesser de bouger. Allez dans le fichier d'esquisse, créez une variable globale, FloRory. Réglons le sol pour être à 90% de la hauteur de l'écran — 0,9* hauteur. Puis dessinez le sol derrière l'oiseau. Nous utilisons rect, x est 0, y est Floory, largeur est la largeur de l'écran, et la hauteur est la hauteur de l'écran, moins Floory. Faites-le brun en ajoutant une fonction de remplissage au-dessus. Choisissez une couleur marron, puis appelez le remplissage, puis les numéros de couleur. Enfin, nous pourrions empêcher la forme d'oiseau de traverser le sol. Retour à la classe Bird, dans la fonction de dessin, demandez si, la position de y est supérieure à Floory de l'esquisse. Si c'est vrai, le code entre crochets sera appelé, et nous voulons qu'il cesse de bouger. vitesse et l'accélération doivent donc être de 0. Enfin, s'il passe sous le sol, l'oiseau devrait atterrir à la surface du sol. La position de y doit être égale au Floory. Et c'est comme ça que je laisse tomber l'oiseau sur le sol. Dans la prochaine vidéo, nous allons travailler sur le battement de ses ailes. Merci. 5. Flap: L' oiseau doit sauter lorsqu'il reçoit une entrée d'un utilisateur. Il peut s'agir d'un clic de souris ou d'une barre d'espace sur le clavier. Je vais vous montrer dans les deux sens. Tout d'abord, en dessous de la fonction de dessin, ajoutez notre propre fonction, appelez-la — doAction. Cette fonction gérera la partie sauteuse, puis ajoutera une fonction système appelée MousePpressed. Cette fonction sera appelée chaque fois qu'un utilisateur appuie sur un bouton de la souris. Lorsque l'utilisateur clique à l'intérieur de l'écran, il doit appeler DoAction. dessous de cela, ajoutez une autre fonction système appelée KeyPressed. Cette fonction sera appelée chaque fois qu'un utilisateur appuie sur une touche quelconque du clavier. Pour vérifier si la touche Espace est enfoncée. Demandez si key, ==, deux guillemets simples, et mettez un espace à l'intérieur. Si c'est vrai, alors nous appelons doAction. Maintenant DoAction devrait faire sauter l'oiseau. Implémentons la partie sauteuse dans la classe Bird. Créez une nouvelle fonction appelée jump. Cette partie n'est pas réaliste, mais quand l'oiseau saute, nous forcerons sa vitesse à 0. vy est égal à 0. Et puis, le faire accélérer vers le haut contre la gravité. ay est égal à -1,7. Revenons au fichier d'esquisse, et implémentons la fonction de saut. A l'intérieur de la DoAction, mettez oiseau, point saut. Maintenant, il sort de l'écran parce qu'il se déplace plus vite dans la direction opposée. L' accélération devrait cependant revenir progressivement à son 0,15 d'origine. Pour ce faire, nous allons faire une autre variable constante - amax, définissez-le sur 0.15, définissez ay sur amax. Ensuite, au-dessus de l'instruction if, nous vous demanderons si l'ay actuel est inférieur à AMax. C' est vrai chaque fois que l'oiseau saute, parce que maintenant c'est du côté négatif, nous devons l'augmenter. Donc, le nouvel ay, est égal à vieux ay, plus un taux croissant, ce qui pour l'instant faisons 0.4. Il continuerait à additionner jusqu'à ce que l'instruction if soit fausse. Quand il est faux, nous voulons le limiter à la valeur maximale. Sinon, réglez l'ay, sur l'AMax. L' oiseau peut maintenant claquer ses ailes. Dans la vidéo suivante, nous allons implémenter l'écran de mort. Merci. 6. Maîtriser: L' oiseau, sur le sol, ne devrait pas être capable de sauter. Nous allons créer une nouvelle variable appelée santé. Définissez-le sur 1. Lorsque l'oiseau frappe le sol, nous allons non seulement arrêter le mouvement, mais aussi tuer l'oiseau, en fixant sa santé à 0. Avec cette variable, nous pouvons alors demander dans le croquis, que seulement si l'oiseau est vivant, il peut sauter. point d'oiseau santé, ==, 1. Maintenant, après avoir touché le sol, il ne peut plus sauter. Un autre endroit pour tuer l'oiseau est quand il va au-dessus de l'écran. Nous allons demander, si la position de y est inférieure à 0, alors y devrait être à 0. Réinitialisez la vitesse à 0. Et il pourrait commencer à accélérer à la vitesse maximale — AMax. Et enfin, tuez-le, la santé est égale à 0. Maintenant, quand il frappe l'écran, il ne peut plus sauter. Ensuite, montrons le texte à l'écran quand l'oiseau est mort. Allez dans le fichier de croquis, dans la fonction de tirage, nous pouvons demander si l'oiseau est mort. Si l'état de santé est 0, appelez la fonction de texte. La fonction texte a 3 paramètres — les textes comme dans la chaîne, position x et la position y. Nous voulons montrer « GAME OVER » au centre de l'écran. Changons la couleur du texte en noir. Au-dessus de l'instruction if, appelez la fonction fill, définissez-la sur 0. Le pivot par défaut du texte se trouve dans le coin inférieur gauche, ce qui est difficile à centrer. Cependant, il existe une fonction appelée TextAlign, qui peut déplacer le pivot vers les 9 positions. Nous utilisons CENTRE, CENTRE. En haut du texte. TextAlign, CENTRE, CENTRE. Enfin, appelez le TextSize et définissez la taille sur 30. Maintenant, lorsque l'oiseau est mort, en cliquant sur l'écran ou en appuyant à nouveau sur une touche d'espace, devrait relancer l'oiseau et redémarrer le jeu. Dans la classe oiseau, nous allons créer une autre fonction pour réinitialiser toutes les variables. Appelons ça la réinitialisation. Cela réinitialisera tout aux valeurs d'origine du constructeur. Seules les valeurs constantes telles que size et AMax qui ne changent pas. Toute autre chose, devrait aller à la fonction de réinitialisation. Coupez-les et mettez-les dans la fonction de réinitialisation. Ensuite, appelez la réinitialisation à la fin de la ligne. Enfin, allez dans le fichier d'esquisse. Et quand l'oiseau est mort, le DoAction devrait réinitialiser les valeurs de l'oiseau. Lorsque l'instruction est fausse, elle va à autre. À l'intérieur, ajoutez oiseau, point reset. Et c'est tout. Le jeu se réinitialise après la mort de l'oiseau. Dans la vidéo suivante, nous allons créer un tuyau. Merci. 7. Tuyau: Il y a beaucoup de variables dans le tuyau. abord, il doit avoir une position x pour garder une trace où il est horizontalement. Il n'a pas besoin de position y parce qu'il est toujours au sommet. Le tuyau a un écart moyen où l'oiseau peut passer à travers. On doit savoir où commence l'écart, appelons-le TopGap. Et la hauteur de l'écart lui-même, appelons-le GapHeight. Enfin, la largeur de l'écart. Appelons ça GapWidth. Créez un nouveau fichier, appelez-le « pipe.js », ajoutez-le au fichier d'index. À l'intérieur, créez une classe Pipe. Le tuyau a le constructeur qui reçoit la position de départ de x. créer une variable locale x, et l'affecter au x donné, ajouter le gapWidth, et définissez-le à 15% de la largeur de l'écran, un gapHeight, définissez-le à 30% de la hauteur de l'écran. Le dernier est TopGap. Nous allons donc utiliser une carte et une fonction aléatoire. La fonction de carte a 5 paramètres : le nombre, le point le plus bas de ce nombre, le point le plus élevé de ce nombre, le nouveau bas et le nouveau haut. Et la fonction aléatoire a 2 paramètres — le nombre le plus bas qu'elle pourrait être, et le nombre le plus élevé qu'elle pourrait être. Tout d'abord, nous appelons aléatoire pour obtenir un nombre aléatoire entre 0 et 1. Ensuite, utilisez ceci comme premier paramètre de la fonction de carte. Indiquez à la carte que le premier paramètre a le point le plus bas à 0, au point le plus élevé à 1. Ensuite, nous voulons que le TopGap soit de 10% de la hauteur, à moins de 60% de la hauteur. Créons une fonction de dessin. Choisissons une couleur verte pour alimenter le tuyau, appelons la fonction de remplissage et mettons la couleur dedans. Dessinez la partie supérieure du tuyau en utilisant rect, x est x, y est 0, ce qui est le GapWidth, hauteur est le TopGap. La partie inférieure commence par x. y est à un TopGap, plus le GapHeight. La largeur est la même — GapWidth. Et la hauteur est la hauteur de l'écran, moins TopGap, moins GapHeight. Nous testerions ça en utilisant un seul tuyau pour l'instant. Allez dans le fichier d'esquisse, créez une variable globale — pipe. Affectez-le dans la fonction de configuration. est égal à nouveau Pipe, et mettre 0 dans le constructeur. Dessinez-le derrière le sol, pioche point dessine. Et c'est tout. Dans la vidéo suivante, nous allons créer plusieurs tuyaux. Merci. 8. Illusion: Dans ce cadre de caméra, il semble qu'il y ait des objets infinis qui se déplacent de droite à gauche. Même si en réalité, nous avons simplement déplacé le même objet sur le côté droit quand il est hors de l'écran. Puisque nous ne pouvons voir que 3 tuyaux sur l'écran à un moment donné, nous n'avons besoin que de 3 tuyaux pour créer cet effet. Changez le nom de pipe en pipes, et définissez-le sur un tableau vide. Nous y mettrons 3 tuyaux. Créez une boucle for. var i, égal à 0, i < 3, i++. Ensuite, pour chaque tuyau, pipes à i, est égal à un nouvel objet pipe. Le premier tuyau démarre à la largeur de l'écran. Le tuyau suivant commencera à la moitié de la largeur de l'écran, fois i. Copiez cette boucle, et utilisez-la dans la fonction de dessin. A l'intérieur de la boucle, nous allons dessiner chaque tuyau, tuyaux à i, point tirage. Nous pouvons également utiliser des tuyaux longueur point, pour obtenir le nombre de tuyaux. On ne devrait rien voir ici parce que les tuyaux n'ont pas bougé le jet. Allons au cours de pipe. Après avoir dessiné le tuyau, déplacez le tuyau vers la gauche, en tapant le nouveau x, égal à l'ancien x, moins 2. Ensuite, lorsque le tuyau va au-delà d'une certaine plage, le boucle vers l'extrême droite. Si x est inférieur à la moitié négative de la largeur, déplacez le x vers la largeur de l'écran, plus la moitié de la largeur de l'écart. Une fois qu'il est déplacé vers l'extrême droite, nous devrions également randomiser le TopGap, sorte qu'il ressemble à un tuyau différent. Copiez l'espace supérieur et collez-le à l'intérieur de l'instruction if. Maintenant, il semble que nous avons des tuyaux infinis, avec différents TopGaps qui arrivent à travers. Ensuite, les tuyaux devraient cesser de bouger dès que l'oiseau est mort. Nous pouvons envoyer l'objet oiseau à la fonction de dessin des tuyaux, qui va à la fonction de dessin, ajouter oiseau au paramètre. Demandez alors si l'oiseau est encore en vie. Seulement quand il est vivant, le tuyau peut bouger. Enfin, le tuyau devrait avoir une fonction pour se réinitialiser lorsque nous redémarrons le jeu, tout comme l'oiseau. Et une fonction de réinitialisation, nous devons stocker la position x d'origine à une autre variable. Donc, dans le constructeur, ajoutez x0, égal à x, puis déplacez x, avec le TopGap, à la fonction de réinitialisation. Lorsque le tuyau se réinitialise, x est défini sur x0, puis appelez la réinitialisation dans le constructeur. Enfin, lorsque nous réinitialisons l'oiseau à l'intérieur du DoAction, nous devrions réinitialiser tous les tuyaux aussi. Copiez la boucle for à partir des tuyaux de dessin. Passez par chaque tuyau, et appelez la fonction de réinitialisation. Maintenant, les lacunes sont randomisées dans chaque jeu. Dans la vidéo suivante, nous allons faire l'oiseau frappe les tuyaux. Merci. 9. Collision: L' oiseau meurt quand il entre en collision avec un tuyau. Nous devons l'affiner là où l'oiseau ne devrait pas aller dans la direction x. Donc, si son x, plus son rayon, est supérieur à la position x du tuyau. Si le côté gauche de l'équation va au-delà de cela, il pénètre dans la vraie zone, nous allons le réduire plus loin. Utiliser et. Si le x de l'oiseau, moins son rayon, est inférieur à x du tuyau, plus la largeur d'écart. Si les deux conditions sont vraies, il pourrait frapper le tuyau. Écrivons ça d'abord. Ensuite, nous devons vérifier si l'oiseau frappe soit le haut ou le bas du tuyau. Donc, si l'oiseau y, moins son rayon, est inférieur à TopGap. Avec cette condition, nous avons la partie supérieure. Ensuite, utilisez ou, le y de l'oiseau, plus son rayon, est supérieur à TopGap, plus son GapHeight. Maintenant, la vraie zone est dans ces deux zones. Écrivons ça. À l'intérieur du premier si, ajoutez un autre if. Si c'est aussi vrai, alors nous tuons l'oiseau — réglons sa santé à 0. Ensuite, si l'oiseau meurt en frappant le côté du tuyau, l'oiseau devrait tomber au sol. Mais s'il meurt à l'intérieur d'un espace, soit en frappant l'écart supérieur, sur l'écart inférieur, l'oiseau devrait tomber, et atterrir sur l'écart inférieur. Tout d'abord, allez à la classe Oiseau, et ajoutez le sol précieux. Définissez-le sur Floory. Passez de tomber à Floory, à ce point de sol. Ici aussi. Lorsque la réinitialisation est appelée, le plancher doit revenir à Floory. Ensuite, dans la classe de pipe, quand l'oiseau meurt, nous devons vérifier s'il meurt dans l'espace. Si le x de l'oiseau est supérieur au x du tuyau et, le x de l'oiseau est inférieur au x du tuyau, plus la largeur de l'écart. Si c'est vrai, l'oiseau devrait atterrir sur l'écart inférieur. Écrivons le code. Après avoir tué l'oiseau, s'il meurt ici, réglez le plancher de l'oiseau, sur le TopGap, plus GapHeight. Sinon, ça va tomber à la Floory. Et c'est tout. Dans la vidéo suivante, nous allons ajouter le système de score au jeu. Merci. 10. Score: Le score devrait augmenter lorsque l'oiseau passe l'extrémité du tuyau, qui est le x du tuyau, plus sa largeur d'écart. Et le hiscore devrait montrer le meilleur score que vous avez fait. Nous allons ajouter le score et le hiscore dans la classe Bird. Lorsque l'oiseau est réinitialisé, le score doit être 0. Le hiscore doit être dans le constructeur car il ne sera pas réinitialisé tout au long du jeu. Pour augmenter le score, chaque pipe devrait contenir un score de 1. Ajoutez-le à la fonction de réinitialisation. score égal à 1. Lorsque l'oiseau passe le tuyau, le tuyau remet le score à l'oiseau. Demandez si le x de l'oiseau, est supérieur au x du tuyau, plus sa largeur d'écart, qui est le bord droit du tuyau. et, si le tuyau détient toujours le score de 1, qui est supérieur à 0. Décrémenter le score du tuyau et augmenter le score de l'oiseau. Lorsque le tuyau est hors de l'écran, restaurez le score à 1. Essayons, en dessinant la partition dans le croquis. Dans la fonction de dessin, ajouter une fonction de texte — afficher le texte. texte, score, deux-points, un espace, plus point d'oiseau score, montrer à 10, 10. Au-dessus de cela, modifions l'alignement du texte à GAUCHE, HAUT. Et changez le TextSize à 16. Lancez-le. Maintenant que ça marche, voyons le hiscore. Dans la classe des oiseaux, nous comparerons le score à l'hiscore. Si le score est supérieur à l'hiscore, alors c'est le nouveau score élevé. Retour à l'esquisse, montrer le hiscore, hiscore, deux-points, espace, plus point d'oiseau hiscore, montrer à 10, 30. Lancez-le, et c'est tout. Dans la vidéo suivante, je vais rendre le jeu plus difficile. Merci. 11. Touche finale: Une des choses que nous pouvons faire pour le rendre plus difficile est de faire bouger les tuyaux plus rapidement lorsque le score augmente. abord, créez une variable globale appelée Pipeed, et définissez-la sur 2. Maintenant, allez à la classe Pipe, et remplacez 2 par le Pipeed. De retour dans le croquis, nous augmenterons lentement le pipeed en utilisant le score de l'oiseau. Pipeed est égal à 2, plus le score de l'oiseau, divisé par 10. Vous pouvez le rendre plus rapide en abaissant ce nombre. Ensuite, nous allons geler le jeu quand il s'exécute pour la première fois. Ajoutez une variable globale, nommez-la geler. Affectez-le à true. Ensuite, chaque fois que le DoAction est appelé, nous dégelons le jeu. gel est égal à faux. Ensuite, dans la classe des oiseaux, nous ne devrions pas mettre à jour la position lorsque le jeu est gelé. Alors enveloppez-les dans l'instruction if, et demandez si elle ne gèle pas. Un autre endroit à ajouter, est dans la classe pipe, nous devons vérifier si le jeu se fige avant de mettre à jour la position x. Donc, ajoutez freeze est égal à false à l'instruction if, avec un opérateur and. Maintenant, quand nous commençons une partie, un jeu gèle d'abord. Cliquer dessus ou appuyer sur une touche d'espace va le dégeler. Sur l'écran gelé, nous pourrions montrer une instruction sur la façon de jouer au jeu. Donc, à la fin de la fonction de dessin, demandez si le gel est vrai, puis ajoutez un texte. Appuyez sur la touche Espace ou cliquez pour sauter. x représente la moitié de la largeur. y est 70% de la hauteur de l'écran. Faites-le centré en utilisant TextAlign, CENTER, CENTER, et c'est tout. Dans la vidéo suivante, nous allons parler de la façon de le partager. Merci. 12. PARTAGER: Quand vous êtes satisfait du résultat, partageons la partie finale. Pour obtenir un lien partageable, assurez-vous d'abord que vous vous êtes connecté et que le projet est enregistré. Ensuite, allez dans Fichier -> Partager. Utilisez le lien plein écran si vous voulez que d'autres personnes voient le code derrière lui. Utilisez le lien présent pour obtenir un jeu autonome. Ou un iFrame intégré pour l'ajouter à votre site Web. Pour en savoir plus sur p5.js, consultez mes derniers cours dans mon profil. S' il vous plaît laissez-moi savoir dans la section commentaire, quels sujets vous voulez en savoir plus. Merci.