Apprenez dans ce cours vidéo à créer des jeux avec la programmation orientée objet.
Ce cours est illustré avec le jeu Pacman créé en JavaScript.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer des classes en Programmation Orientée Objet avec JavaScript et les jeux pour mobiles
Bonjour et bienvenu sur Développement Facile.
Voici un nouveau cours, donc dans le cours précédent vous avez appris à créer le jeu pacman que vous voyez à l’écran et je ne sais pas si vous avez fait attention aux infos que je vous ai données dans le cours précédent, mais justement il y a une petite subtilité, une astuce, une technique JavaScript sur laquelle je voudrais revenir c’est-à-dire c’est la création des classes.
Le jeu pacman si vous avez regardé le code source d’origine, tout est dans le même fichier et là tout a été séparé en utilisant la méthode développement facile, mais il n’y a pas que ça, il y a quelque chose de très intéressant, c’est qu’on utilise un système de classe pacman.init donc regardez pacman est déclaré ici, c’est une variable que l’on déclare, et dans une variable en fait sans simule, on créé, là c’est l’équivalent, si c’était par exemple une classe avec une méthode statique, donc une classe statique que l’on appelle pour démarrer le jeu ici, il y a là, ce serait des propriétés que l’on appelle tout simplement, il y a la propriété init donc qu’on appelle pacman.init en transmettant des paramètres donc la classe pacman, la classe statique pacman.init à laquelle on a transmis des paramètres est ce qui permet justement de lancer le jeu et ce n’est pas tout, regardez on a déclaré des instances de classe et qu’est-ce qu’on fait ?
On instancie des classe, on a créé des classe pacman.Audio, une classe qui est créée et ensuite si vous regardez par exemple map on réappelle juste derrière map.draw donc une méthode de la classe map et ce qui est très bien avec cette astuce JavaScript c’est que ça vous permet de simuler déjà la programmation orientée objet avec les classes, mais pas seulement, dans vos classes que vous allez créer, vous pouvez simuler des méthodes statiques donc accessibles de l’extérieur par les objets et également des méthodes privées et c’est là-dessus que je voulais revenir c’est qu’on arrive, en utilisant cette stratégie qui est enseignée dans la méthode développement facile, à créer une architecture d’application JavaScript très solide, très stable et ainsi ça vous permet de développer beaucoup plus rapidement, plus facilement, de travailler en équipe grâce à cette astuce.
Déjà la classe statique que vous initialisez, main, c’est comme si c’était l’équivalent de la classe main que l’on a lancée pour démarrer une application, on l’initialise et après vous avez des objets donc vous initialisez une classe et sur cet objet vous appelez la méthode draw, la méthode publique draw et je vous montrer comment créer des méthodes publiques, des méthodes privées pareil pour audio, l’instance de audio et vous appelez audio ici .load la méthode publique audio, donc comment créer une classe pacman donc ça pacman c’est une variable statique qui est déclarée en tout début juste ici comme un objet donc c’est un objet et dans cet objet, une propriété de l’objet pacman.audio c’est une propriété et là ont créé notre classe avec les propriétés de la classe on va mettre, et les différentes méthodes, fonction load, progresse, disable, et comment on les rends accessible ces méthodes, comment les rands publiques, en faisant un return, le nom de la méthode publique utilisée par l’extérieur et reliée à la fonction que ça va appeler dans pacman audio, dans la classe pacman audio donc là je pourrais utiliser un autre nom de méthode que load, par exemple load audio ici et donc faudrait que je modifie, ça c’est la méthode publique, dans init tout simplement que je mette load audio voilà, et donc si je recharge le jeu en mettant le debug pour vérifier que tout se passe bien, ça s’est bien passé load audio à fonctionné, et le jeu s’est lancé alors que, regardez si je ne renomme pas, si j’appelle load, il existe toujours et que je recharge, load audio, la méthode l’autre audio n’existe pas, ça génère une erreur bien évidemment.
Donc on va laisser load audio et voilà l’astuce qui vous permet très simplement de créer des méthodes publiques et ça appel load et si j’enlève encore mieux, si j’enlève la méthode load audio sera privée donc on ne peut pas l’appeler si on regarde le debug elle n’est pas à appelable, si vous mettez load tout simplement, on va mettre load parce que load existe ici bien évidemment load est présent ici, fonction load, mais vu que c’est une méthode privée elle n’est pas accessible, regardez la méthode n’est pas accessible tout simplement, donc pour bien la rendre publique il faut la remettre ici, voilà méthode load, on a rendu la méthode load publique et là tout ce passe bien le jeu se charge et c’est pareil pour tout, là on a la classe map pacman. Map égal les propriétés de la classe, que vous avez déclaré, les différentes méthodes qui sont tous déclarées ici et là ça renvoi les méthodes publiques de la classe tout simplement, si vous en enlevez une elle ne sera pas accessible de l’extérieur donc pour l’utiliser c’est toujours très simple, vous avez user et vous faites, vous instanciez new pacman.user en transmettant les paramètres, la classe user est ici, game et map, game complète level map et après vous faites .reset position et comme par hasard vous avez reset position ici qui appelle reset position qui est quelque part ici. Tout simplement vous avez par exemple sur la classe user.reset. qui est ici qui rappelle reset position évidemment dans une classe, une méthode peut rappeler une fonction de la classe donc ça simule vraiment, très efficace le langage objet, donc c’est une astuce vraiment très puissante que… C’est cadeau quoi, qui fait partit de la méthode développement facile donc pensez à déclarer une variable, un objet pacman, une propriété de l’objet, vous affectez une fonction comme ça, ça vous simule une classe, les propriétés de cette classe justement et les différentes méthodes et à la fin vous faites un return avec toutes les méthodes publiques accessibles de l’extérieur et lorsque vous voulez les utiliser, et bien vous déclarez tout simplement barre audio égale new pacman. Audio et après vous faites un new audio.load le nom de la méthode.
Retrouvez le code source d’exemple d’utilisation de la programmation orientée objet avec JavaScript sous cette vidéo, sous ce cours vidéo téléchargez le code source, si vous avez des questions posez les directement sous ce cours vidéo l’équipe développement facile vous répondra et si vous voulez aller vraiment beaucoup plus loin en développement d’applications, de jeux JavaScript, soit sur les Smartphones, les tablettes et le Web, juste au-dessus de ce cours il y a une bannière, un lien cliquable, cliquez sur ce lien, vous serez redirigé vers une deuxième vidéo qui vous expliquera dans le détail comment bénéficier des conseils des experts de l’équipe développement facile pour vous aider en cas de difficultés sur des codes sources d’exemples des cours, vous aider à progresser beaucoup plus rapidement, comment mettre en œuvre la programmation orientée objet dans votre développement JavaScript, comment mettre en œuvre la programmation événementielle, les fameux modèles de conception qui permet de multiplier par deux ou trois votre capacité de développement et surtout créer des architectures à la fois très solides pour vos applications et très simple à faire évoluer, de diminuer grandement les bugs, tout ça c’est dans la deuxième vidéo cliquez simplement sur la bannière, et on se retrouve tout de suite dans la deuxième vidéo à tout de suite.
[/ppmtoggle] [/ppmaccordion]
Télécharger le code JavaScript du jeu Pacman
Retrouvez le code source commenté du jeu Pacman modifié en programmation orientée objet
