Comment créer un atterrisseur lunaire dans votre jeu de html5

Ceci est l'un des types de jeux les plus anciennes. L'idée de base est de répliquer l'atterrissage sur une planète pour votre jeu HTML5 sans atmosphère. Les astronautes d'Apollo ont une quantité limitée de carburant pour ralentir un vaisseau spatial se déplaçant rapidement et l'amener à la surface en toute sécurité. Ce jeu est une variante de ce thème.

L'essence d'un jeu-atterrisseur lunaire est l'interaction entre la poussée et la gravité. Le jeu repose en grande partie sur la addVector () Procédé. Gravity donne une petite poussée vers le bas à chaque cadre, qui peut être compensée par la poussée des touches fléchées.

Le jeu propose quatre images de différents Länder (pour fournir une rétroaction que l'utilisateur applique poussée), qui sont simplement échangés avec le setImage () Procédé selon les besoins.

Collisions de jeux

La partie la plus intéressante de ce jeu est la routine d'atterrissage. La routine de collision ordinaire est pas suffisamment spécifique pour gérer ce type de collision, comme l'atterrissage sera considéré comme un atterrissage en toute sécurité que si un certain nombre de conditions sont vraies. Le propre façon de vérifier plusieurs conditions est dans un profondément imbriquées si la structure, comme ce qui suit:

 tLander.checkLanding = function () {if (this.falling) {if (this.y> 525) {if (this.x lt; platform.x + 10) {if (this.x> platform.x - 10) {if (this.dx lt; .2) {If (this.dx> ± 2) {if (this.dy lt; 2) {this.setSpeed ​​(0) -this.falling = false-message = "Belle Landing!" -} Else {message = "vitesse verticale trop" -} // fin si} else {message = "trop ​​rapide pour gauche "-} // fin si} else {message =" trop vite à droite "-} // fin si} // fin de 'X trop grand» si} // fin de' X trop petite »si} // fin ' y pas assez grand "si} // fin 'accusons-nous? si} // fin checkLanding

Lorsque vous vérifiez plusieurs conditions à la fois, il est préférable de créer un séparée si instruction pour chaque. Placez chaque si instruction à l'intérieur de la prochaine, donc la partie la plus imbriquée du code représente le succès.

1. Déterminez si vous êtes tomber.

   Une variable booléenne appelée chute a été créé qui décrit si le vaisseau spatial est en baisse ou débarquées. Si chute Certes, la force de gravité est éteint. Elle n'a de sens pour vérifier l'état de l'atterrissage si vous êtes en train de tomber.

2. 
   
   
   
   

   Vérifiez la valeur Y.

   Parce que la plate-forme est placé à une valeur de 550 Y, l'atterrisseur apparaîtra à débarquer lorsque sa valeur Y est supérieur à 525. Vous êtes vraiment ne concerne que la partie inférieure de l'atterrisseur toucher le haut de la plate-forme. Notez que cette vérification se passe à l'intérieur du chute vérifier. Si une condition échoue, il est pas nécessaire de vérifier les autres.

3. Vérifiez la valeur de X.

   Vous voulez que le centre de l'atterrisseur pour être dans les dix pixels du centre de la plate-forme, afin d'utiliser une paire de imbriquée si déclarations pour vérifier les emplacements X.

4. Vérifier la vitesse horizontale.

   Pour un atterrissage en toute sécurité, l'engin doit avoir un dx valeur comprise entre -0,2 et 0,2. (Ceci est quelque peu arbitraire, mais au moment du dépistage, il se sent à droite.) Il est préférable de vérifier avec une paire de imbriquée si déclarations.

5. Vérifier la vitesse verticale.

   Si tout le reste fonctionne bien, vérifiez que l'engin ne tombe pas trop rapidement. Utilisez le dy propriété permet de déterminer à quelle vitesse le vaisseau spatial est en baisse.

6. Produire un retour autre clauses.

   Une structure imbriquée comme cela vous montre la valeur réelle de l'indentation et commentant appropriée. Fournir une rétroaction dans les différents autre clauses d'expliquer pourquoi l'atterrissage a été considéré comme un échec.

Consoles de texte de jeu

Une autre partie intéressante du code est le mécanisme d'affichage des données de texte à l'utilisateur. La meilleure façon de le faire est par le biais d'un simple HTML div. Utiliser les CSS pour placer le div exactement là où vous voulez qu'il soit. Vous devriez rarement utiliser le positionnement absolu dans le développement web normal, il est logique dans le contexte de la création d'un label pour un jeu.

Notez que vous pourriez avoir besoin pour régler la z-index la propriété à une valeur élevée pour assurer qu'il apparaît au-dessus de la toile, ou il peut ne pas être visible pour l'utilisateur. Voici le CSS qui rend l'étiquette ressemble sortie sur l'écran:

 #stats {position: absolute-font-family: monospace-left: 50px; top: 50px; z-index: 999 couleurs: blancs}

Façons d'améliorer votre jeu

Ceci est juste un point de départ pour le jeu. Beaucoup d'autres fonctionnalités intéressantes pourraient être ajoutées:

• Carburant: Ajouter une variable de carburant qui est décrémenté chaque fois que l'utilisateur applique poussée. Poussée verticale devrait utiliser plus de carburant que des ajustements horizontaux. Si le niveau de carburant passe en dessous de zéro, ignorer d'autres entrées de poussée. Ce mécanisme met une complication réaliste dans le jeu.

• Mises sous tension: Ajouter quelques autres fonctionnalités, l'utilisateur peut gagner: carburant de bonus, moins intense gravité, une plate-forme plus large.

• Atterrissages multiples: Peut-être déplacer l'aire d'atterrissage, après un atterrissage réussi, ou demandez à l'utilisateur transporter un objet à une seconde plate-forme.

• Obstacles: Mettez indésirable ou bâtiments espace dans la façon dont va se planter le joueur sur le contact.

• Changer le thème: Les mêmes mécanismes peuvent facilement être utilisés pour un hélicoptère ou chaude jeu de ballon à air.