La plus grande différence entre un jeu HTML5 et une animation est l'interaction de l'utilisateur. Si vous voulez faire un jeu, vous avez besoin à l'utilisateur d'y participer. Et voici comment faire.

Voici le code:

Conduire 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 quelques 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 réseau mondial. Cette variable est automatiquement créé lorsque vous créez une scène. Il est un tableau de valeurs booléennes - ce qui signifie chaque élément ne peut être que vrai ou seulement fausse.

• Il est une constante définie pour chaque touche. Chaque touche du clavier standard a une constante spéciale déjà défini. Par example, K_A représente le UN clé, et K_B représente le B clé.

• keysDown Indique l'état de chaque touche. Si le UN touche actuellement enfoncée, keysDown [A] contiendra la valeur vrai. Si le UN clé est pas pressé, keysDown [A] contiendra la valeur faux.

• Vous pouvez déterminer l'état actuel des clés. Il suffit de consulter le keysDown [] tableau pour déterminer l'état actuel des clés.

• Vous pouvez avoir plusieurs touches à la fois vers le bas. Le but principal de cette technique est de permettre à plusieurs touches à presser à la fois. En informatique normal, il est rare d'avoir plus d'une touche à la fois. Dans le jeu, il est très fréquent d'appuyer sur plusieurs touches à la fois, si vous avez besoin d'un mécanisme qui peut supporter cette attente.

Comment faire pour déplacer le sprite du jeu

Essentiellement, une image-objet a une position, qui est contrôlée par les propriétés x et y. Si vous vous souvenez de la classe de maths, X représente les valeurs horizontales, et Y est pour l'emplacement vertical. La origine (0, 0) est le coin supérieur gauche de l'écran.

X coordonne le travail tout comme vous vous souvenez de la classe de mathématiques. Comme les valeurs de X Obtenez plus grandes, le sprite déplace vers la droite. En infographie, Y agit un peu différent de ce qu'il a fait dans la classe de mathématiques. La plupart des analyses de matériel d'affichage de haut en bas, de sorte que Y est 0 en haut de l'écran et augmente à mesure que vous vous déplacez vers le bas.

Veuillez noter que la hauteur et la largeur maximales sont mémorisées dans des variables: scene.height et scene.width.

Toutes les différentes méthodes de déplacement sont vraiment sur la manipulation des X et Y. Vous pouvez régler manuellement ces valeurs (setPosition (), setX (), et setY ()), Ou vous pouvez modifier les valeurs (changeXby (), changeYby ()). Chacune de ces méthodes agit immédiatement, de sorte que vous pouvez les utiliser pour diriger la position ou le mouvement du sprite.

Certaines de ces fonctions semble similaire à l'autre. Par example, changeXby () ressemble beaucoup setChangeX (). Ces fonctions ont une différence subtile mais importante. La changeXby () fonction modifie la valeur de X fois. Si vous voulez le changement de continuer, vous devez garder à l'appel de cette fonction.

La setChangeX () fonction est plus puissant parce que vous pouvez appeler cela une seule fois, et il change plusieurs reprises x par quelque valeur que vous déterminez jusqu'à ce que vous appelez setChangeX () de nouveau.

Pour la plupart des sprites, vous voulez vraiment donner tout simplement le sprite un angle et une vitesse, et le laisser aller. La lutin objet a exactement les méthodes dont vous avez besoin pour ce comportement. setAngle () vous permet de déterminer la direction du sprite ira, et SetSpeed ​​() vous permet de spécifier la vitesse pour aller dans cette direction. Comme la plupart des fonctions de mouvement, il ya aussi changeAngle () et changeSpeed ​​() méthodes.

Comment contrôler la voiture dans votre jeu

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

 mise à jour du function () {de scene.clear () - // touches de contrôle  if (keysDown [K_LEFT]) { car.changeAngleBy (-5) - } // fin si  if (keysDown [K_RIGHT]) { car.changeAngleBy (5) - } // fin si  if (keysDown [K_UP]) { car.changeSpeedBy (1) - } // fin si  if (keysDown [K_DOWN]) { car.changeSpeedBy (-1) - } // fin si car.update () -} // mise à jour de fin

Le codage réel est assez facile à comprendre:

1. Désactivez la scène.

   Comme d'habitude, le premier ordre du jour dans le mettre à jour() la fonction est de nettoyer la salle de jeux. Assurez-vous que vous avez effacé la trame précédente avant de faire quoi que ce soit d'autre.

2. Vérifiez la gauche; Appuyez sur la flèche.

   Utilisez le keysDown mécanisme pour déterminer si la flèche vers la gauche est actuellement enfoncée.

3. Si la flèche gauche est enfoncée, tourner la voiture à gauche.

   Si l'utilisateur est actuellement pression sur le côté gauche; touche de flèche, tourner la voiture cinq degrés dans le sens antihoraire. Utilisez le changeAngleBy () méthode pour changer l'aspect visuel de la voiture ainsi que la direction à laquelle ça voyage.

4. Répétez l'opération pour la flèche droite.

   La vérification de la flèche vers la droite est similaire, mais cette fois tourner la voiture cinq degrés vers la droite.

5. Utilisez la flèche haut pour accélérer.

   Si l'utilisateur appuie sur la flèche vers le haut, modifier la vitesse de la voiture. Utilisez une valeur positive pour accélérer la voiture. Il ne prendra pas beaucoup parce que ce code est en cours de vérification 20 fois par seconde.

6. Ralentir la voiture avec la flèche vers le bas.

   Utiliser un mécanisme similaire pour la flèche vers le bas. Changer la vitesse par une valeur négative de ralentir la voiture. Cette approche permet de valeurs négatives, et la voiture va sauvegarder si vous voulez.

7. Dessiner la voiture dans sa nouvelle position.

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