Comment ajouter des effets de dérive à votre jeu HTML5 - les nuls

Vous pouvez utiliser des vecteurs de force d'une manière intéressante dans votre jeu HTML5. De nombreux jeux de course comprennent des mécanismes de dérapage ou de dérive. L'obtention de ce comportement nécessite des mathématiques très sophistiquées, mais vous pouvez faire une approximation raisonnable de ce comportement sans trop d'efforts.

Cette image ne suffit pas. Vous avez vraiment besoin de voir cela comme un programme de travail parce que c'est vraiment cool. Lorsque vous déplacez le bateau sur l'écran, le bateau dérive et dérape. C'est vraiment amusant de jouer avec.

Comment ajouter un comportement de dérive à l'objet de votre jeu

Pour obtenir un comportement de dérive simple, ajoutez simplement un petit vecteur de force dans la direction actuelle du bateau, que l'utilisateur appuie ou non sur l'accélérateur.

Cette technique est un compromis entre le mouvement spatial (où le vecteur de force est ajouté uniquement lorsque l'accélérateur est enfoncé) et le comportement normal de la voiture (où la direction du déplacement suit toujours le nez du véhicule). Chaque image a un peu de chaque comportement.

Voici le code:

dérive. jeu html var; var bateau; function Boat () {tBoat = nouveau Sprite (jeu, "bateau.png", 100, 50); tBoat. checkKeys = function () {console. log (cette vitesse); if (keysDown [K_LEFT]) {this. changeImgAngleBy (-5);} if (keysDown [K_RIGHT]) {this. changeImgAngleBy (5);} if (keysDown [K_UP]) {this. addVector (this.getImgAngle (), 2);} ceci. addVector (this.getImgAngle (), (this.vitesse / 20)); } // fin checkKeys tBoat. checkDrag = function () {speed = ceci. getSpeed ​​(); vitesse * =. 95; ce. setSpeed ​​(speed);} return tBoat;} fonction init () {jeu = nouvelle scène (); Jeu. setBG ("# 000066"); bateau = nouveau bateau (); Jeu. start ();} // fin de la fonction d'initialisation update () {game. clair(); bateau. checkKeys (); bateau. checkDrag (); bateau. update ();}

Comment ajouter drift aux sprites de votre jeu

C'est une procédure très simple.

1. Construire un modèle de véhicule standard.

   Pensez à faire un bateau, juste pour la variation.

2. Utilisez un vecteur de force pour l'accélération.

   Encore une fois, vous contrôlez manuellement la vitesse, donc le mécanisme addVector () vous donne une grande puissance. Le vecteur de force d'accélération (utilisé dans la touche fléchée vers le haut) peut être une valeur littérale, mais il n'a pas besoin d'être énorme. Parce que vous allez réellement ajouter un second vecteur de force, vous pourriez vouloir atténuer le vecteur d'accélération.

3. Ajoutez un petit vecteur de force à chaque image.

   Le vecteur de force primaire se produit uniquement lorsque vous accélérez, mais un vecteur secondaire plus petit est ajouté à chaque image. Ce vecteur va dans la direction du bateau.Ce petit vecteur de mouvement simulera l'élan. Il est important que ce vecteur de force soit un pourcentage de la vitesse plutôt qu'une valeur littérale. Si vous avancez toujours d'un pixel, par exemple, le bateau ne s'arrêtera jamais.