Vidéo: Pour une approche plus créative de l'accessibilité du Web 2025
Il y aura des moments où vous réutiliserez des objets plusieurs fois dans vos jeux HTML5 et ils resteront à peu près les mêmes. Donc, il est logique de les mettre dans une bibliothèque pour une réutilisation facile. C'est exactement ce que vous allez faire. Jetez un oeil à frogLib. js:
// frogLib. js // Objets pour la fonction de jeu de grenouille Fly () {tFly = nouveau Sprite (scene, "fly.png", 20, 20); tFly. setSpeed (10); tFly. wriggle = function () {// change de direction par une quantité aléatoire newDir = (Math.weat () * 90) - 45; ce. changeAngleBy (newDir);} // fin wriggle return tFly;} // finit la fonction Fly Frog () {tFrog = nouveau Sprite (scène, "frog.png", 50, 50); tFrog. maxSpeed = 10; tFrog. minSpeed = -3; tFrog. setSpeed (0); tFrog. setAngle (0); tFrog. checkKeys = function () {if (keysDown [K_LEFT]) {this. changeAngleBy (-5);} // fin si if (keysDown [K_RIGHT]) {this. changeAngleBy (5);} // fin si if (keysDown [K_UP]) {this. changeSpeedBy (1); if (this. speed> this. maxSpeed) {ceci. setSpeed (this.maxSpeed);} // fin si} // fin si if (keysDown [K_DOWN]) {this. changeSpeedBy (-1); if (this. speed
Ceci est un document intéressant. Il ne contient que les définitions des deux classes. Il est utilisé car plusieurs autres programmes utiliseront ces deux classes.
L'utilisation d'une bibliothèque est la simplicité même. Voici le frogFly. fichier html qui met ces deux éléments ensemble dans un seul jeu:
frogFly. html src = "frogLib. js"> var scène; var grenouille; var fly; feuilles de var; Fonction init () {scene = new Scène (); scène. setBG ("vert"); grenouille = nouvelle grenouille (); voler = nouveau Fly (); leaves = new Sprite (scène, "feuilles.png", 640, 480); feuilles. setSpeed (0); scène. start ();} // fin de la fonction init () {scene. clair(); grenouille. checkKeys (); mouche. frétiller(); feuilles. mettre à jour(); grenouille. mettre à jour(); mouche. update ();} // update ();
Ce programme ne présente pas grand-chose de nouveau. Il implémente simplement les éléments définis dans la bibliothèque, selon les étapes suivantes:
-
Importer le froglib. bibliothèque js.
Le fichier frogLib est simplement un fichier JavaScript. Importez-le de la même manière que vous importez le jeu simple. fichier js, avec un tag séparé.
-
Créez les sprites.
Le sprite de feuilles est juste un sprite ordinaire. Construire la grenouille et voler comme vous l'avez fait auparavant, même si elles sont définies dans un autre fichier. (Si la grenouille ou la mouche n'est pas créée, assurez-vous d'avoir importé la bibliothèque correctement.)
-
Gérer le changement.
La fonction update () prend la responsabilité du contrôle du jeu. C'est ici que vous gérez tous les comportements des sprites: Dites à la grenouille de chercher les frappes (avec la méthode frog, checkKeys ()), et dites à la mouche de se trémousser (avec la méthode fly.wiggle ()).
-
Dessine les sprites.
Une fois que vous avez géré tout ce qui a causé le changement des sprites, dessinez les sprites à l'écran. Dessinez chaque image-objet en appelant sa méthode update (). Les sprites sont dessinés dans l'ordre, donc tout ce que vous voulez avoir en arrière-plan devrait être dessiné avant les éléments qui s'afficheront devant. (La grenouille apparaîtra au-dessus de l'arrière-plan, de sorte que la grenouille devrait être dessinée après l'arrière-plan sur chaque mise à jour de l'écran.)
