Développez le jeu Flappy Bird avec JavaScript HTML5 et le Framework Phaser

C’est parti, à vous de jouer avec le Framework JavaScript Phaser et le développement d’un premier jeu : Flappy Bird.

Après une première introduction au développement du jeu dans la vidéo précédente, vous allez cette apprendre à le développer entièrement.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Développez le jeu Flappy Bird avec JavaScript HTML5 et le Framework Phaser

Bonjour et bienvenu sur développement facile.

Dans la dernière vidéo vous avez découvert le Framework Phaser pour créer des jeux très performants que ce soit pour les mobiles, donc tablettes, Smartphones ou ordinateur de bureau. C’est un framework JavaScript qui vous permet d’utiliser tout le potentiel de HTML 5, WebGL, API Canvas, je vous ai présenté rapidement toutes ses fonctionnalités et donc aujourd’hui vous allez apprendre à créer ce jeu Flappy Bird d’une façon, vous allez voir, très simple grâce à ce Framework qui vous permet donc de créer le même style de jeu.

Comment ça se passe ? donc vu je vous ai expliqué un peu la dernière fois je vais aller très, très, vite sur la page HTML vous avez le main donc le fichier principal du jeu à inclure, avec la gestion du cache, c’est-à-dire vous désactivez le cache de votre navigateur uniquement pendant vous êtes en mode développement une fois que votre jeu sera en production vous pourrez mettre cette ligne la en profitant du cache du navigateur. Vous avez le framework Phaser à inclure et une div juste une simple div, à créer même pas besoin d’utiliser Canva rien du tout non une simple div.

Et après comment ça se passe ? c’est-à-dire que dès que le DOM est chargé et bien ça appelle la fonction main, la fonction principale vous créez votre zone de jeu en définissant la largeur et la hauteur et l’ID du div que vous allez utiliser, tout simplement, c’est aussi simple que ça. Et donc après pas un fois que votre votre zone de jeu est créé vous avez var game où vous allez construire le moteur du jeu main stage qui va contenir toutes les fonctions du jeu et juste après vous ajoutez main stage dans votre jeu, donc tout le moteur du jeu dans game dans l’objet game et après vous appelez la fonction start main qui va lancer votre jeu. La construction de votre jeu, chargement des éléments, tout ce qui est nécessaire pour que votre jeu fonctionne donc déjà vous avez un pré-chargement des éléments du jeu vous définissez la couleur de fond et c’est le même principe que pour la création du jeu Pong où vous créez un Manifest avec tous les éléments à charger que ce soit du son ou des images, et bien là, c’est la même chose vous créer une sorte de Manifest donc une pile de chargements vous chargez des images, là, un audio, vous donnez un identifiant à l’audio pour pouvoir l’utiliser dans votre jeu après il est utilisé ici jumpSound.play,  ici on récupère l’audio à partir son identifiant et on l’affecte à une variable, un objet son que l’on peut jouer arrêter etc. et vous avez les images, pareil que vous affectez à un objet et vous pouvez agir sur cet objet faire des tweens, le déplacer et gérer la gravité etc. etc. Une fois que le préload est fait il y a la méthode create qui est appelé pour mettre en place toute la scène du jeu tous les graphismes donc le moteur de physique ensuite les tuyaux donc vous créez des groupes, la gestion du héros, pareille en activant les collisions physiques sur le héros. Donc vous avez tout ce système du jeu qui est mise en place vous mettez en place des écouteurs par exemple la barre espace du clavier donc Phaser.Keyboard.SPACEBAR que vous écoutez et à chaque fois que le joueur appui sur la barre espace vous appeler la fonction jump qui fait sauter le héros tout simplement.

Il y a aussi également un écouteur sur la souris, soit vous appuyez sur la touche espace du clavier soit sur le clic gauche de la souris de la même façon onDown dès que le clic gauche de la souris est appuyez, vous appelez la fonction jump.

Gestion du score du joueur et là, l’objet son que je vous ai expliqué tout à l’heure ensuite vous avez une fonction qui est appelé en continu pendant le jeu donc update le Framework Phaser qui gère cet appel en continu donc si le joueur est mort bien évidemment on redémarre le jeu ça ne sert à rien de continuer le reste donc on redémarre le jeu, on fait un start main fait comme ici on lance le jeu tout simplement. Sinon si le joueur n’est pas mort il y a une gestion de la collision, dès qu’il y a une collisions entre le héros et un tuyau on appelle la fonction hitPipe ici, donc la fonction hitPipe : si le héros est déjà mort on peut sortir par contre s’il est toujours en vie on le met mort tout simplement, on enlève le timer donc l’apparition de nouveaux tuyaux vous avait un timer qui est définie ici c’est-à-dire au moment de create, toutes les 1500 ms toutes les une seconde et demie on ajoute des nouveaux tuyaux donc c’est appelé en continu cette fonction addRowPipe ici est appelé en continu donc ça créer des nouveaux tuyaux position et taille en fonction et donc ici on ajoute un nouveau tuyau avec différents paramètres, voilà donc c’est grâce tout ça, c’est grâce aux timer mais évidemment quand le joueur est mort ici, on enlève le timer, ça ne sert à rien de faire apparaître de nouveaux tuyaux, on arrête pas le mouvement sur les tuyaux c’est-à-dire à chaque fois ils se déplaçaient, si on regarde le jeu y’a déplacement des tuyaux ici donc bah voilà ça s’arrête, regardez si je meurs, stop tout s’arrête. Voilà alors j’en étais où ? voilà, la fonction ou il y a une collision et voilà collisions ça finalement après il va revenir là et ça va redémarrer le jeu tout simplement. Et la dans la méthode update si le joueur sort de l’écran c’est-à-dire inWorld = false, il n’est pas dans le dans le monde si vous sortez de l’écran, ça stop le jeu instantanément. Donc je vais essayer de passer le premier tuyau je ne suis pas très fort à ce jeu, hop, le jeu et stopper immédiatement, on redémarre le jeu. Donc la collision ça fait hitPipe rapidement le joueur est mort en arrête tout. Ensuite sinon si le joueur est toujours dans l’écran s’il n’y a pas eu de collisions et bien en fait bouger une rotation du héros donc ça donne ceci, une petite rotation du héros avec un effet sur l’angle c’est-à-dire rotation du Héros plus lente à partir d’une certaine valeur donc ça c’est la gestion du saut donc le saut est appelé à chaque fois que l’utilisateur le joueur appuie sur la barre espace ou sur le clic de la souris, donc on fait sauter, donc évidemment si il est mort ça ne sert à rien donc on sort de la fonction sinon on rajoute des effets de vélocité enfin de gravité on va dire pour faire bouger l’oiseau donc voilà, hop il grimpe, tout simplement, on rajoute un effet on met une tween sur l’angle donc l’angle est à moins 20 c’est pour ça que sur l’oiseau ça fait un effet -20° en rotation donc un petit effet de tween donc c’est une tween vraiment très rapide vous avez reçu un cours il y a quelques jours, quelques semaines sur les tween,  les tween sur le héros tout avec un angle de moins 20 tout ça en 100 ms tout ça point start pour démarrer la tween et vu que la fonction jump a été appelé on fait un this.jumpSound.play(), on joue le son jump donc si on remonte le son jump correspond à l’audio identifier par jump c’est jump.wav tout simplement donc c’est aussi simple que ça pour développer ce jeu, il n’y a rien de bien compliqué et après, voilà, ça c’est la collision je vous l’ai expliqué redémarrer le jeu création des tuyaux selon les paramètres voilà vous avez créé votre jeu Flappy Bird, bon évidemment c’est une version simplifiée, il ne  contient pas toutes les fonctionnalités mais ça permet de de comprendre grâce à l’utilisation du Framework Phaser, ça simplifie énormément la création d’un jeu avec très rapidement quelques lignes de code vous êtes capables de créer un jeu qui est performant qui s’exécute sur les mobiles sur les Smartphones. Par exemple, comme exercice ça pourrait être intéressant que vous rajoutiez dans ce jeu la gestion du touch c’est à dire si c’est sur un Smartphone ou une tablette que l’utilisateur, il appuie sur l’écran et que justement ça fasse sauter le joueur donc vous pouvez rajouter cette fonctionnalité ça vous fera un excellent exercice.

Comme d’habitude vous retrouverez le code source en téléchargement complet sous cette vidéo sous ce cours vidéo.  Si vous avez des questions posez-les également sous ce cours vidéo, l’équipe développement facile vous répondra pour vous aider à résoudre les problèmes que vous pourriez rencontrer avec la reprise, la création de jeux avec le Framework Phaser et si vous voulez aller beaucoup plus loin avec le Framework Phaser avec la création de jeux et d’applications HTML cinq performantes que ce soit pour Smartphones, tablettes, ordinateur justes au-dessus de cette vidéo il y a une bannière en fait cliquer ici pour lancer la deuxième vidéo en cliquant là, vous allez directement accéder à une deuxième vidéo qui va vous expliquer de A à Z comment profiter de toutes les dernières avancées avec HTML 5 avec JavaScript avec les différents Framework comment utiliser ces Frameworks pour créer des jeux performants qui soient aussi bien performantes sur mobile donc sur Smartphones, sur tablettes ou sur ordinateur de bureau, toujours compatible avec la majorité des navigateurs. Il y aura l’équipe développement facile pour vous soutenir pour répondre à toutes vos questions pour vous aider en cas de difficultés dans la création de vos jeux et de vos applications donc je vous explique vraiment tout dans le détail dans la deuxième vidéo pour cela il suffit de cliquer juste au-dessus ce cours vidéo il y a une bannière cliquez ici pour lancer la deuxième vidéo donc un lien, vous cliquez dessus et je vous explique vraiment tout de A à Z dans la deuxième vidéo comment vous allez créer des jeux et des applications très performant avec HTML 5 et JavaScript pour les mobiles et les ordinateurs. Je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle] [/ppmaccordion]

Retrouvez ici le lien vers le site officiel du framework Phaser

Cliquez ici pour récupérer le framework Phaser

Télécharger le code source du jeu Flappy Bird

Retrouvez le code source commenté du jeu Flappy Bird écrit en JavaScript avec le framework Phaser

Que pensez vous du framework Phaser ?

Utilisez la zone commentaire pour nous dire ce que vous pensez du framework Phaser