Comment créer une interaction utilisateur dans votre jeu HTML5 - les mannequins

La plus grande différence entre un jeu HTML5 et une animation est l'interaction de l'utilisateur. Si vous voulez en faire un jeu, vous avez besoin de l'utilisateur pour s'impliquer. Et voici comment le faire.

Voici le code:

voiture. html var scène; var voiture; Fonction init () {scene = new Scène (); voiture = nouveau Sprite (scène, "voiture.png", 50, 30); voiture. setAngle (270); voiture. setSpeed (0); scène. start ();} // fin de la fonction init () {scene. clair(); // vérifier les clés if (keysDown [K_LEFT]) { car. changeAngleBy (-5); } // fin si if (keysDown [K_RIGHT]) { voiture. changeAngleBy (5); } // fin si if (keysDown [K_UP]) { voiture. changeSpeedBy (1); } // fin si if (keysDown [K_DOWN]) { voiture. changeSpeedBy (-1); } // fin si voiture. update ();} // fin de la mise à jour

Conduisez la voiture!

Comment utiliser le clavier pour votre jeu

D'une certaine manière, l'utilisateur doit interagir avec la page. Le clavier est l'un des éléments d'entrée les plus faciles à utiliser. SimpleGame fournit plusieurs façons de vérifier le clavier, mais la technique la plus puissante utilise une variable spéciale appelée keysDown. Voici comment cela fonctionne:

keysDown est un tableau global. Cette variable est automatiquement créée lorsque vous construisez une scène. C'est un tableau de valeurs booléennes - cela signifie que chaque élément peut être seulement vrai ou seulement faux.
Il y a une constante définie pour chaque touche. Chaque touche du clavier standard possède une constante spéciale déjà définie. Par exemple, K_A représente la clé A et K_B représente la clé B.
keysDown indique l'état de chaque touche. Si vous appuyez sur la touche A, keysDown [A] contiendra la valeur true. Si la touche A n'est pas pressée, keysDown [A] contiendra la valeur false.
Vous pouvez déterminer l'état actuel de n'importe quelle touche. Vérifiez simplement le tableau keysDown [] pour déterminer l'état actuel de n'importe quelle touche.
Vous pouvez avoir plusieurs touches en même temps. L'objectif principal de cette technique est de pouvoir appuyer sur plusieurs touches à la fois. En informatique normale, il est inhabituel d'avoir plus d'une clé à la fois. Dans les jeux, il est très courant d'appuyer sur plus d'une touche à la fois, vous avez donc besoin d'un mécanisme capable de répondre à cette attente.

Comment faire pour déplacer l'image-objet du jeu

Essentiellement, un sprite a une position, qui est contrôlée par les propriétés X et Y. Si vous vous souvenez de la classe mathématique, X représente les valeurs horizontales et Y est la position verticale. L'origine (0, 0) est le coin supérieur gauche de l'écran.

Les coordonnées X fonctionnent comme vous vous en souvenez depuis la classe de mathématiques. Lorsque les valeurs X deviennent plus grandes, l'image-objet se déplace vers la droite. En informatique graphique, Y agit un peu différemment de ce qu'il a fait en classe de mathématiques.La plupart affichent des analyses matérielles de haut en bas, donc Y est 0 en haut de l'écran et augmente à mesure que vous descendez.

Notez que la hauteur et la largeur maximales sont stockées dans des variables: scene. hauteur et scène. largeur.

Toutes les différentes méthodes de mouvement concernent vraiment la manipulation de X et Y. Vous pouvez définir ces valeurs manuellement (setPosition (), setX () et setY ()), ou vous pouvez changer les valeurs (changeXby (), changeYby ()). Chacune de ces méthodes agit immédiatement, vous pouvez donc les utiliser pour diriger la position ou le mouvement de l'image-objet.

Certaines de ces fonctions semblent similaires les unes aux autres. Par exemple, changeXby () ressemble beaucoup à setChangeX (). Ces fonctions ont une différence subtile mais importante. La fonction changeXby () modifie la valeur de X une fois. Si vous voulez que la modification continue, vous devez continuer à appeler cette fonction.

La fonction setChangeX () est plus puissante parce que vous pouvez l'appeler une seule fois, et elle change de façon répétée x par la valeur que vous déterminez jusqu'à ce que vous appeliez à nouveau setChangeX ().

Pour la plupart des sprites, vous voulez simplement donner à l'image-objet un angle et une vitesse, et laisser aller. L'objet sprite a exactement les méthodes dont vous avez besoin pour ce comportement. setAngle () vous permet de déterminer la direction dans laquelle l'image-objet ira, et setSpeed () vous permet de spécifier la vitesse à suivre dans cette direction. Comme la plupart des fonctions de mouvement, il existe aussi des méthodes changeAngle () et changeSpeed ().

Comment contrôler la voiture dans votre jeu

Le mécanisme keysDown peut être combiné avec les méthodes de mouvement pour contrôler facilement votre voiture. Voici à nouveau le code de update ():

function update () {scene. clair(); // vérifier les clés if (keysDown [K_LEFT]) { car. changeAngleBy (-5); } // fin si if (keysDown [K_RIGHT]) { voiture. changeAngleBy (5); } // fin si if (keysDown [K_UP]) { voiture. changeSpeedBy (1); } // fin si if (keysDown [K_DOWN]) { voiture. changeSpeedBy (-1); } // fin si voiture. update ();} // end update

Le codage actuel est assez facile à comprendre:

Effacer la scène.

Comme d'habitude, le premier point de la fonction update () est de nettoyer la salle de jeux. Assurez-vous d'avoir effacé l'image précédente avant de faire quoi que ce soit d'autre.
Vérifiez la flèche gauche.

Utilisez le mécanisme keysDown pour déterminer si la flèche gauche est actuellement enfoncée.
Si vous appuyez sur la flèche gauche, tournez la voiture vers la gauche.

Si l'utilisateur appuie actuellement sur la touche fléchée vers la gauche, tournez la voiture de cinq degrés dans le sens inverse des aiguilles d'une montre. Utilisez la méthode changeAngleBy () pour modifier l'apparence visuelle de la voiture ainsi que la direction dans laquelle elle se déplace.
Répétez pour la flèche droite.

La flèche vers la droite est similaire, mais cette fois, tournez la voiture de cinq degrés dans le sens des aiguilles d'une montre.
Utilisez la flèche vers le haut pour accélérer.

Si l'utilisateur appuie sur la flèche vers le haut, changez la vitesse de la voiture. Utilisez une valeur positive pour accélérer la voiture. Cela ne prendra pas grand chose car ce code est vérifié 20 fois par seconde.
Ralentissez la voiture avec la flèche descendante.

Utilisez un mécanisme similaire pour la flèche vers le bas.Changez la vitesse d'une valeur négative pour ralentir la voiture. Cette approche permet des valeurs négatives, et la voiture va sauvegarder si vous le souhaitez.
Dessinez la voiture dans sa nouvelle position.

Il est extrêmement important de se rappeler que l'appel des fonctions de mouvement du sprite ne change pas l'emplacement de la voiture! Il ne modifie que les données internes dans la mémoire du jeu. Vous devez appeler la méthode update () de la voiture pour voir ces changements en action.