Comment ajouter de la gravité à votre jeu HTML5 - les mannequins

Les calculs de gravité font partie des jeux vidéo HTML5 depuis le début. Il y a en fait deux types de gravité à considérer. Dans les jeux de plateforme, le joueur est proche d'une planète, et toute la gravité semble tout tirer vers le bas.

Lorsque vous savez comment ajouter des vecteurs d'accélération, il est facile de travailler avec la gravité de type plate-forme. Pensez à la gravité comme une force constante abaissant toujours une petite quantité chaque image.

Comment ajouter des fusées à la course de votre jeu

Cet exemple a une autre caractéristique intéressante. Lorsque vous appuyez sur la flèche vers le haut, l'image de la voiture est changée en une autre image avec des flammes.

Le code de l'exemple hoverCar est affiché ici dans son intégralité:

hoverCar. html var voiture; var ville; var jeu; function Car () {tCar = nouveau Sprite (jeu, "hoverCar. png", 70, 50); tCar. setSpeed ​​(0); tCar. hSpeed ​​= 0 tCar. checkKeys = function () {tCar. changeImage ("hoverCar.png"); if (keysDown [K_LEFT]) { cela. hSpeed ​​- = 1 } if (keysDown [K_RIGHT]) { cela. hSpeed ​​+ = 1 } if (keysDown [K_UP]) { cela. addVector (0, 5); ceci. changeImage ("hoverCarThrust. png") ;} ceci. changeXby (this.hSpeed); } // end checkKeys tCar. checkGravity = function () { if (this.y> 580) { this. setPosition (ceci, x, 580); } else { cela. addVector (180, 1); } // fin si } // fin checkGravity return tCar;} // fin voiture def fonction init () {jeu = new Scène (); voiture = nouvelle voiture (); city ​​= new Sprite (jeu, "city.png", 800, 600); ville. setSpeed ​​(0); ville. setPosition (400, 300); Jeu. start ();} // fin de la fonction d'initialisation update () {game. clair(); ville. mettre à jour(); voiture. checkKeys (); voiture. checkGravity (); voiture. update ();} // fin de la mise à jour

Comment utiliser le vecteur de force dans votre jeu

La gravité est en fait assez simple. C'est simplement un vecteur de force. Les autres parties intéressantes de cet exemple impliquent de changer le mouvement horizontal sans changer l'angle de l'image de la voiture et d'ajuster l'image pour indiquer le propulseur. Voici les étapes:

1. Construisez deux images différentes.

   Utilisez votre éditeur d'image pour créer deux versions différentes de l'image.

2. Construire un sprite ordinaire.

   Comme la plupart des sprites de véhicules, vous avez besoin d'une méthode checkKeys (). Celui-ci est mis en place de la manière ordinaire, mais le comportement est un peu différent.

3. Définir l'image par défaut.

   L'image par défaut n'a pas de propulseur. Utilisez la méthode changeImage () pour en faire l'image par défaut. Lorsque les propulseurs sont allumés, l'image sera modifiée.

4. Utilisez une variable pour contrôler la vitesse horizontale.

   Vous pouvez créer la variable hSpeed ​​pour gérer la vitesse horizontale de la voiture.

5. Définissez les flèches gauche et droite pour modifier hSpeed.

   Les touches fléchées gauche et droite modifient la variable hSpeed.

6. Utilisez changeXby pour régler la vitesse horizontale.

   Après avoir vérifié toutes les clés, changez la valeur x de la voiture à la valeur actuelle de hSpeed.

7. La flèche vers le haut ajoute un vecteur vers le haut.

   Utilisez la fonction addVector () maintenant tristement célèbre pour ajouter un petit vecteur de force vers le haut lorsque l'utilisateur appuie sur la flèche vers le haut. Rappelez-vous que 0 degrés est en hausse. Jouez avec cette valeur pour obtenir la quantité de poussée que vous voulez pour votre jeu.

8. Afficher les propulseurs lorsque la flèche vers le haut est enfoncée.

   Si l'utilisateur appuie sur la flèche vers le haut, vous devez afficher les propulseurs. Utilisez la méthode changeImage () pour définir l'image de l'image-objet à celle avec des propulseurs de fusée.

9. Construire une méthode checkGravity ().

   Cette méthode sera appelée chaque image pour compenser la gravité.

10. Vérifiez si vous êtes au sol.

    Dans cet exemple, le sol est défini comme une valeur y supérieure à 580.

11. Si vous n'êtes pas au sol, ajoutez un vecteur de force de gravité.

    Parce qu'il va s'accumuler, le vecteur de force de gravité doit être assez petit. Vous devrez équilibrer la force de la gravité et les propulseurs pour obtenir le comportement que vous voulez. Si la gravité est trop forte, les propulseurs ne fonctionneront pas. Si les propulseurs sont trop forts, la voiture vole simplement dans l'espace.