Comment ajouter des effets de glissement à votre jeu HTML5 - les nuls

Le principe d'addition vectorielle peut être utile à votre jeu HTML5 de plusieurs façons. Premièrement, il peut ajouter de l'effet de traînée et donc conduire à un comportement plus précis des véhicules terrestres. Imaginez que votre voiture est coincée dans un mauvais quartier au milieu de la nuit (encore une fois). Vous ne pouvez pas simplement changer la position de la voiture directement. Vous ne pouvez même pas changer son mouvement.

Ce que vous devez faire est d'ajouter une force. Lorsque vous ajoutez de la force, vous ajoutez lentement au vecteur de mouvement. Finalement, la voiture commence à bouger. Si vous arrêtez d'appliquer de la force, elle finira par s'arrêter car la résistance au vent et la résistance au roulement ralentissent la voiture.

Courses de drag de jeu

Le drag. Exemple html montre une voiture réaliste qui accélère lentement et ralentit à un arrêt que l'accélérateur (dans ce cas, la flèche vers le haut) est relâché.

Vous aurez vraiment besoin de voir le programme en action pour apprécier son comportement.

Faites glisser le jeu var; var bateau; function Car () {tCar = nouveau Sprite (jeu, "voiture.png", 100, 50); tCar. checkKeys = function () {console. log (cette vitesse); if (keysDown [K_LEFT]) {this. changeImgAngleBy (-5);} if (keysDown [K_RIGHT]) {this. changeImgAngleBy (5);} if (keysDown [K_UP]) { cela. addVector (this.imgAngle, 2); } // se déplacer dans la direction actuelle ceci. addVector (this.imgAngle, 2);} // end checkKeys tCar. checkDrag = function () { speed = ceci. getSpeed ​​(); vitesse * =. 95; ceci. setSpeed ​​(vitesse); } // fin checkDrag return tCar;} // fin car def fonction init () {game = new Scène (); Jeu. setBG ("# 666666"); voiture = nouvelle voiture (); Jeu. start ();} // fin de la fonction d'initialisation update () {game. clair(); voiture. checkKeys (); voiture. checkDrag (); voiture. update ();} // fin update

Comment implémenter drag dans votre jeu

Cette version utilise un mouvement basé sur la force plus réaliste. Lorsque l'utilisateur appuie sur la flèche vers le haut, la voiture augmente la vitesse. Si l'utilisateur laisse la flèche vers le haut enfoncée, la voiture atteint naturellement une vitesse maximale. Lorsque l'utilisateur relâche la flèche vers le haut, la voiture ralentit progressivement et finit par s'arrêter. Les vecteurs de force sont la clé.

Voici comment cela fonctionne:

1. Construisez un véhicule de base.

   Créez une image-objet personnalisée avec une méthode checkKeys () et vérifiez toutes les flèches normales. Le code pour vérifier les flèches gauche et droite est exactement ce que vous attendez.

2. Avancer avec un vecteur de force.

   Le code d'avancement est légèrement différent. Plutôt que de simplement modifier la vitesse directement, appliquez une force dans la direction actuelle de la voiture. Utilisez la méthode getImgAngle () du sprite pour déterminer la direction de la voiture et ajouter une petite force dans cette direction.

3. Créez une méthode checkDrag ().

   Les voitures ne continuent pas sans énergie. La résistance au vent et au sol les ralentira et finira par s'arrêter. Simulez les différentes forces de traînée en ajoutant une méthode checkDrag () à votre objet.

4. Multipliez la vitesse par un facteur de traînée.

   Pour cet exemple, les différentes forces de traînée priveront la voiture de 5% de sa vitesse à chaque image. Rappelez-vous que le jeu fonctionne à 20 images par seconde, donc la force de traînée est assez importante. Vous pouvez réaliser l'effet de traînée de plusieurs façons, mais le plus simple est de multiplier la vitesse de la voiture par une valeur inférieure à 1.

5. Pas de freins!

   Qu'est-ce qu'une voiture d'arcade qui se respecte a des freins? Sérieusement, vous pourriez vouloir ajouter une entrée de flèche vers le bas, mais cela ne devrait pas être nécessaire parce que la voiture va ralentir tout seul.

6. Assaisonner au goût.

   Cet exemple donne un aperçu approximatif, mais vous pouvez modifier un certain nombre de valeurs pour obtenir exactement les performances de votre voiture. Vous pouvez simuler un moteur plus puissant (ou une masse plus petite) en augmentant le vecteur de force lorsque vous appuyez sur l'accélérateur.

   Vous pouvez simuler une suspension plus réactive en modifiant le taux de virage si l'utilisateur appuie sur les flèches droite ou gauche. Vous pouvez également simuler une voiture plus ou moins efficace en modifiant le taux de traînée. À l'heure actuelle, la voiture tourne à n'importe quelle vitesse, mais vous pouvez empêcher les entrées de flèche gauche et droite si la voiture est en dessous d'une certaine vitesse.