Vidéo: Créez rapidement et facilement des jeux JavaScript HTML5 avec le Framework Phaser 2025
Les propriétés décrivent les caractéristiques d'un objet dans votre jeu HTML 5, et les méthodes décrivent le comportement. Une méthode est une fonction associée à un objet. Vous construisez des méthodes très semblables à la création d'une propriété, mais plutôt que d'ajouter une valeur simple, vous affectez une fonction entière à un nom.
Par exemple, la prochaine version du critter a une méthode changeSpeed (). Lorsque l'utilisateur appuie sur la flèche vers le haut, la créature va accélérer, et lorsque l'utilisateur appuie sur la flèche vers le bas, la créature va ralentir (et finalement aller dans l'autre sens). Voici le code de la créature avec sa nouvelle méthode en place:
critterChangeSpeed. jeu html var; var critter; function Critter () {tCritter = nouveau Sprite (jeu, "critter.gif", 30, 30); tCritter. vitesse = 0; tCriteur. checkKeys = function () { if (keysDown [K_RIGHT]) { this. vitesse ++; } if (keysDown [K_LEFT]) { cela. la vitesse--; } tCriteur. setSpeed (cette vitesse); } // fin de la méthode return tCritter;} fonction init () {game = new Scène (); critter = nouveau Critter (); Jeu. start ();} fonction update () {jeu. clair(); critter. checkKeys (); critter. update ();}
Notez qu'il se déplace lorsque l'utilisateur appuie sur les touches. Pour cela et la plupart des exemples, une image statique ne sera pas suffisante pour vous aider à voir ce qui se passe.
Dans cette nouvelle version du programme, l'objet Critter a un nouveau comportement identifié. Essentiellement, une méthode n'est rien de plus qu'une fonction définie dans une classe. Ne paniquez pas. Ce n'est vraiment pas si difficile à comprendre. Vous dites au système ce qu'il doit faire si l'utilisateur demande à l'objet Critter de changer de vitesse.
-
Créez une nouvelle propriété appelée checkKeys.
En JavaScript, une propriété et une méthode sont exactement la même chose. Si vous attachez une variable régulière à un objet, c'est une propriété. Si vous lui attachez une fonction, c'est une méthode. (Les noms de propriété sont normalement des noms Les noms de méthodes sont normalement des verbes ou des phrases de verbes.)
-
Construire une nouvelle méthode pour contenir le comportement.
changeSpeed n'est pas une propriété ordinaire, mais une méthode, donc vous y attacherez une fonction. (Pour les majors de l'informatique, construire une fonction anonyme à la volée comme ceci est un exemple d'une fonction lambda Surveillez-la à l'examen de mi-session!)
-
Vérifiez la saisie au clavier.
Lorsque vous créez un objet Critter, il sait déjà comment rechercher ses propres touches.
-
Modifiez la vitesse en fonction de la saisie au clavier.
Si l'utilisateur appuie à droite, augmentez la vitesse (dans le sens par défaut, les vitesses positives déplacent le sprite vers la droite).Si l'utilisateur appuie à gauche, diminuez la vitesse.
-
Utilisez la méthode setSpeed () pour modifier la vitesse réelle.
L'objet Sprite qui fournit le plan pour critter a déjà une méthode setSpeed (). Utilisez cette méthode pour faire bouger l'objet à la vitesse indiquée.
-
Dans une méthode, utilisez le mot-clé this.
Lorsque vous créez une méthode dans un constructeur, l'ordinateur peut être un peu confus au sujet des noms de choses. Pour la plupart, vous ajoutez des éléments à une créature temporaire appelée tCritter. Pour éliminer la confusion, si vous devez vous référer à d'autres propriétés ou méthodes de l'objet que vous modifiez, utilisez le mot-clé general plutôt que le nom réel de l'objet.
-
Modifiez la fonction update () pour que la créature vérifie le clavier.
Rappelez-vous que la fonction principale update () est disponible une fois par image. Tout ce que vous voulez faire une fois par image doit être appelé dans update (). Ajoutez un appel à critter. checkKeys (). Cela rappellera à la créature de vérifier le clavier à chaque image et de changer sa vitesse au besoin.
