Comment créer un lanceur lunaire dans votre jeu HTML5 - les nuls

C'est l'un des types de jeu les plus anciens. L'idée de base est de reproduire l'atterrissage sur une planète pour votre jeu HTML5 sans atmosphère. Les astronautes d'Apollo avaient une quantité limitée de carburant pour ralentir un vaisseau spatial en mouvement rapide et le ramener à la surface en toute sécurité. Ce jeu est une variation de ce thème.

L'essence d'un jeu lunaire-lander est l'interaction entre la poussée et la gravité. Le jeu dépend fortement de la méthode addVector (). La gravité donne une petite poussée vers le bas à chaque image, qui peut être compensée par la poussée des touches fléchées.

Le jeu propose quatre images d'atterrissage différentes (pour fournir une rétroaction que l'utilisateur applique la poussée), qui sont simplement permutées avec la méthode setImage () au besoin.

Collisions de jeu

La partie la plus intéressante de ce jeu est la routine d'atterrissage. La routine de collision ordinaire n'est pas assez spécifique pour gérer ce type de collision, car l'atterrissage sera considéré comme un atterrissage en sécurité seulement si un certain nombre de conditions sont vraies. La façon la plus propre de vérifier plusieurs conditions est dans une structure si imbriquée, comme ceci:

tLander. checkLanding = function () {if (ce qui tombe) {if (this.y> 525) {if (this.x plate-forme.x - 10) {if (this.dx -. 2) {if (this.dy < 2) {ceci. setSpeed ​​(0); ce. tomber = faux; message = "Nice Landing!";} else {message = "trop ​​de vitesse verticale";} // fin if} else {message = "trop ​​rapide à gauche";} // fin si} else {message = "trop ​​rapide à droite ";} // fin si} // fin 'x trop grand' si} // fin 'x trop petit' si} // fin 'y pas assez grand' si} // fin 'sommes-nous en train de tomber? 'if} // end checkLanding

Lorsque vous vérifiez plusieurs conditions à la fois, il est préférable de créer une instruction if séparée pour chacune. Placez chaque instruction if dans la suivante, de sorte que la partie la plus profondément imbriquée du code représente le succès.

1. Déterminez si vous tombez.

   Une variable booléenne nommée falling a été créée. Elle indique si le vaisseau spatial est tombé ou a atterri. Si la chute est vraie, la force de gravité est désactivée. Il est logique de vérifier l'état d'atterrissage si vous êtes en train de tomber.

2. Vérifiez la valeur Y.

   Parce que la plate-forme est placée à une valeur Y de 550, l'atterrisseur semblera atterrir lorsque sa valeur Y est supérieure à 525. Vous n'êtes vraiment concerné que par le fond de l'atterrisseur touchant le sommet de la plate-forme. Notez que cette vérification se produit à l'intérieur de la vérification en baisse. Si une condition échoue, il n'est pas nécessaire de vérifier les autres.

3. Vérifiez la valeur X.

   Vous voulez que le centre de l'atterrisseur se trouve à moins de dix pixels du centre de la plateforme, utilisez donc une paire d'instructions imbriquées if pour vérifier les emplacements X.

4. Vérifier la vitesse horizontale.

   Pour un atterrissage en toute sécurité, l'engin doit avoir une valeur dx comprise entre -0. 2 et 0. 2. (Ceci est quelque peu arbitraire, mais au moment du test, il semble à peu près correct.) Il vaut mieux le vérifier avec une paire d'instructions imbriquées.

5. Vérifiez la vitesse verticale.

   Si tout le reste fonctionne bien, vérifiez que l'engin ne tombe pas trop vite. Utilisez la propriété dy pour déterminer la vitesse de chute de l'engin spatial.

6. Fournissez des commentaires avec les clauses else.

   Une structure profondément imbriquée comme celle-ci vous montre la vraie valeur de l'indentation et du commentaire. Faites des commentaires dans les diverses clauses pour 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 façon la plus simple de le faire est de faire un simple div HTML. Utilisez CSS pour placer le div exactement où vous le souhaitez. Vous devriez rarement utiliser le positionnement absolu dans le développement web normal, cela a du sens dans le contexte de la création d'une étiquette pour un jeu.

Notez que vous devrez peut-être définir une valeur élevée pour la propriété z-index afin qu'elle apparaisse au-dessus de la zone de dessin ou qu'elle ne soit pas visible pour l'utilisateur. Voici le CSS qui donne l'apparence de l'étiquette à l'écran:

#stats {position: absolute; font-family: monospace; à gauche: 50px; haut: 50px; indice z: 999; couleur: blanc;}

Façons d'améliorer votre jeu

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

• Carburant: Ajouter une variable de carburant qui est décrémentée chaque fois que l'utilisateur applique la poussée. La poussée verticale devrait utiliser plus de carburant que les ajustements horizontaux. Si le niveau de carburant devient inférieur à zéro, ignorez les autres entrées de poussée. Ce mécanisme met une complication réaliste dans le jeu.

• Bonus: Ajoutez d'autres fonctionnalités que l'utilisateur peut gagner : bonus de carburant, moins de gravité intense, une plate-forme plus large.

• Atterrissages multiples: Déplacez peut-être l'aire d'atterrissage après un atterrissage réussi, ou demandez à l'utilisateur de porter un objet sur une deuxième plate-forme.

• Obstacles: Placez les débris spatiaux ou les bâtiments de manière à ce que le joueur se bloque au contact.

• Changer le thème: Les mêmes mécanismes peuvent facilement être utilisés pour un jeu d'hélicoptère ou de montgolfière.