Video: Intro to Animation (Video Version) 2025
Wenn die Leinwand den Raum in einem HTML5-Spiel definiert, definiert eine Animationsschleife die Zeit. Die meisten JavaScript-Spiele verwenden einen Mechanismus namens setInterval (), um wiederholtes Verhalten zu verursachen. Diese Funktion benötigt zwei Parameter: einen Funktionsnamen und einen Verzögerungswert.
Hier ist ein Code, der einfach zehnmal pro Sekunde zählt:
zählt. html var Zähler = 0; var Ausgang; Funktion init () {Ausgabe = Dokument. getElementById ("Ausgabe"); setInterval (count, 100);} Funktion count () {Zähler ++; Ausgabe. innerHTML = counter;} hier noch nichts
Der Prozess ist unkompliziert und Sie können ihn jederzeit verwenden, wenn Sie möchten, dass etwas in regelmäßigen Abständen geschieht:
-
Erstellen Sie eine Funktion, die wiederholt wird.
In diesem vereinfachten Beispiel wird die Funktion count () zehnmal pro Sekunde aufgerufen.
-
Rufen Sie in Ihrem Initialisierungscode setInterval () auf.
Dadurch wird der wiederholte Aufruf der Funktion eingerichtet.
-
Geben Sie die Funktion an, die wiederholt werden soll.
Der erste Parameter ist der Name der Funktion, die wiederholt wird. Beachten Sie, dass Sie nicht in Klammern mit dem Funktionsnamen einschließen, da Sie die Funktion als Variable behandeln.
-
Geben Sie die Verzögerung an.
Der zweite Parameter ist ein Verzögerungswert in Millisekunden (eine Millisekunde ist 1/1000 th einer Sekunde). Dieses Beispiel läuft mit einer Verzögerung von 100 Millisekunden, also 10 Frames pro Sekunde. Die simpleGame-Bibliothek läuft mit 20 Bildern pro Sekunde.
Wenn Sie in simpleGame neben dem Einrichten einer Leinwand auch eine Scene-Klasse erstellen, erstellen Sie über die Scene-Klasse ein Intervall, das wiederholt die update () -Methode Ihres Spiels aufruft. Aus diesem Grund benötigen Sie eine update () -Methode.
