Apprenez à réaliser le jeu Pacman avec HTML5 et le framework JavaScript Phaser
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer le jeu pacman avec HTML5 JavaScript en programmation orientée objet
Bonjour et bienvenu sur Développement Facile.
Alors comme d’habitude maintenant, vous commencez à connaître le framewrok Phaser de mieux en mieux, toutes ces possibilités donc pour créer vos jeux très rapidement, des jeux performants sur les mobiles, donc Smartphone, tablette et sur le Web. Si vous avez suivi l’émission « la programmation expliquée à ma copine » avec Sandrine, on avait commencé à vous expliquer comment adapter un jeu pour créer un Pacman, on était partie d’un exemple de code source et petit à petit avec Sandrine ont commençait à modifier le code source pour créer le jeu Pacman, il s’avère que le jeu Pacman fonctionne, il est créé donc ce n’est pas moi ni Sandrine qui avons écrit le code source entièrement, ce que j’ai fait, ce que je vous invite toujours à faire c’est de vous inspirer de code source d’experts, j’ai trouvé le code source en HTML 5 JavaScript du jeu Pacman et je l’ai adapté aux besoins que l’on avaient définis avec Sandrine et j’ai appliqué la méthode développement facile dessus, pour, déjà séparer le code en plusieurs fichiers JavaScript pour que ce soit plus facilement compréhensible, j’ai amélioré certaines fonctionnalités du jeu pour qu’il soit un plus intéressant pour l’utilisateur, je vous montre ça tout de suite et vous allez pouvoir en faire autant.
Ca c’est le jeu Pacman, quand vous le lancez, il y a la gestion du son, S là, pour couper le son, l’allumer, P pour mettre le jeu en pause tout simplement et le remettre, vous avez la zone de texte avec le fond blanc, la couleur, les sauts à la ligne automatique, donc ça dans un cours précédent vous avez découvert la fonction que j’ai réutilisée et adaptée, c’était en fait pour le jeu Pacman que j’en avais besoin car le texte est illisible et cette fonction permet de définir un fond de couleur sur le texte et de mettre le texte automatiquement à la ligne, et là, lancement j’ai appuyé sur L, lancement du jeu donc c’est le jeu Pacman tel que vous le connaissez avec les citrons, le fait que vous pouvez manger les fantômes et vous pouvez également perdre si par exemple, là je tombe sur un fantôme exprès, je vais perdre une vie, une vie de perdue donc là ça n’enregistre pas le son du jeu c’est fait pour, mais vous verrez quand vous testerez le jeu, vous aussi vous pourrez voir un petit peu la musique, voilà donc ça c’est le jeu Pacman qui a été défini avec Sandrine pour le mode de fonctionnement dans l’émission « la programmation expliquée à ma copine », vous avez le score qui s’incrémente ici, à chaque fois que je mange des bonus, le score s’incrémente voilà, le fantôme me poursuit, il m’a attaqué, donc là le jeu est terminé, game over, on pourrait même rajouter si on le souhaite un message de game over, ce n’est pas très bien compliqué.
Comment ça se passe ?
Comme je vous l’ai dit vous séparez votre jeu en plusieurs fichiers JavaScript, à l’origine de code source tout était contenu dans le fichier Pacman.gs et moi j’ai créé des fichiers indépendants avec les classes pour gérer les fantômes, l’utilisateur, la carte et l’audio et Pacman pour lancer le jeu et main ça initialise tout ce qui est nécessaire. On arrive dans main, dès que le DOM est chargé qu’est-ce qu’on fait ? Avec le frameowrk Modernise on vérifie les capacités du navigateur donc Modernise c’est un Framework qui permet de vérifier toutes les capacités d’un navigateur, est ce qu’il supporte les fichiers MP3 ? Les fichiers OG, quelle fonctionnalité HTML 5 JavaScript il supporte ? Voilà un petit peu à quoi sert le framework Modernise, par exemple là on va l’utiliser donc est-ce qu’il supporte les fichiers MP3 OG, le stockage, l’audio, la balise canvas, sinon on affiche à l’utilisateur désolé, on affiche un message, un navigateur plus récent est nécessaire, sinon on initialise la classe Pacman donc ça c’est la gestion des multi lignes du texte multi ligne, vous avez vu dans un cours précédent comment afficher un texte en HTML 5 sur plusieurs lignes avec la gestion des sauts de ligne et la gestion d’un fond de couleur sur votre texte, tout simplement ici un fond blanc, donc Pacman comment ça se passe ?
Le jeu est entièrement commenté, les variables globales, la variable Pacman, la variable globale Pacman, un objet, avec les propriétés, l’objet Pacman que l’on initialise avec différentes méthodes tout simplement, il y a la méthode init celle que l’on appelle ici, init, on lui transmet une div, donc la div id game div, cette div là, qui est ici, ou on va faire apparaître dans cette div justement le jeu donc je recherche, voilà et donc là on va initier le jeu sur la div, le wrapper qui est passé et route c’est tout simplement le répertoire de base. On définit la largeur, la hauteur du canvas, on récupère le contexte 2D, ça va vous permettre d’écrire notre texte et on initialise les différentes classes, j’appelle ça des classes, c’est plus des objets avec JavaScript on simule un peu le langage objet, la programmation orientée objet, donc on initialise nos différentes classes et regardez on appelle une méthode draw sur cette classe tout simplement, audio on va appeler une méthode audio.load et on charge les différents fichiers audio, une fois qu’ils sont tous chargés, on active les événements sur les touches pressées et relâchées tout simplement, et on a une boucle sur la fonction main qui est ici, pour gérer les différents états du jeu, soit on est en pause, soit on joue, on coupe le son, tout est géré ici, après vous avez vos différentes classes, la classe audio donc on définit fonctions et avec les méthodes que l’on appelle directement sur notre classe audio ce que je vous ai montré tout à l’heure, avec init ou vous créez votre objet audio et audio.load vous avez un load ici tout simplement et là vous renvoyez les méthodes de la classe donc ça va permettre quand la classe est créée ici on fait un new Pacman audio, et bien d’appeler les méthodes.load, ça va l’associer directement à la fonction load qui est ici, et donc là vous le faites pour toutes les méthodes publiques on va dire, c’est des méthodes publiques, les méthodes privées que vous ne voulez pas qu’elles soient appelées d’extérieur dans votre classe vous ne les mettez pas dans le return tout simplement, si j’enlève ça le fichier son ne sera plus chargé et ça va générer des erreurs de debug, load is not a fonction, voilà tout simplement, parce que j’ai mis la méthode load en privée si on résonne en programmation orientée objet, ça c’est une astuce que vous pouvez utiliser, l’avantage c’est que dans un seul fichier JS vous gérez tout votre audio, dans un autre fichier JS vous gérez le fantôme, le gosse, donc avec toutes les méthodes des fantômes donc là vous avez la liste des méthodes des fantômes, voilà donc j’ai commenté tout le code, ce sera très facile pour vous de modifier ce jeu Pacman, de le réutiliser, de modifier la carte, d’adapter la carte, les graphismes à votre environnement par exemple la carte est créée ici, construction de la carte, les variables du jeu, le nombre de biscuits, les blocs, les murs, création des murs, tout est ici donc à vous, vous avez même une méthode clone pour cloner un objet donc notamment les fantômes pour les cloner, là on doit appeler la méthode clone quelque part, on l’appelle où la méthode clone… Je l’ai vu je ne sais plus où, il y a énormément de code voilà ici, pour redéfinir une nouvelle carte, lorsqu’on la reset, tout simplement.
Codes sources pouvant VOUS intéresser :
Là vous définissez, pareil, une classe pour l’utilisateur avec les méthodes disponibles dans cette classe, quand il perd une vie, quand il gagne une vie, mettre à jour le score, l’appui sur les touches, je vous ai commenté tout le code source, je l’ai organisé pour qu’il soit compréhensible dans différents fichiers, imaginez, vous définissez vos cartes ici dans la le fichier Pacman global qui sert à lancer le jeu, justement initialiser toutes les classes ici, là on lance le jeu, je vais vous mettre c’est lancement de la partie, tout simplement, là on initialise toutes les classes, initialise toutes les classes du jeu, et ensuite on appelle par exemple la méthode draw, si on regarde dans, on est sur la map, la classe map on recherche, on tombe sur la méthode draw qui est ici, qui elle-même appelle des fonctions draw qui sont ici si vous regardez draw while pour dessiner les murs en fait, voilà ici, elle est appelée.
Cette méthode avec la méthode développement facile, je vous ai mis le code source, vous pourrez aller télécharger le code source du jeu d’origine tout est dans le fichier Pacman .js, donc vous avez un fichier de 7000 lignes, en appliquant la méthode développement facile vous apprenez à créer des classes par fonctionnalités et par fichiers, là on gère uniquement l’audio, on gère uniquement les fantômes, on gère uniquement le héros Pacman, la on gère uniquement la construction de la carte, et là on gère le lancement du jeu, la classe main, ça présente le grand avantage d’organiser votre code et de pouvoir le faire évoluer très simplement. Là, vous, vous avez la possibilité très simplement, changer la couleur du héros, changer le texte, changer la carte c’est d’une simplicité, je ne vais pas dire enfantine mais ça devient beaucoup mais alors beaucoup plus simple, vous pouvez également travailler en équipe sans aucun problème, c’est vraiment royal.
Maintenant en fait ça à vous de jouer, à vous de créer ce jeu Pacman, de l’adapter à vos besoins sous ce cours vidéo vous trouverez le code source complet en téléchargement, si vous avez des questions en telle ou telle question sur ce code source pour l’adapter à vos besoins, les graphismes, posez les directement sous ce cours vidéo l’équipe développement facile vous répondra avec plaisir et maintenant si vous voulez aller beaucoup plus loin juste au dessus de ce cours il y a une bannière, une image un lien cliquable, il suffit de cliquer dessus et dans la deuxième vidéo vous avez la possibilité de bénéficier d’un suivi personnalisé par l’équipe développement facile, je vous le répète équipe développement facile c’est des experts en développement dans plusieurs langages, le Web, l’assembleur, le C, JavaScript, HTML, PHP, MySQL, ect, qui ont plus de 10 ans d’expérience dans ces différents langages, qui ont travaillés dans plusieurs sociétés, qui seront à même de répondre à toutes vos questions que vous posez pour utiliser tel ou tel code source dans votre projet, vous allez apprendre également à utiliser, créer des applications, des jeux très performants, très rapidement avec une architecture de bases solides, ce qui va vous éviter 90 % debug, vous allez pas les avoir simplement et vous aurez bien évidemment des bugs on a toujours debug pendant développement mais il sera très facile grâce à la méthode développement facile de les résoudre, de trouver d’où provient le bug en deux temps trois mouvements, tout est dans la deuxième vidéo, cliquez simplement sur l’image, sur le lien cliquable, la bannière au-dessus de cette vidéo, je vous explique tout, je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle] [/ppmaccordion]
Télécharger le code JavaScript du jeu Pacman
Retrouvez le code source commenté du jeu Pacman avec les améliorations apportées
Téléchargement du code source jeu Pacman
Ajoutez et améliorez les fonctionnalités du jeu Pacman
Utilisez la zone commentaire pour partager les améliorations que vous aurez codé pour ce jeu