Pour ajouter un mouvement réaliste à votre jeu HTML5 - les mannequins

Jetez un coup d'œil à l'espace. html Ce jeu simple fournit un bon exemple pour appliquer un mouvement réaliste à votre jeu HTML5. Il utilise le schéma de contrôle rendu célèbre dans les jeux classiques Asteroids et Spacewar! (Bien que Asteroids soit plus connu, Spacewar! est de loin le jeu le plus ancien et le plus influent.)

Cliquez ici pour profiter pleinement de l'expérience.

Comment ajouter un vecteur de force à l'objet de votre jeu

Le vaisseau est contrôlé par les touches fléchées, mais l'effet de Newton est plus visible dans l'espace que dans le sol (pas de traînée gênante). Les flèches gauche et droite font tourner le vaisseau, mais elles n'affectent pas le mouvement du vaisseau. La flèche vers le haut déclenche une fusée, qui ajoute un vecteur de force dans la direction du navire.

Voici le code:

space var ship; var jeu; function Ship () {tShip = nouveau Sprite (jeu, "ship. png", 25, 25); tShip. setSpeed ​​(3); tShip. checkKeys = function () {if (keysDown [K_LEFT]) { this. changeImgAngleBy (-5); } if (keysDown [K_RIGHT]) { cela. changeImgAngleBy (5); } if (keysDown [K_UP]) { cela. addVector (this.getImgAngle (),. 1); }} // fin de la fonction return tShip;} // définition de l'objet function init () {game = new Scene (); navire = nouveau navire (); Jeu. setBG ("noir"); Jeu. start ();} // fin de la fonction d'initialisation update () {game. clair(); navire. checkKeys (); navire. update ();} // fin de la mise à jour

Comment simuler l'espace dans votre jeu

Voici le résumé:

1. Commencez l'exemple normalement.

   Comme la plupart des démos simples, commencez avec un sprite et une scène. Parce que le vaisseau aura une méthode personnalisée, vous en faites un objet unique.

2. Donnez au vaisseau une méthode checkKeys ().

   La méthode checkKeys () recherche les touches et modifie le comportement du vaisseau en conséquence.

3. Changez l'angle de l'image.

   Un sprite a en réalité deux angles distincts. Il peut avoir un angle qu'il pointe (appelé le imgAngle dans le jeu simple) et l'angle qu'il déplace (appelé le moveAngle). Lorsque vous modifiez l'angle, vous modifiez à la fois le mouvement et les angles de l'image en supposant que l'objet se déplacera simplement dans la direction vers laquelle il se trouve.

   Pour les exemples simples, c'est bien, mais de nombreux types de mouvements nécessitent de découpler l'image et les angles de mouvement. La méthode changeImgAngleBy () vous permet de changer la direction de l'image sans modifier l'angle de mouvement. (Il existe aussi une méthode changeMotionAngle (), mais elle n'est pas utilisée très souvent.)

4. Ajoutez un vecteur de force pour simuler la poussée.

   Lorsque l'utilisateur appuie sur la flèche vers le haut, le navire tire ses roquettes principales. Ceci ajoute un petit vecteur de force dans la direction à laquelle le vaisseau est actuellement confronté. Utilisez la méthode getImgAngle () pour déterminer la direction à laquelle le vaisseau est actuellement confronté et utilisez cette valeur pour spécifier où la force doit être ajoutée.

   Parce que ce code se passe dans la boucle d'animation et qu'il est amplifié lorsque la touche fléchée est enfoncée, seule une très petite force est nécessaire.