Comment construire une animation avec simpleGame. js Votre jeu HTML5 - les nuls

Il est possible de créer une bibliothèque qui simplifie toutes les fonctionnalités du moteur de jeu HTML5. Envisagez d'utiliser la bibliothèque: simpleGame. js. Cette bibliothèque est facile à utiliser et est entièrement capable de développer des jeux sophistiqués. Pour commencer, vous n'avez vraiment besoin de comprendre que deux objets:

• La scène: Cet objet commence par un objet de canevas HTML et ajoute la boucle principale. La scène est l'objet unificateur qui contrôle le jeu.

• Sprites: Ces objets sont les éléments qui se déplacent sur l'écran. La plupart des éléments du jeu sont des sprites. Chaque sprite doit appartenir à une seule scène, mais vous pouvez avoir autant de sprites que vous le souhaitez. Un sprite est basé sur une image.

  

Ce code est en réalité beaucoup plus sophistiqué qu'il n'y paraît. Voici ce qu'il fait:

• Il ajoute une toile à la page. Le rectangle gris est en fait une balise de canevas automatiquement ajoutée à la page.

• Il commence une boucle de jeu. Ce programme a déjà une boucle de jeu de 20 images par seconde.

• Il contient un sprite. L'image de la balle est une image-objet qui a la capacité de déplacer n'importe quelle vitesse dans n'importe quelle direction et d'autres fonctions intéressantes comme la détection de collision.

• La balle bouge. Il s'enroule automatiquement de l'autre côté de l'écran lorsqu'il laisse un côté.

Voici la liste complète des codes:

redBall. html // jeu simple avec une seule scène de balle en mouvement; var ball; Fonction init () {scene = new Scène (); balle = nouveau Sprite (scène, "redBall.png", 50, 50); ballon. setMoveAngle (180); ballon. setSpeed ​​(3); scène. start ();} // fin de la fonction init () {scene. clair(); ballon. update ();} // update_fin

Vous commencez par une page HTML5 de base et ajoutez quelques fonctionnalités pour la transformer en un environnement de jeu.

Comment créer votre page de jeu

Commencez par créer la page sous-jacente:

1. Commencez avec une page HTML5.

   Vous pouvez utiliser les mêmes outils que ceux que vous avez utilisés pour votre autre développement Web. Créez un modèle HTML5 de base comme vous le faites pour tout autre document HTML5.

2. Importez le jeu simple. bibliothèque js.

   Cette bibliothèque est disponible gratuitement sur le site Web. Utilisez une étiquette pour importer la bibliothèque. Définissez la propriété src sur le nom de la bibliothèque (simpleGame.js).

3. Gardez le HTML simple.

   Vous n'avez pas besoin de beaucoup. Le moteur de jeu créera une toile contenant la scène. Vous pourriez mettre un titre, des instructions, ou d'autres outils comme des tableaux de bord sur la page, mais le moteur de jeu fera la plupart du travail.

4. Appelez init () lorsque le corps est chargé.

   Il est très fréquent d'avoir une fonction appelée quand le corps se charge. Ajoutez onload = "init ()" à la balise body pour appeler la méthode init ().

5. Créez une deuxième balise de script pour contenir votre code.

   Vous devez avoir une deuxième balise de script pour le code personnalisé. Placez-le après le tag qui importe la bibliothèque.

6. Placez deux fonctions dans votre script.

   Tous les programmes simpleGame auront au moins deux fonctions: init () arrive au démarrage, et update () arrive une fois par image.

Comment initialiser votre jeu

La partie d'initialisation du jeu se produit au chargement de la page. Il est principalement utilisé pour configurer des sprites et d'autres ressources. Voici le code:

var scene; var ball; Fonction init () {scene = new Scène (); balle = nouveau Sprite (scène, "redBall.png", 50, 50); ballon. setMoveAngle (180); ballon. setSpeed ​​(3);} // end init

La plupart des jeux utiliseront un style d'initialisation similaire. Voici comment configurer le jeu:

1. Définissez une variable pour contenir la scène.

   Chaque jeu simpleGame aura au moins un objet scène. Définir la scène en dehors de toutes les fonctions, de sorte qu'il est disponible pour tous. Vous allez réellement créer la scène dans la fonction init ().

2. Définissez une variable pour chaque sprite.

   Chaque sprite de votre jeu devra également appartenir à une variable globale. Vous allez créer les sprites dans la fonction init (), mais vous devez rendre la variable disponible pour toutes les fonctions.

3. Construire la fonction init ().

   Cette fonction est appelée par body onload. Il fonctionnera après que la page ait été chargée en mémoire.

4. Créez la scène.

   Pour créer la scène, créez une instance de la classe de scène. Ce que vous dites vraiment, c'est "Faites de moi un objet Scène et appelez cette scène particulière". '"La scène ne nécessite aucun paramètre.

5. Créez le sprite de la balle.

   La balle est une instance de Sprite. Pour créer un sprite, vous avez besoin de quelques informations supplémentaires. Vous avez besoin d'une scène, d'un nom de fichier d'image, de la largeur et de la hauteur.

6. Définissez l'angle de déplacement de la balle.

   Vous pouvez changer l'angle de déplacement de la balle. Les angles sont mesurés en degrés comme sur une carte.

7. Réglez la vitesse de déplacement de la balle.

   Vous pouvez également déterminer la vitesse de la balle.

8. Démarrer la scène.

   Lorsque vous avez fini de tout configurer, dites à la scène de commencer.

Mettre à jour l'animation du jeu

Une fois que vous avez démarré la scène, une minuterie commence. Vingt fois par seconde, il appellera une fonction sur votre page appelée update (). Donc, vous devez avoir une telle fonction, et il doit avoir du code pour que votre jeu fonctionne.

La fonction update () n'est pas très difficile non plus.

fonction update () {scène. clair(); ballon. update ();} // update_fin

La fonction update () fait généralement trois choses:

• Efface l'écran précédent: Le premier ordre du jour est de nettoyer les dégâts causés par le dernier écran. L'objet Scene a une fonction clear () dans ce but précis.

• Vérifie les événements: En règle générale, vous vérifiez les événements, comme la saisie par l'utilisateur, les sprites qui se plantent les uns dans les autres, les sprites qui quittent l'écran ou quoi que ce soit.Pour cette animation simple, le seul événement est un sprite sortant de l'écran, et le comportement associé à cette action a été automatisé.

• Met à jour chaque image-objet: La dernière partie de la mise à jour d'écran met à jour les images-objets. Lorsque vous mettez à jour un sprite, il dessine dans sa nouvelle position.

Voici ce qui se passe si vous n'effacez pas l'écran. Tout le mouvement du sprite sera dessiné sur la toile, et il ressemble à un gros frottis plutôt qu'à une balle en mouvement.