Wie man Timing zu Ihrem HTML5 Spiel hinzufügt - Dummies

Oft wird der Zeitablauf ein Element in Ihren HTML5-Spielen sein. Bei Rennspielen dreht sich alles um Geschwindigkeit, oder Sie haben eine Zeitbeschränkung für die Ausführung einer Aufgabe. Die simpleGame-Bibliothek enthält ein sehr praktisches Timer-Objekt, mit dem Sie die Zeit einfach verwalten können. Das Timer-Objekt wird wie jedes andere JavaScript-Objekt erstellt. Es gibt drei Methoden:

• reset (): Diese Funktion initialisiert den Timer und startet den Zähler für die verstrichene Zeit.

• getCurrentTime (): Diese Funktion gibt die aktuelle Systemzeit zum Zeitpunkt des Aufrufs zurück. (Beachten Sie, dass die Uhrzeit ein spezielles Ganzzahlformat ist und von menschlichen Lesegeräten nicht erkannt wird.)

• getElapsedTime (): Gibt die Anzahl der Sekunden zurück, die seit der Erstellung des Timers oder der letzten Zurücksetzung vergangen sind..

In JavaScript und den meisten anderen Sprachen werden Datums- und Zeitinformationen im Allgemeinen in einem speziellen Integer-Format gespeichert. Die Zeit wird tatsächlich als eine ganze Zahl gezählt, die die Anzahl der Millisekunden seit Mitternacht des 1. Januar 1970 anzeigt.

Obwohl dies wie ein wirklich kompliziertes Schema erscheinen mag, ist es eigentlich perfekt für Ihre Verwendung, denn was Sie wirklich wissen wollen, ist, wie viel Zeit zwischen zwei Ereignissen vergangen ist. Wenn Sie das aktuelle Datum und die aktuelle Uhrzeit in einem für Menschen lesbaren Format erhalten möchten, suchen Sie das JavaScript-Date-Objekt.

Ein Beispiel für das Timing ist timerDemo. html:

timerDemo var timer; var-Ausgabe; var Spiel; function init () {game = neue Szene (); Ausgabe = Dokument. getElementById ("Ausgabe"); timer = neuer Timer (); Timer. Zurücksetzen (); Spiel. start ();} // end init Funktion update () { Spiel. verbergen(); currentTime = Timer. getElapsedTime (); Ausgabe. innerHTML = aktuelleZeit; } // Beenden Sie die Aktualisierungsfunktion reset () { timer. Zurücksetzen (); } // end reset leer reset timer

Dieses Beispiel zeigt einen einfachen Timer. Es zeigt die Anzahl der Sekunden an, die die Seite ausgeführt wurde. Der Timer kann mit der (geschickt benannten) Reset-Timer-Taste zurückgesetzt werden.

Dieses Programm ist relativ einfach, zeigt aber einige sehr mächtige Ideen. Verwenden Sie diesen Prozess, um ein eigenes Zeiterfassungsspiel zu erstellen:

1. Erstellen Sie eine Variable für den Timer.

   Dies sollte vertraut werden. Alle interessanten Elemente sind Objekte, und der Timer ist keine Ausnahme. Erstellen Sie eine Variable namens Timer, die ein Objekt vom Typ Timer ist.

2. Den Timer zurücksetzen.

   Stellen Sie sicher, dass der Timer bei Null beginnt.

3. Ermittelt die verstrichene Zeit in jedem Frame.

   Rufen Sie in der Funktion update () die Methode getElapsedTime () des Timers auf, um herauszufinden, wie viel Zeit vergangen ist, und kopieren Sie diesen Wert in den Ausgabebereich.

4. Setzen Sie den Timer zurück, wenn der Benutzer die Taste drückt.

   Wenn der Benutzer die Reset-Taste drückt, rufen Sie die Reset () -Methode des Timers auf, um die verstrichene Zeit auf Null zurückzusetzen.

5. Blendet die Hauptszene aus.

   Dieses Programm verwendet die Hauptschleife von simpleGame, aber es muss die Szene nicht wirklich angezeigt werden. Aus diesem Grund verfügt das Scene-Objekt über eine hide () -Methode. Sie können die Szene auch später mit der show () - Methode anzeigen.