Développez un jeu de plateforme simple avec le Framework Phaser et l’API Canvas

Dans ce nouveau cours pour développer un jeu de plateforme simple en JavaScript, apprenez à gérer les périphériques d’entrés/sortis comme le clavier ou la souris.

Découvrez également la création de niveau complètement aléatoire.

Tout est dans la vidéo ci-dessous.

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

Développez un jeu de plateforme simple avec le Framework Phaser et l’API Canvas

Bonjour à tous et bienvenu sur Développement Facile.

Vous allez continuer à découvrir l’utilisation du Framework JavaScript HTML Phaser qui est vraiment très pratique, qui permet de créer très simplement et très rapidement des jeux pour les mobiles, les tablettes, les Smartphones, les ordinateurs, donc cette fois à travers un exemple tout simple, ça va vous permettre de découvrir les interactions avec la souris, le clavier, là par exemple j’appuie sur la touche espace pour sauter, c’est pas facile de parler en même temps et de gérer le jeu donc le fonctionnement de déplacement en continu d’un objet et la gestion du saut avec un système de création de niveau complètement aléatoirement, donc c’est que vous allez apprendre à faire.

Alors comme d’habitude vous avez le fameux fichier HTML 5, avec les balises HTML 5, voilà pensez à inclure le framework Phaser, à désactiver le cache temporairement pendant que vous êtes en développement après bien évidemment vous pourrez le réactiver sur votre fichier JavaScript de cette façon-là, c’est tout ce qu’il y a à faire et pensez à avoir une div juste une simple div avec un identifiant c’est là ou l’API canvas va être utilisée par le Framework phaser tout simplement. Alors comment ça se passe ? Vous avez vu dans un des cours précédent le fonctionnement de transformation d’un jeu en mode classe, en mode objets, avec la méthode développement facile, et là des jeux simples. Les cours qui vont arriver je vais rester le plus simple possible pour vous expliquer le principe de fonctionnement phaser et après ce qui veulent aller plus loin j’ai créé une formation jeux experts en jeux HTML 5 JavaScript ou je vous enseigne ma méthode pour utiliser le développement objet, les modèles de conceptions avec le framework phaser, le développement de jeux JavaScript, donc ça j’y reviendrais un peu plus tard, je préfère vous expliquer le fonctionnement de phaser à travers des exemples très simples, très basiques donc c’est ici en fait c’est commenté donc c’est pour ça que je vais aller assez vite dans l’explication du jeu pour aller sur ce qui le plus important, c’est-à-dire le déroulement du jeu, la gestion des clics de souris, du clavier, là vous déclarez en fait tout pour vos variables qui sont utilisées dans l’application donc j’ai mis les commentaires donc c’est très simple, un tableau de valeurs, conversion au 1° radiant, la rotation du saut, la hauteur du saut, l’ampleur du saut en pixel tout est expliqué comme d’habitude vous avez votre fonction main qui est appelée une fois que le DOM est chargé et ensuite ça va lancer votre jeu tout simplement, donc voilà, vous récupérez la div, vous créez votre jeu, largeur, hauteur, phaser soit API canvas, soit sur le WebGL, vous redéfinissez les écouteurs parce que phaser il appelle la fonction preload create update régulièrement vous les redéfinissez localement dans votre fichier, on, preload, vous changez la couleur de fond du jeux, vous chargez les éléments graphiques de votre jeu avec un identifiant, ça va vous permettre d’y accéder pendant le jeu, tout simplement, vous activez les lois de la physique, c’est là ou vous allez créer la scène, tout le jeu, pareil j’ai vraiment tout commenté pour vous simplifier la vie au maximum donc tout est là, vous ajoutez le héros, créez les groupes d’ennemis, vous leurs donnez un emplacement aléatoire, les ennemi c’est ça, c’est des carrés, en fait c’est des images que vous avez utilisées, le aléatoire créé des du niveaux de jeu assez compliqué ma foi, surtout que c’est pas évident de parler en même temps et de vous expliquer, voilà que c’est la que vous activez les lois de la physique sur le joueur, sur les ennemis, quand vous avez la gravité quand le joueur saute et retombe sur le sol, ici quand je le fait sauter il retombe, voilà, tout simplement comme ceci, pareil pour les ennemis et là c’est là vous allez gérer dès que l’utilisateur appui sur une touche, donc il s’avère c’est les clics de la souris ici pour écouter le clic gauche de la souris on appelle la fonction jump qui fait sauter l’ennemi et j’ai rajouté la barre espace, vous pouvez appuyer sur la barre espace pour faire sauter le joueur et passer par-dessus les blocs, tout simplement. Soit avec le clic gauche de la souris, soit la barre d’espace, pareil jump, c’est appelé en continu pendant le jeu donc c’est-à-dire que ça fait défiler le joueur à une certaine vitesse en continu, vous avez, là si le héros a atteint le bord du sol, ici, le bord d’un niveau il va passer au niveau inférieur, je recharge avec un niveau plus facile, c’est vraiment pas facile, en tous les cas si il arrive au bout voilà là, je vais arriver au bout du niveau, je passe en dessous automatiquement ici, parce ça permet ensuite, vous sautez depuis le sol il retombe, rotation à zéro, on repositionne, on récupère l’image, la hauteur de l’image on la divise par deux pour positionner le joueur en Y, c’est à dire qu’il suive vraiment la ligne qui retombe au bon endroit si le héros saute, vous déterminez le nombre de frames, le nombre d’images pour son saut, la rotation vous le faites sauter tout simplement, vous vérifiez s’il y a une collision entre un héros et un ennemi vous avez on collision donc c’est que ça fait ici, collision, collision ça redémarre au début du niveau donc le saut c’est pour activer le saut, c’est-à-dire isJumping ici on fait sauter le héros, on collision qu’est-ce qui se passe ? On collision pas de rotation du héros, le joueur ne peut pas sauter et on place le joueur au début du niveau tout simplement, on repositionne X et Y sur le sol donc au début du niveau ici, voilà donc c’est vraiment un jeu très simple ce qui est plus important c’est la gestion des collisions, on appelle une fonction, on peut même lui passer des paramètres si on veut, là on efface un paramètre parce qu’on en a pas besoin et l’écoute donc activez les lois de la physique, la gravité, la collision, l’écoute de la clique gauche de la souris les clics gauches de la souris pour faire sauter ou la barre espace, c’est très simple d’écouter l’appui sur une touche soit du clavier, soit de la souris et d’appeler une fonction grâce aux Framework phaser un jeu relativement court, très simple donc création du niveau aléatoirement, positionnement des ennemis aléatoirement, l’ajout du héros toujours en ajoutant un Sprite, voilà donc c’est un petit peu pour vous permettre de découvrir les fonctionnalités du framework phaser, parce que vous en aurez sûrement besoin de ses fonctionnalités, la touche sur le clavier, barre espace pour sauter on l’utilise dans énormément de jeux.

Comme d’habitude vous retrouverez sous ce cours vidéo le code source complet et commenté en téléchargement, si vous avez des questions bien évidemment posez-les sous ce cours l’équipe développement facile vous répondra et là juste au-dessus de moi, au-dessus de cette vidéo, de ce cours vidéo, il y a une image, un lien cliquable qui vous invite à regarder la deuxième vidéo c’est-à-dire dans la deuxième vidéo vous allez aller beaucoup plus loin dans la création d’applications et de jeux pour les Smartphones, les tablettes, les ordinateurs de bureau, vous allez découvrir d’autres Framework, vous allez découvrir d’autres fonctionnalités du Framework phaser donc cliquez sur la bannière là, juste au-dessus de ce cours vidéo sur le lien, je vous explique tout ça dans la deuxième vidéo vous pourrez profiter d’une réponse très rapide par l’équipe développement facile si vous avez des difficultés avec les exercices des nombreux codes sources d’exemple d’exercices qui vous sont proposés, ou vous si vous avez tout simplement des questions, besoin d’exemples supplémentaires l’équipe développement facile est là pour vous répondre pour vous accompagner dans la réussite de vos jeux sur HTML 5, JavaScript sur les Smartphones, les tablettes, les ordinateurs de bureau écoutez je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle] [/ppmaccordion]

Télécharger le code source de l’exemple de la vidéo.

Retrouvez le code source commenté du jeu de plateforme simple implémenté en JavaScript avec le framework Phaser

Posez vos questions sur ce cours vidéo

Utilisez la zone commentaire pour poser vos questions sur le framwork Phaser et la création de jeu.