Comment faire pour créer des réservoirs dans votre jeu de html5

Ce type de jeu vous donne une sorte de mécanisme de lancement de votre jeu HTML5 avec la physique semi-réaliste, et a vous lancez des projectiles (aviaires avec des problèmes de colère ou autre) à une sorte de cible.

Réservoirs, des tourelles, et les obus

La chose la plus intéressante d'un jeu réservoir de style est la relation entre le réservoir, sa tourelle, et les balles qu'il incendies.

Le réservoir est une image-objet, mais l'image de la cuve ne comporte pas de tourelle. La tourelle est une image-objet distinct destiné à être relié à la cuve et entraîné en rotation sur lui-même. Lorsque le joueur déplace le réservoir, la tourelle se déplace avec elle. Lorsque l'utilisateur fait tourner la tourelle, la tourelle tourne, mais le réservoir ne fonctionne pas.

La balle est une troisième sprite, qui apparaît lorsque l'utilisateur tire le réservoir. La position initiale de la balle est déterminé par la position de la cuve, et l'angle de mouvement initial de la balle est déterminé par l'angle de la tourelle.

Voici le code pour le réservoir:

 UserTank fonction () {tTank = new Sprite (jeu, "greenTank.jpg", 50, 25) -tTank.setSpeed ​​(0) -tTank.setPosition (100, 550) -tTank.turret = new Sprite (jeu, "tourelle .jpg ", 50, 25) -tTank.bullet = new Bullet (tTank) -tTank.checkKeys = function () {if (keysDown [K_A]) {this.changeXby (-2) -} if (keysDown [K_D] ) {this.changeXby (2) -} // Toujours déplacer la tourelle avec me.this.turret.setPosition (this.x, this.y) - // tourne turretif (keysDown [K_W]) {this.turret.changeImgAngleBy ( -5) -Si (this.turret.getImgAngle () lt; 0) {this.turret.setImgAngle (0) -} // fin si} if (keysDown [K_S]) {this.turret.changeImgAngleBy (5) -Si (this.turret.getImgAngle ()> 90) {cela. turret.setImgAngle (90) -}} si (keysDown[K_SPACE]){this.bullet.fire()-}this.turret.update()-this.bullet.checkGravity()-this.bullet.update()-} // Fin checkKeysreturn tTank-} // réservoir d'extrémité

La conception du réservoir est légèrement compliquée par avoir un sprite de la tourelle à charge, et un sprite de la balle. Voici comment faire pour construire ce méli-mélo de blindés sprite bonté:

1. Construire le sprite de premier réservoir.

   Comme avec la plupart des exemples dans simpleGame, commencer par la construction d'un sprite temporaire pour le réservoir (appelé tTank).

2. Construire un sprite de la tourelle.

   La tourelle est une seconde sprite. Il est une propriété de la cuve, ainsi que d'un sprite dans son propre droit. La tourelle est assez simple, il peut donc être un stock sprite. Il n'a pas besoin d'être une sous-classe complète.

3. Construire un sprite de la balle.

   Chaque réservoir a un sprite et une balle. La balle devra certains comportements spécifiques, de sorte qu'il sera une sous-classe de la Lutin objet. Pour l'instant, il suffit de savoir que le réservoir aura besoin d'une balle. Notez que la balle aura besoin de savoir quel réservoir auquel il appartient.

4. Lire le clavier.

   Le réservoir est actuellement configuré pour utiliser les touches WASD pour l'entrée.

5. 
   
   
   
   

   Déplacer le réservoir gauche et à droite.

   Les commandes gauche et droite déplacent le réservoir lui-même sprite. Déplacez la tourelle de sorte que son centre est toujours le même que le centre de la cuve. Cela provoque la tourelle à se déplacer toujours avec le réservoir.

6. Tournez la tourelle.

   Les contrôles haut et bas causent la tourelle de tourner. Définir des valeurs minimum et maximum pour garder la tourelle dans une fourchette raisonnable d'angles.

7. Tirer la balle.

   Sur la commande de feu (la barre d'espace par défaut), invoquer la balle de feu () Procédé. (Bien sûr, vous aurez besoin d'écrire que dans le Balle classe.)

8. Mettre à jour la tourelle.

   Jusqu'à présent, tous les mettre à jour() appels ont eu lieu dans la principale mettre à jour() fonction. Cependant, le jeu principal n'a pas vraiment besoin de mettre à jour la tourelle. Parce que la tourelle est partie de la citerne, la mise à jour le réservoir devrait mettre à jour la tourelle. Parce que le checkKeys () méthode qui va se passer à chaque image, mettre à jour la tourelle pour assurer qu'il tire correctement.

9. Déplacez la balle.

   Si une balle est actif, utilisez le checkGravity () méthode pour suivre son cours actuel tout en prenant en compte la force gravitationnelle. Si il n'y a pas de solution actuellement active, cette ligne sera ignoré.

10. Mettre à jour la balle.

    Encore une fois, la balle se sent comme une partie de la cuve, il devrait donc être mis à jour automatiquement.

Comment construire une balle

La classe de balle sera tiré par un char. La balle est une classe étonnamment sophistiqué, car il a besoin d'un feu () Procédé (ce qui déclenche la balle sur la base de la cuve et la situation actuelle de la tourelle) et un checkGravity () méthode (qui trace la trajectoire de la balle dans l'espace).

Voici la Balle Code de la classe:

 fonction Bullet (propriétaire) {// propriétaire est le réservoir de posséder cet bullettBullet = new Sprite (jeu, "bullet.jpg", 5, 5) = -tBullet.owner propriétaire-tBullet.hide () - tBullet.setBoundAction (DIE) -tBullet.fire = function () {// commencer au centre de mon réservoir // pointant dans directionthis.setPosition de tourelle de char (this.owner.x, this.owner.y) -this.setMoveAngle (this.owner.turret. getImgAngle ()) - this.setSpeed ​​(20) -this.show () -} // firetBullet.checkGravity final = function () {this.addVector (180, 1) -} // fin checkGravityreturn tBullet-} // fin balle

Voici l'histoire de la vie d'une balle dans un jeu:

1. Spécifiez le propriétaire réservoir.

   Lorsque ce jeu dispose de plusieurs réservoirs de tir à l'autre (ce qui a manifestement besoin), il devrait y avoir beaucoup de balles qui volent autour. Chaque puce aura besoin de savoir quel réservoir il appartient à de sorte qu'il peut tirer de la bonne position dans la bonne direction.

2. Hide.

   La Balle objet est créé au tout début du jeu, mais il passe le plus clair de sa vie cachée invisible. Une des premières choses que vous faites est cacher la balle de sorte qu'il sera visible uniquement après qu'il a tiré.

3. Définir l'action à la limite DIE.

   Bullets meurent généralement quand ils atteignent la fin de l'écran. L'image-objet ne soit pas supprimé de la mémoire. Il est tout simplement pas affiché sur l'écran et ne répond pas à des collisions. Réglage de l'action à la limite DIE provoque le comportement souhaité.

4. Feu de la position du réservoir propriétaire.

   Lorsque la balle est tirée, le placer à la position du réservoir de propriétaire.

5. Réglez l'angle de mouvement à l'angle de la tourelle du char propriétaire.

   Emploi principal de la tourelle est d'indiquer l'angle qui est utilisé comme départ de la trajectoire de la balle.

6. Fournir une grande vitesse de déplacement.

   Bullets doivent se déplacer rapidement, donc définir une vitesse initiale de 20 pixels par image. (Vous pouvez ajouter un autre contrôle pour permettre à l'utilisateur de modifier la vitesse initiale si vous le désirez).

7. Révéler la balle.

   Appelez la balle de montrer() méthode pour faire la balle apparaît sur l'écran.

8. Vérifiez la gravité.

   Tout cela fait fonction est de compenser l'attraction gravitationnelle de la addVector () Procédé.