-
Apprenez raliser le jeu Pacman avec HTML5 et le framework
JavaScript Phaser Tout estdans la vido ci-dessous.
jQLeadBrite("#leadplayer_video_element_5500AB74ADE7D").leadplayer(false,
"eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTUwMEFCNzRBREU3RCIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkNvbW1lbnQgY3JcdTAwZTllciBsZSBqZXUgcGFjbWFuIGF2ZWMgSFRNTDUgSmF2YVNjcmlwdCBlbiBwcm9ncmFtbWF0aW9uIG9yaWVudFx1MDBlOWUgb2JqZXQgIiwiZGVzY3JpcHRpb24iOiJDb21tZW50IGNyXHUwMGU5ZXIgbGUgamV1IHBhY21hbiBhdmVjIEhUTUw1IEphdmFTY3JpcHQgZW4gcHJvZ3JhbW1hdGlvbiBvcmllbnRcdTAwZTllIG9iamV0ICIsImF1dG9wbGF5IjpmYWxzZSwic2hvd190aW1lbGluZSI6dHJ1ZSwiZW5hYmxlX2hkIjp0cnVlLCJvcHQiOmZhbHNlLCJjdGEiOnsidGltZSI6ImVuZCIsImJ0ZXh0IjoiQ2xpcXVleiBpY2kgcG91ciBkXHUwMGU5Y291dnJpciBsZSBHdWlkZSBsZSBwbHVzIG1pbnV0aWV1eCBldCBjb21wbGV0IHN1ciBKYXZhU2NyaXB0ICEiLCJ1cmwiOiJodHRwOlwvXC93d3cuZm9ybWF0aW9uLWphdmFzY3JpcHQudHZcLyIsImF1dG9fZm9sbG93IjpmYWxzZSwibmV3X3dpbmRvdyI6ZmFsc2V9LCJ5bSI6ImZ1cUZjSlphXzRZIn0=");
Afficher le texte de la vido
Comment crer le jeu pacman avec HTML5 JavaScript en
programmation oriente objetBonjour et bienvenu sur Dveloppement
Facile. Alors comme d'habitude maintenant, vouscommencez connatre
le framewrok Phaser de mieux en mieux, toutes ces possibilits
doncpour crer vos jeux trs rapidement, des jeux performants sur les
mobiles, donc Smartphone,tablette et sur le Web. Si vous avez suivi
l'mission la programmation explique ma copine avec Sandrine, on
avait commenc vous expliquer comment adapter un jeu pour crer
unPacman, on tait partie d'un exemple de code source et petit petit
avec Sandrine ontcommenait modifier le code source pour crer le jeu
Pacman, il s'avre que le jeu Pacmanfonctionne, il est cr donc ce
n'est pas moi ni Sandrine qui avons crit le code sourceentirement,
ce que j'ai fait, ce que je vous invite toujours faire cest de vous
inspirer de codesource dexperts, j'ai trouv le code source en HTML
5 JavaScript du jeu Pacman et je laiadapt aux besoins que l'on
avaient dfinis avec Sandrine et j'ai appliqu la mthodedveloppement
facile dessus, pour, dj sparer le code en plusieurs fichiers
JavaScript pourque ce soit plus facilement comprhensible, j'ai
amlior certaines fonctionnalits du jeu pourqu'il soit un plus
intressant pour l'utilisateur, je vous montre a tout de suite et
vous allezpouvoir en faire autant. Ca cest le jeu Pacman, quand
vous le lancez, il y a la gestion du son,
1 / 4
-
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,
donca dans un cours prcdent vous avez dcouvert la fonction que j'ai
rutilise et adapte,ctait en fait pour le jeu Pacman que jen avais
besoin car le texte est illisible et cette fonctionpermet de dfinir
un fond de couleur sur le texte et de mettre le texte
automatiquement laligne, et l, lancement jai appuy sur L, lancement
du jeu donc c'est le jeu Pacman tel quevous le connaissez avec les
citrons, le fait que vous pouvez manger les fantmes et vouspouvez
galement perdre si par exemple, l je tombe sur un fantme exprs, je
vais perdre unevie, une vie de perdue donc l a n'enregistre pas le
son du jeu c'est fait pour, mais vous verrezquand vous testerez le
jeu, vous aussi vous pourrez voir un petit peu la musique, voil
donc ac'est le jeu Pacman qui a t dfini avec Sandrine pour le mode
de fonctionnement dansl'mission la programmation explique ma copine
, vous avez le score qui s'incrmente ici, chaque fois que je mange
des bonus, le score sincrmente voil, le fantme me poursuit, ilm'a
attaqu, donc l le jeu est termin, game over, on pourrait mme
rajouter si on le souhaiteun message de game over, ce n'est pas trs
bien compliqu. Comment a se passe ? Commeje vous l'ai dit vous
sparez votre jeu en plusieurs fichiers JavaScript, l'origine de
code sourcetout tait contenu dans le fichier Pacman.gs et moi jai
cr des fichiers indpendants avec lesclasses pour grer les fantmes,
l'utilisateur, la carte et l'audio et Pacman pour lancer le jeu
etmain a initialise tout ce qui est ncessaire. On arrive dans main,
ds que le DOM est chargqu'est-ce qu'on fait ? Avec le frameowrk
Modernise on vrifie les capacits du navigateur doncModernise c'est
un Framework qui permet de vrifier toutes les capacits d'un
navigateur, estce quil supporte les fichiers MP3 ? Les fichiers OG,
quelle fonctionnalit HTML 5 JavaScript ilsupporte ? Voil un petit
peu quoi sert le framework Modernise, par exemple l on va
l'utiliserdonc est-ce quil supporte les fichiers MP3 OG, le
stockage, l'audio, la balise canvas, sinon onaffiche l'utilisateur
dsol, on affiche un message, un navigateur plus rcent est
ncessaire,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 prcdent comment afficher un texte en HTML 5 sur
plusieurslignes avec la gestion des sauts de ligne et la gestion
d'un fond de couleur sur votre texte, toutsimplement ici un fond
blanc, donc Pacman comment a se passe ? Le jeu est
entirementcomment, les variables globales, la variable Pacman, la
variable globale Pacman, un objet,avec les proprits, l'objet Pacman
que l'on initialise avec diffrentes mthodes toutsimplement, il y a
la mthode init celle que l'on appelle ici, init, on lui transmet
une div, donc ladiv id game div, cette div l, qui est ici, ou on va
faire apparatre dans cette div justement le jeudonc je recherche,
voil et donc l on va initier le jeu sur la div, le wrapper qui est
pass etroute cest tout simplement le rpertoire de base. On dfinit
la largeur, la hauteur du canvas, onrcupre le contexte 2D, a va
vous permettre d'crire notre texte et on initialise les
diffrentesclasses, jappelle a des classes, cest plus des objets
avec JavaScript on simule un peu lelangage objet, la programmation
oriente objet, donc on initialise nos diffrentes classes etregardez
on appelle une mthode draw sur cette classe tout simplement, audio
on va appelerune mthode audio.load et on charge les diffrents
fichiers audio, une fois quils sont touschargs, on active les
vnements sur les touches presses et relches tout simplement, eton a
une boucle sur la fonction main qui est ici, pour grer les
diffrents tats du jeu, soit on esten pause, soit on joue, on coupe
le son, tout est gr ici, aprs vous avez vos diffrentesclasses, la
classe audio donc on dfinit fonctions et avec les mthodes que l'on
appelledirectement sur notre classe audio ce que je vous ai montr
tout l'heure, avec init ou vouscrez votre objet audio et audio.load
vous avez un load ici tout simplement et l vous renvoyez
2 / 4
-
les mthodes de la classe donc a va permettre quand la classe est
cre ici on fait un newPacman audio, et bien d'appeler les
mthodes.load, a va l'associer directement la fonctionload qui est
ici, et donc l vous le faites pour toutes les mthodes publiques on
va dire, cestdes mthodes publiques, les mthodes prives que vous ne
voulez pas quelles soientappeles d'extrieur dans votre classe vous
ne les mettez pas dans le return tout simplement,si j'enlve a le
fichier son ne sera plus charg et a va gnrer des erreurs de debug,
load isnot a fonction, voil tout simplement, parce que j'ai mis la
mthode load en prive si on rsonneen programmation oriente objet, a
cest une astuce que vous pouvez utiliser, l'avantagecest que dans
un seul fichier JS vous grez tout votre audio, dans un autre
fichier JS vousgrez le fantme, le gosse, donc avec toutes les
mthodes des fantmes donc l vous avez laliste des mthodes des
fantmes, voil donc j'ai comment tout le code, ce sera trs facile
pourvous de modifier ce jeu Pacman, de le rutiliser, de modifier la
carte, d'adapter la carte, lesgraphismes votre environnement par
exemple la carte est cre ici, construction de la carte,les
variables du jeu, le nombre de biscuits, les blocs, les murs,
cration des murs, tout est icidonc vous, vous avez mme une mthode
clone pour cloner un objet donc notamment lesfantmes pour les
cloner, l on doit appeler la mthode clone quelque part, on
l'appelle o lamthode clone Je l'ai vu je ne sais plus o, il y a
normment de code voil ici, pour redfinirune nouvelle carte,
lorsqu'on la reset, tout simplement. L vous dfinissez, pareil, une
classepour l'utilisateur avec les mthodes disponibles dans cette
classe, quand il perd une vie, quandil gagne une vie, mettre jour
le score, l'appui sur les touches, je vous ai comment tout lecode
source, je lai organis pour quil soit comprhensible dans diffrents
fichiers, imaginez,vous dfinissez vos cartes ici dans la le fichier
Pacman global qui sert lancer le jeu, justementinitialiser toutes
les classes ici, l on lance le jeu, je vais vous mettre cest
lancement de lapartie, tout simplement, l on initialise toutes les
classes, initialise toutes les classes du jeu, etensuite on appelle
par exemple la mthode draw, si on regarde dans, on est sur la map,
laclasse map on recherche, on tombe sur la mthode draw qui est ici,
qui elle-mme appelle desfonctions draw qui sont ici si vous
regardez draw while pour dessiner les murs en fait, voil ici,elle
est appele. Cette mthode avec la mthode dveloppement facile, je
vous ai mis le codesource, vous pourrez aller tlcharger le code
source du jeu d'origine tout est dans le fichierPacman .js, donc
vous avez un fichier de 7000 lignes, en appliquant la mthode
dveloppementfacile vous apprenez crer des classes par
fonctionnalits et par fichiers, l on greuniquement l'audio, on gre
uniquement les fantmes, on gre uniquement le hros Pacman, laon gre
uniquement la construction de la carte, et l on gre le lancement du
jeu, la classemain, a prsente le grand avantage d'organiser votre
code et de pouvoir le faire voluer trssimplement. L, vous, vous
avez la possibilit trs simplement, changer la couleur du
hros,changer le texte, changer la carte c'est d'une simplicit, je
ne vais pas dire enfantine mais adevient beaucoup mais alors
beaucoup plus simple, vous pouvez galement travailler enquipe sans
aucun problme, c'est vraiment royal. Maintenant en fait a vous de
jouer, vousde crer ce jeu Pacman, de l'adapter vos besoins sous ce
cours vido vous trouverez le codesource complet en tlchargement, si
vous avez des questions en telle ou telle question sur cecode
source pour l'adapter vos besoins, les graphismes, posez les
directement sous ce coursvido l'quipe dveloppement facile vous
rpondra avec plaisir et maintenant si vous voulezaller beaucoup
plus loin juste au dessus de ce cours il y a une bannire, une image
un liencliquable, il suffit de cliquer dessus et dans la deuxime
vido vous avez la possibilit debnficier d'un suivi personnalis par
l'quipe dveloppement facile, je vous le rpte quipedveloppement
facile c'est des experts en dveloppement dans plusieurs langages,
le Web,
3 / 4
-
l'assembleur, le C, JavaScript, HTML, PHP, MySQL, ect, qui ont
plus de 10 ans d'expriencedans ces diffrents langages, qui ont
travaills dans plusieurs socits, qui seront mme derpondre toutes
vos questions que vous posez pour utiliser tel ou tel code source
dans votreprojet, vous allez apprendre galement utiliser, crer des
applications, des jeux trsperformants, trs 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 atoujours debug pendant dveloppement mais il sera trs
facile grce la mthodedveloppement facile de les rsoudre, de trouver
d'o provient le bug en deux temps troismouvements, tout est dans la
deuxime vido, cliquez simplement sur l'image, sur le liencliquable,
la bannire au-dessus de cette vido, je vous explique tout, je vous
dis tout de suitedans la deuxime vido.
Tlcharger le code JavaScript du jeu Pacman
Retrouvez le code source comment du jeu Pacman avec les
amliorations apportes
Downloads
jeu Pacman
Code source comment du jeu Pacman ralis en Programmation Oriente
Objet avecJavaScript. Archive contenant les fichiers HTML5, CSS et
JavaScript
Ajoutez et amliorez les fonctionnalits du jeu Pacman
Utilisez la zone commentaire pour partager les amliorations que
vous aurez cod pour cejeuComment crer le jeu pacman avec HTML5
JavaScript en programmation oriente objet
Powered by TCPDF (www.tcpdf.org)
4 / 4
http://www.programmation-facile.com/wp-content/uploads/2015/03/01-jeu-pacman.ziphttp://www.programmation-facile.com/wp-content/uploads/2015/03/01-jeu-pacman.ziphttp://www.programmation-facile.com/comment-creer-jeu-pacman-avec-html5-javascript-programmation-orientee-objet/http://www.tcpdf.org
