Ajoutez la gravité et les collisions dans un jeu HTML5 JavaScript avec le Framework Phaser

On continu ensemble sur l’implémentation des lois de la physique dans un jeu vidéo.

Apprenez à réaliser des collisions entre plusieurs blocs, ainsi que les chutes de blocs par gravité.

Tout est dans la vidéo ci-dessous.

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

Ajoutez la gravité et les collisions dans un jeu HTML5 JavaScript avec le Framework Phaser

Bonjour à tous et bienvenu sur Développement Facile.

Dans cette nouvelle vidéo vous allez continuer à utiliser le Framework phaser pour créer, c’est un Framework qui permet de créer des jeux HTML 5 JavaScript beaucoup plus facilement, beaucoup plus rapidement car il y a tout un tas de fonctionnalités près intégrées donc ça vous fait gagner un temps considérable pendant votre développement et ça vous simplifie énormément votre code.

Dans les cours précédents vous avez un peu découvert quelques lois de la physique et bien là vous allez aller un peu plus loin en découvrant la gestion des collisions entre plusieurs blocs entre eux, la gravité, la chute donc tout ça c’est dans ce cours vidéo donc comme résultat vous avez en fait les blocs de couleur marron que vous pouvez supprimer en cliquant dessus et le but c’est de faire tomber le totem mais sans toucher le bord de l’écran donc qui est en bleu, sinon c’est perdu.

C’est un petit jeu sympa qui vous montre comment jouer avec les lois de de la physique je vais essayer de vous montrer comment gagner ce qui n’est pas évident donc là c’est encore perdu. Après vous verrez ce sera à vous de tester la chose, voilà lois de la physique, il tombe sans toucher le bord bleu, donc c’est gagné donc comment créer ça par le code.

Comme d’habitude le Framework Phaser, le fichier main.js en développement en mode dev pour pour forcer le chargement du fichier dans le navigateur donc désactivation du cache, vous avez vos variables globales ici, tout simplement ensuite au chargement du DOM vous appelez comme d’habitude la fonction main, vous créez votre jeu donc là vous chargez tous les éléments graphiques vous commencez à connaître par cœur, vous changez la couleur de fond, le background et là vous gérez, vous créez votre monde donc rectangle tant de cette taille-là, à cette position là, vous activez les lois de la physique sur ce monde là, la gravité également sur le jeu vous construisez votre totem donc en ajoutant sous forme de Sprite l’herbe tout simplement, en mode statique, vous donnez un nom à cet élément pour le retrouver, vous activez comme dans la vidéo, le cours précédent, les lois graphique sur cet élément, pareil sur chaque élément donc chaque bloc que vous ajoutez, vous activez les lois de la physique, et ensuite sur le totem aussi et donc là vous ajoutez les bords de l’écran, donc ajout des bords du jeu tout simplement, vous activez les lois de la physique également sur les bords du jeu, donc de chaque côté, bord droit, là c’est le bord gauche ici, bord gauche là, c’est le bord droit du jeu, je parle bien évidemment de ces parties là, droite et gauche, l’herbe ici, vous activez la statique et ensuite à chaque fois qu’il y a une collision donc un contact sur le totem donc le totem c’est le bloc jaune, et bien vous appelez la fonction tchèque item collision c’est pour vérifier avec quoi l’item est rentré en collision et donc là vous écoutez les clics de la souris et vous détruisez les blocs tout simplement sur un clic de la souris. Là c’est perdu le totem est sorti du jeu, donc destroy bloc le plus simple on récupère la position de la souris, si c’est un bloc qui est cliqué, donc si je clique sur un bloc on est arrivé ici par contre on vérifie que le bloc peut-être détruit, regardez ici on a mis une propriété incassable, donc sur les blocs concernés, tous les blocs comme ça, ils sont incassables, seulement cela peuvent être cassés, donc là j’ai été un petit peu vite, ces blocs sont cassables, celui là est incassable, celui là aussi voilà tout simplement, donc on vérifie est  ce que c’est bien un bloc cassable qui peut être détruit si oui, on supprime le bloc de l’écran, c’est aussi simple que ça. Pour vérifier la collision, on vérifie est-ce que le totem, body c’est le totem.Body il est rentré en collision, on vérifie la collision avec les bords du jeu, oui il est rentré en collision avec un bord du jeu le totem, on ajoute le texte perdu, on supprime l’écouteur aussi, pareil sinon le totem est rentré en collision avec l’herbe, c’est gagné, donc c’est soit l’un soit l’autre, soit il est rentré en collision avec le Sensor, soit avec l’herbe sinon il ne se passe rien et là on continu pendant le jeu, donc ce qu’est vraiment très important c’est démarrer le système de gestion des lois de la physique, ajouter une gravité, activer les lois de la physique sur chaque bloc, vous pouvez créer des blocs incassables en rajoutant une propriété indestructible, et ensuite pareil, lois de la physique sur les bords du jeu ici, et vous pouvez tester si le bloc peut-être détruit et vous supprimez le bloc le cas échéant, ce qui donne cela comme jeu, c’est un petit jeu assez marrant, là c’est perdu, le but c’est que le totem arrive en bas sans qu’il ne touche le bord, comme ici c’est gagné.

Maintenant c’est à vous de jouer, donc sous ce cours vidéo vous retrouverez le code source complet en téléchargement, si vous avez des questions posez les directement sous cette vidéo l’équipe développement facile sera ravie de vous répondre et vous aidez. Maintenant juste au-dessus de ce cours vidéo il y a un lien cliquable qui vous amène dans la deuxième vidéo, donc dans la deuxième vidéo vous allez apprendre à utiliser la méthode développement facile, la programmation orientée objet, les événements la programmation événementielle, les modèles de conceptions pour créer très facilement des applications et des jeux sur Smartphone, tablette, ordinateur de bureau grâce aux Framework phaser, et d’autres frameworks beaucoup plus facilement, je vous explique tout ça dans le détail dans la deuxième vidéo, il y a l’équipe développement facile, des experts en développement dans plusieurs langages, qui seront là pour vous accompagner en cas de difficultés avec un code source, sa mise en œuvre, comment mettre en place la méthode développement facile dans votre environnement de travail, dans votre environnement de développement, donc il suffit d’accéder, de regarder la vidéo deux, dans laquelle tout est expliqué, cliquer simplement sur le lien au dessus de cette vidéo sur l’image je vous retrouve tout de suite dans la deuxième vidéo à tout de suite.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple Phaser d’utilisation de la gravité et des collisions

Retrouvé le code source commenté de l’exemple de la vidéo

Posez vos questions techniques

Posez vos questions sur la physique dans les jeux vidéo dans la zone commentaire