Utilisez les lois de la physique, la gravité dans un jeu HTML5 avec le Framework Phaser

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Apprenez à utiliser les lois physiques pour simuler les collisions entre les objets ainsi que la gravité dans un jeu vidéo.

Tout est expliqué dans la vidéo ci-dessous.

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

Utilisez les lois de la physique, la gravité dans un jeu HTML5 avec le Framework Phaser

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours vous allez continuer à découvrir des fonctionnalités du Framework phaser, le Framework dédié à la conception de jeux HTML 5 JavaScript pour les mobiles donc Smartphone, tablette et aussi les ordinateurs de bureau.

Dans ce cours vous allez apprendre à utiliser plus particulièrement les lois physiques comme les collisions entre des objets ainsi que la gravité, donc je vous montre le résultat de ce que vous allez obtenir, vous faites tomber des blocs et vous jouez sur les effets de collisions et de gravité entre les différents blocs, vous pouvez en faire disparaître pour avoir des effets, donc il y a un certain nombre de blocs qui sont affichés, là vous cliquez sur un bloc ça en n fait disparaître d’autres, vous pouvez en faire apparaître ou vous voulez, voilà, pour faire des effets de collisions plutôt très sympas et donc c’est que vous allez apprendre à créer.

Alors comme d’habitude, le Framework phaser, le fichier main en mode développement, donc comment ça se passe ?

Il est très court ce programme comme vous pouvez le voir, parce que grâce aux Framework phaser c’est extrêmement simple de gérer les collisions, vous créez votre jeu comme d’habitude ça change pas, vous avez l’habitude maintenant, vous ajoutez les éléments graphiques chargement des éléments graphiques, vous changez la couleur de fond, un petit texte informatif c’est tout simplement le nombre de blocs affichés à l’écran et ensuite donc vous activez les lois de la physique sur le jeu, vous définissez une gravité et vous écoutez les clics de la souris et en fonction des clics de la souris, soit on clique dans le vide en créant un nouveau bloc avec une petite fonction qui va vous être très utile, ça génère un nombre aléatoire entre une valeur minimum et une valeur maximum toutes les deux incluses donc très pratique pour générer un nombre aléatoire entre un et deux donc soit on met un bloc de type 1 ou un bloc de type 2, on active les lois de la physique sur le nouveau bloc, le nouveau bloc créé tout simplement, et là c’est le score donc vu qu’on ajoute un bloc on le mentionna cliquer sur un blog donc lenght est supérieur à 0, parce qu’on récupère, on fait un i test de la position de la souris sur un élément, on a cliqué donc on supprime le bloc concerné, donc on le tue tout simplement et on décrémenter le score et on update qui est appelé régulièrement donc vu que ça c’est une variable globale qui est mise, initialisée à zéro ici, puis mise à jour ici, on l’affiche automatiquement, mise à jour donc ce qui donne ceci, voilà, donc vous avez vu gestion très efficace des collisions, vous pouvez jouer avec, voilà donc ça vous ouvre un champ immense de possibilités justement de jeux en HTML 5 JavaScript, vous allez voir, là c’est un exemple très simple et justement ça peut vous donner plein d’idées pour créer des nouveaux types de jeux justement, donc voilà, code source très court, donc forcément cours très court, ce qu’il y a à retenir c’est la physiques, Game.physique unable, démarrer le moteur physique bien évidemment, définir la gravité et le reste vous avez l’habitude écouter la souris, voilà on récupère l’objet ici, mose add remove, c’est sur le input et voilà.

Comme d’habitude vous trouverez le code source en téléchargement sous ce cours vidéo, si vous avez des questions posez les directement sous cette vidéo, l’équipe développement facile vous répondra, et maintenant je vous propose là juste au dessus de la vidéo il y a un lien, une image cliquable qui vous permet d’accéder à une deuxième vidéo, dans la deuxième vidéo vous allez aller beaucoup plus loin dans la création de jeux HTML 5 JavaScript avec le Framework phaser, donc vous allez mettre en place la méthode développement facile pour créer beaucoup plus rapidement, travailler en équipe, des jeux sans bug, très stables, très facilement évolutifs, grâce aux Framework phaser et à d’autre Framework que vous allez découvrir dans la deuxième vidéo donc en plus l’équipe développement facile sera là pour vous accompagner dans la mise en pratique des codes source que vous allez recevoir, des cours, si vous avez des questions techniques, comment appliquer la méthode développement facile dans tel ou tel cas, ils seront là pour vous aider, des experts en développement cliquez simplement sur la bannière, au dessus de cette vidéo sur le lien je vous retrouve tout de suite dans la deuxième vidéo à tout de suite.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple de chute de blocs

Retrouvé le code source commenté de l’exemple d’utilisation des lois de la physique dans un jeu vidéo

Downloads

  • 13 lois physiques chute blocs
    13 lois physiques chute blocs

    Code source commenté de l'exemple de chute de blocs avec gravité et collision.
    Exemple réalisé en JavaScript avec le framework Phaser.

Posez vos questions sur le cours vidéo

Utilisez la zone commentaire pour poser vos questions sur la gravité, les collisions et l’utilisation de la physique dans les jeux vidéo

 

Créez des Jeux JavaScript / HTML5 Performants avec la Formation Gratuite Jeux Faciles!

Apprenez Comment Développer des Jeux sur Mobiles iOS / Androïd, Tablettes et le Web avec les Frameworks Phaser, Threejs...