Video: Was ist Skalierbarkeit? | Programmieren lernen mit JavaScript #32 2025
Es wird Zeiten geben, in denen Sie Objekte in Ihren HTML5-Spielen mehrfach wiederverwenden und sie werden ungefähr gleich bleiben. Daher ist es sinnvoll, sie zur einfachen Wiederverwendung in eine Bibliothek zu stellen. Genau das wirst du tun. Werfen Sie einen Blick auf FrogLib. js:
// FrogLib. js // Objekte für die Froschspielfunktion Fly () {tFly = new Sprite (Szene, "fly. png", 20, 20); tFly. setSpeed (10); tFly. wriggle = function () {// ändere die Richtung um einen zufälligen Betrag newDir = (Math. random () * 90) - 45; Dies. changeAngleBy (newDir);} // end wriggle return tFly;} // Ende Fly-Funktion Frog () {tFrog = new Sprite (Szene, "Frosch. 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);} // end wenn if (SchlüsselDown [K_RIGHT]) {this. changeAngleBy (5);} // end wenn if (SchlüsselDown [K_UP]) {this. changeSpeedBy (1); if (this. speed> this. maxSpeed) {this. setSpeed (this. maxSpeed);} // end if} // end if Wenn (keysDown [K_DOWN]) {this. changeSpeedBy (-1); wenn (dies. speed
Dies ist ein interessantes Dokument. Es enthält nichts anderes als die beiden Klassendefinitionen. Es wird verwendet, weil mehrere andere Programme diese beiden Klassen verwenden werden.
Die Verwendung einer Bibliothek ist einfach. Hier ist der FroschFly. HTML-Datei, die diese beiden Elemente in einem einzigen Spiel zusammenfügt:
frogFly. html src = "frogLib. js"> var Szene; Var Frosch; var fliegen; var Blätter; function init () {scene = neue Szene (); Szene. setBG ("grün"); Frosch = neuer Frosch (); Fliege = neue Fliege (); Blätter = neues Sprite (Szene, "Blätter. Png", 640, 480); Blätter. setSpeed (0); Szene. start ();} // end init Funktion update () {Szene. klar(); Frosch. checkKeys (); Fliege. zappeln(); Blätter. aktualisieren(); Frosch. aktualisieren(); Fliege. update ();} // Ende update ();
Dieses Programm führt nicht viel Neues ein. Es implementiert einfach die in der Bibliothek definierten Elemente gemäß diesen Schritten:
-
Importieren Sie das Froglib. js Bibliothek.
Die FrogLib-Datei ist einfach eine JavaScript-Datei. Importiere es auf die gleiche Weise wie du das simpleGame importierst. js-Datei mit einem separaten Tag.
-
Erstelle die Sprites.
Das Blätter-Sprite ist nur ein gewöhnliches Sprite. Bauen Sie den Frosch und fliegen Sie wie zuvor, obwohl sie in einer anderen Datei definiert sind. (Wenn der Frosch oder die Fliege nicht erstellt wird, stellen Sie sicher, dass Sie die Bibliothek korrekt importiert haben.)
-
Änderung verwalten.
Die Funktion update () übernimmt die Kontrolle über das Spiel. Hier verwalten Sie alle verschiedenen Sprite-Verhaltensweisen: Sagen Sie dem Frosch, dass er nach Tastenanschlägen suchen soll (mit der Methode frosch. CheckKeys ()) und sagen Sie der Fliege, dass sie sich windet (mit der Methode fly. Wriggle ()).
-
Zeichne die Sprites.
Nachdem Sie alle Änderungen an den Sprites vorgenommen haben, zeichnen Sie die Sprites auf dem Bildschirm. Zeichnen Sie jedes Sprite, indem Sie seine update () -Methode aufrufen. Sprites werden in der Reihenfolge gezeichnet, also sollte alles, was Sie im Hintergrund haben möchten, vor Elementen gezeichnet werden, die vor angezeigt werden. (Der Frosch erscheint oben auf dem Hintergrund, also sollte der Frosch bei jedem Bildschirmupdate hinter dem Hintergrund gezeichnet werden.)
