Comment créer un pilote de courrier dans votre jeu de html5

Ceci est un type de jeu de course de défilement, vous pouvez utiliser dans votre HTML5. Ce type de jeu a longtemps été un aliment de base de l'univers du jeu vidéo, car il peut y avoir autant de variations intéressantes.

Dans cette itération particulière, vous êtes un pilote d'un avion au-dessus voler un archipel de l'île. Votre travail consiste à survoler les îles et d'éviter les nuages. Le jeu dispose d'un contrôle de l'utilisateur de la position X de l'avion et un monde défilement infini.

• Identifier les variables clés: Dans ce jeu, les principales variables sont l'avion, les îles et les nuages. Tous les objets sont mis en œuvre de sprite.

• Créer chaque objet dans l'isolement: Identifiez ce que chaque objet doit faire et mettre en œuvre ces fonctions de base.

• Construire une seule element- puis le convertir en un tableau: La nuages objet est vraiment un tableau. Il est très fréquent d'avoir des tableaux d'objets. La clé est de construire un seul élément premier qui fait ce que vous voulez et ensuite convertir cet objet à un tableau.

  Typiquement, si vous le faites, vous allez construire deux fonctions personnalisées. La première fonction crée le tableau et utilise un pour boucle pour initialiser chaque objet dans le tableau. La seconde fonction a aussi un pour boucle qui guide à travers chaque objet, en invoquant l'une de ses fonctions d'événement et mettre à jour chaque objet sur l'écran.

• Gérer les interactions: La plupart des choses intéressantes qui se passent dans un jeu d'arcade se produisent lorsque les objets entrent en collision, de sorte routines de collision sont une partie importante du développement de jeux.

Comment construire un "sans fin" de fond de jeu

Une caractéristique intéressante de ce jeu est l'arrière-plan en mosaïque sans fin. L'utilisateur avatar ne pas avancer du tout. Au lieu de cela, l'illusion du mouvement vient d'avoir un fond qui descend perpétuellement, le faire ressembler à l'avion se déplace vers le haut.

Bien sûr, il est impossible de créer un fond vraiment sans fin, mais vous pouvez faire quelques trucs pour produire une illusion crédible:

1. 
   
   
   
   

   Construire un sprite pour le fond.

   La meilleure façon d'obtenir le comportement de mouvement de fond est tout simplement de rendre le fond un très grand sprite.

2. Créer une image plus grande que la scène.

   Comme ce graphique particulier est censé mosaïque verticale, il a été fait la largeur de la scène (800px), mais beaucoup plus grand que la scène (1440px de hauteur pour une grande scène 600px). Grandes tailles conduisent à répétition moins évident, mais seront plus de ressources. Si vous voulez le défilement horizontal, rendre votre image plus grande sur l'axe X de la scène.

3. Dupliquer le haut et le bas.

   La clé d'un effet de défilement "sans fin" est d'avoir le haut et le bas (ou à gauche et à droite d'une image horizontale) identique à l'autre. Utilisez la copie et l'outil de pâte de votre logiciel graphique avec le clone et des outils de souillure pour obtenir cet effet.

4. Ecrasez le CheckBounds fonction.

   Le sprite de fond devra comportement limite coutume, afin de remplacer les sprites CheckBounds Procédé.

5. Vérifiez que l'arrière-plan ne quitte jamais l'écran.

   Dans l'exemple Courrier pilote, le sprite commence au-dessus de la scène et se déplace vers le bas. Avec un peu de tests (et le console.log () commande), le fond commence à quitter la scène à une valeur Y de 720. Utilisez un si déclaration pour vérifier quand cela arrive.

6. Déplacez le fond de sorte que la section identique est à l'affiche.

   Le haut et le bas de la océan gif sont les mêmes, alors quand l'océan est sur le point de quitter la scène, l'utilisateur est de voir le haut de la grande océan gif. Modifiez la valeur Y afin que l'utilisateur voit maintenant le fond identique de la même .jpg, et la faire avancer. Vous devrez peut-être utiliser console.log () et certains tests pour le faire fonctionner comme vous le souhaitez.

Voici le code pour le CheckBounds () méthode de sorte que vous pouvez le voir en action. Notez que vous aurez à changer les valeurs spécifiques pour correspondre à votre taille de l'image.

 tOcean.checkBounds = function () {// repeatsif transparente océan gif (this.y> 720) {this.setPosition (400, -120)} // fin si} // CheckBounds finaux

Améliorer top-down coureur de votre jeu

Ce type de jeu est très populaire car il est facile d'écrire et peut être modifié dans un certain nombre de moyens simples pour obtenir de nombreux types de jeux. Voici quelques suggestions:

• Ajouter un mécanisme de notation. L'amélioration la plus évidente consiste à ajouter une sorte de système de notation. Souligne Award pour toucher les îles et emporter vie pour toucher les nuages.

• Construire le niveau de difficulté. Pensez à ajouter plus de nuages, modification de la taille des différents éléments, ou de changer la vitesse.

• Ajouter des bonus. Powerups sont sprites simples qui fournissent une sorte de profit ou de désavantage quand ils sont activés (habituellement en tirant ou en cours d'exécution au cours de la mise sous tension). Les options sont presque illimitées, mais voici quelques idées de départ: autoriser temporairement le mouvement vertical ainsi que horizontale, changer la vitesse, et de rendre le plan plus ou moins grande.

• Changer la motion. En ce moment, l'avion ne se déplace que sur l'axe horizontal. Permettant un mouvement sur l'axe vertical ainsi va changer radicalement le gameplay.

• Ajouter armes. Ajouter balles pour une tournure intéressante. Si vous voulez beaucoup de balles, vous aurez besoin pour créer un tableau.

• Passer à défilement horizontal. Vous pouvez passer à défilement horizontal assez facilement. Vous pouvez également permettre le défilement soit dans l'axe, mais vous aurez à penser vraiment à travers les aspects limite-checking.