Hoe u Timing toevoegt aan uw HTML5-spel - dummies

Vaak zal het verstrijken van de tijd een element in uw HTML5-games zijn. Bij racespellen draait alles om snelheid, of je hebt een tijdslimiet voor het uitvoeren van een taak. De simpleGame-bibliotheek bevat een zeer handig timerobject waarmee u gemakkelijk de tijd kunt beheren. Het Timer-object is gemaakt zoals elk ander JavaScript-object. Het heeft drie methoden:

• reset (): deze functie initialiseert de timer en start de teller voor de verstreken tijd.

• getCurrentTime (): deze functie retourneert de huidige systeemtijd op het moment dat deze wordt aangeroepen. (Merk op dat de tijd in een speciaal integer-formaat is en dat deze niet herkenbaar is voor menselijke lezers.)

• getElapsedTime (): retourneert het aantal seconden sinds de timer is gemaakt of de laatste reset (welke van de meer recente is).

In JavaScript en de meeste andere talen worden datum- en tijdgegevens over het algemeen opgeslagen in een speciaal integer-formaat. De tijd wordt eigenlijk geteld als een groot geheel getal dat het aantal milliseconden weergeeft sinds middernacht 1 januari 1970.

Hoewel dit een heel ingewikkeld schema lijkt, is het eigenlijk perfect voor je gebruik, want wat je echt wilt weten, is hoeveel tijd er is verstreken tussen twee gebeurtenissen. Als u de huidige datum en tijd daadwerkelijk in een voor mensen leesbaar formaat wilt krijgen, zoekt u het JavaScript-datumobject op.

Voor een voorbeeld van timing, kijk naar timerDemo. html:

timerDemo var timer; var-uitvoer; var game; function init () {game = new Scene (); output = document. getElementById ("output"); timer = new Timer (); timer. reset (); spel. start ();} // game voor einde initiatiefunctie () { . verbergen(); currentTime = timer. GetElapsedTime (); output. innerHTML = currentTime; } // update-functie einde-update () { timer. reset (); } // einde reset lege reset-timer

Dit voorbeeld toont een eenvoudige timer. Het geeft het aantal seconden weer dat de pagina actief was. De timer kan worden gereset met de (slim genaamde) Reset Timer-knop.

Dit programma is relatief eenvoudig, maar het illustreert enkele zeer krachtige ideeën. Gebruik dit proces om uw eigen tijdwaarnemingsspel te maken:

1. Maak een variabele voor de timer.

   Dit zou vertrouwd moeten worden. Alle interessante elementen zijn objecten en de timer is geen uitzondering. Maak een variabele met de naam timer die een object van het type Timer zal zijn.

2. Stel de timer opnieuw in.

   Zorg ervoor dat de timer op nul begint.

3. Verkrijg de verstreken tijd in elk frame.

   Roep in de update () -functie de methode getElapsedTime () van de timer aan om te achterhalen hoeveel tijd verstreken is en kopieer deze waarde naar het uitvoergebied.

4. Stel de timer opnieuw in wanneer de gebruiker op de knop drukt.

   Wanneer de gebruiker op de resetknop drukt, roept u de methode reset () van de timer aan om de verstreken tijd weer op nul te zetten.

5. Verberg de hoofdscène.

   Dit programma gebruikt de hoofdlus van simpleGame, maar het is niet echt nodig om de scène weer te geven. Om deze reden heeft het Scene-object een methode hide (). U kunt de scène later ook weergeven met de methode show ().