Wie man Animation mit simpleGame erstellt. js Ihr HTML5-Spiel - Dummies

Es ist möglich, eine Bibliothek zu erstellen, die alle verschiedenen HTML5-Game-Engine-Funktionen vereinfacht. Erwägen Sie die Verwendung der Bibliothek: simpleGame. js. Diese Bibliothek ist einfach zu bedienen und eignet sich hervorragend für anspruchsvolle Spieleentwicklungen. Um zu beginnen, müssen Sie wirklich nur zwei Objekte verstehen:

• Die Szene: Dieses Objekt beginnt mit einem HTML-Canvas-Objekt und fügt die Hauptschleife hinzu. Die Szene ist das vereinheitlichende Objekt, das das Spiel steuert.

• Sprites: Diese Objekte sind die Elemente, die sich auf dem Bildschirm bewegen. Die meisten Spielelemente sind Sprites. Jedes Sprite muss zu einer einzelnen Szene gehören, aber Sie können so viele Sprites haben, wie Sie möchten. Ein Sprite basiert auf einem Bild.

  

Dieser Code ist tatsächlich viel anspruchsvoller als er aussieht. Hier ist was es tut:

• Es fügt der Seite eine Leinwand hinzu. Das graue Rechteck ist eigentlich ein Canvas-Tag, das der Seite automatisch hinzugefügt wurde.

• Es beginnt eine Spielschleife. Dieses Programm hat eine Spielschleife, die bereits mit 20 Bildern pro Sekunde läuft.

• Es enthält ein Sprite. Das Ballbild ist ein Sprite, das die Fähigkeit hat, jede Geschwindigkeit in jede Richtung zu bewegen, und andere interessante Features wie Kollisionserkennung eingebaut.

• Der Ball bewegt sich. Es wird automatisch auf die andere Seite des Bildschirms gewickelt, wenn es eine Seite verlässt.

Hier ist die gesamte Code-Liste:

redBall. html // einfaches Spiel mit einer einzigen Szene mit beweglichem Ball var; var Ball; function init () {scene = neue Szene (); ball = new Sprite (Szene, "redBall. png", 50, 50); Ball. setMoveAngle (180); Ball. setSpeed ​​(3); Szene. start ();} // end init Funktion update () {Szene. klar(); Ball. update ();} // update beenden

Sie beginnen mit einer einfachen HTML5-Seite und fügen ein paar Features hinzu, um sie in eine Spielumgebung zu verwandeln.

So erstellen Sie Ihre Spieleseite

Beginnen Sie mit dem Erstellen der zugrunde liegenden Seite:

1. Beginnen Sie mit einer HTML5-Seite.

   Sie können dieselben Tools verwenden, die Sie bereits für Ihre andere Webentwicklung verwendet haben. Erstellen Sie eine einfache HTML5-Vorlage wie für jedes andere HTML5-Dokument.

2. Importiere das simpleGame. js Bibliothek.

   Diese Bibliothek ist kostenlos auf der Website verfügbar. Importieren Sie die Bibliothek mit einem Tag. Setzen Sie die Eigenschaft src auf den Namen der Bibliothek (simpleGame. Js).

3. Halten Sie den HTML-Code einfach.

   Sie brauchen nicht viel. Die Spielengine wird eine Leinwand erstellen, die die Szene enthält. Sie können einen Titel, Anweisungen oder andere Tools wie Anzeigetafeln auf der Seite platzieren, aber die Spiele-Engine erledigt die meiste Arbeit.

4. Rufen Sie init () auf, wenn der Körper geladen wird.

   Es ist sehr üblich, dass eine Funktion aufgerufen wird, wenn der Körper geladen wird. Fügen Sie dem body-Tag onload = "init ()" hinzu, um die init () -Methode aufzurufen.

5. Erstellen Sie ein zweites Skript-Tag, das Ihren Code enthält.

   Sie benötigen ein zweites Skript-Tag für benutzerdefinierten Code. Platzieren Sie das nach dem Tag, das die Bibliothek importiert.

6. Platzieren Sie zwei Funktionen in Ihrem Skript.

   Alle Programme von simpleGame haben mindestens zwei Funktionen: init () geschieht beim Start und update () passiert einmal pro Frame.

So initialisieren Sie Ihr Spiel

Der Initialisierungsteil des Spiels wird beim Laden der Seite ausgeführt. Es ist hauptsächlich mit dem Einrichten von Sprites und anderen Ressourcen beschäftigt. Hier ist der Code:

var Szene; var Ball; function init () {scene = neue Szene (); ball = new Sprite (Szene, "redBall. png", 50, 50); Ball. setMoveAngle (180); Ball. setSpeed ​​(3);} // end init

Die meisten Spiele verwenden einen ähnlichen Initialisierungsstil. So richten Sie das Spiel ein:

1. Definieren Sie eine Variable, die die Szene enthält.

   Jedes simpleGame-Spiel hat mindestens ein Szenenobjekt. Definieren Sie die Szene außerhalb von Funktionen, so dass sie für alle verfügbar ist. Sie werden die Szene tatsächlich in der Funktion init () erstellen.

2. Definiere eine Variable für jedes Sprite.

   Jedes Sprite in Ihrem Spiel muss ebenfalls zu einer globalen Variable gehören. Sie erstellen die Sprites in der Funktion init (), müssen die Variable jedoch für alle Funktionen verfügbar machen.

3. Erstellen Sie die Funktion init ().

   Diese Funktion wird von body onload aufgerufen. Es wird ausgeführt, nachdem die Seite in den Speicher geladen wurde.

4. Erstellen Sie die Szene.

   Um die Szene zu erstellen, erstellen Sie eine Instanz der Szenenklasse. Was Sie wirklich sagen, ist "Machen Sie mir ein Szene-Objekt und nennen Sie diese bestimmte Instanz" -Szene. '' Die Szene benötigt keine Parameter.

5. Erstelle das Ball-Sprite.

   Der Ball ist eine Sprite-Instanz. Um ein Sprite zu erstellen, brauchst du ein paar mehr Informationen. Sie benötigen eine Szene, einen Bilddateinamen, eine Breite und eine Höhe.

6. Stellen Sie den Bewegungswinkel des Balls ein.

   Sie können den Winkel ändern, um den sich der Ball bewegt. Die Winkel werden wie auf einer Karte in Grad gemessen.

7. Stellen Sie die Bewegungsgeschwindigkeit des Balls ein.

   Sie können auch die Geschwindigkeit des Balls bestimmen.

8. Starten Sie die Szene.

   Wenn Sie fertig sind, richten Sie die Szene ein, um zu beginnen.

Aktualisiere die Spielanimation

Nach dem Start der Szene beginnt ein Timer. Zwanzig Mal pro Sekunde ruft es eine Funktion namens update () auf Ihrer Seite auf. Sie müssen also eine solche Funktion haben und es muss etwas Code für Ihr Spiel vorhanden sein.

Die Funktion update () ist auch nicht schwer.

Funktion update () {Szene. klar(); Ball. update ();} // update beenden

Die Funktion update () erledigt normalerweise drei Dinge:

• Löscht den vorherigen Bildschirm: Die erste Vorgehensweise besteht darin, alle durch den letzten Bildschirm verursachten Störungen zu beseitigen. Das Scene-Objekt hat genau zu diesem Zweck eine clear () - Funktion.

• Prüft auf Ereignisse: In der Regel wird nach Ereignissen gesucht, wie Benutzereingaben, Sprites, die ineinander fallen, Sprites, die den Bildschirm verlassen oder was auch immer.Bei dieser einfachen Animation ist das einzige Ereignis ein Sprite, das den Bildschirm verlässt, und das mit dieser Aktion verbundene Verhalten wurde automatisiert.

• Aktualisiert jedes Sprite: Der letzte Teil der Bildschirmaktualisierung ist das Aktualisieren der Sprites. Wenn Sie ein Sprite aktualisieren, wird es an seiner neuen Position gezeichnet.

Was passiert, wenn Sie den Bildschirm nicht löschen? Die gesamte Sprite-Bewegung wird auf die Leinwand gezeichnet und es sieht eher wie ein großer Abstrich als ein sich bewegender Ball aus.