Sådan tilføjes timing til dit HTML5-spil - dummies

Ofte vil tidsforløbet være et element i dine HTML5-spil. Racingspil handler om hurtighed, eller du kan have en tidsbegrænsning for at udføre en opgave. SimpleGame-biblioteket indeholder en meget praktisk timerobjekt, der giver dig mulighed for nemt at styre tid. Timer-objektet er oprettet som et hvilket som helst andet JavaScript-objekt. Den har tre metoder:

• reset (): Denne funktion initialiserer timeren og starter den tidstæller, der er udløbet.

• getCurrentTime (): Denne funktion returnerer den aktuelle systemtid i det øjeblik den hedder. (Bemærk at tiden er i et særligt heltal format, og det kan ikke genkendes af menneskelige læsere.)

• getElapsedTime (): Returnerer antallet af sekunder siden timeren blev oprettet eller den sidste nulstilling (hvilken som helst nyere).

I JavaScript og de fleste andre sprog gemmes dato og klokkeslæt generelt i et særligt heltal format. Tiden er faktisk regnet som et stort heltal, der viser antallet af millisekunder siden midnat den 1. januar 1970.

Selv om dette kan virke som en meget kompliceret ordning, er den faktisk perfekt til din brug, fordi det du virkelig vil vide, er hvor meget tid der er gået mellem to begivenheder. Hvis du faktisk ønsker at få den aktuelle dato og klokkeslæt i et læseligt format, skal du kigge på JavaScript Date-objektet.

For et eksempel på timing, se på timerDemo. html:

timerDemo var timer; var output; var spil; funktion init () {game = new Scene (); output = dokument. getElementById ("output"); timer = ny timer (); timeren. Nulstil(); spil. start ();} // end init funktion opdatering () { spil. skjule(); currentTime = timer. GetElapsedTime (); output. innerHTML = currentTime; } // End Update Function Reset () { timer. Nulstil(); } // End reset Tøm resetimer

Dette eksempel viser en simpel timer. Det viser det antal sekunder, siden siden har kørt. Timeren kan nulstilles med den (klogt navngivne) Reset Timer-knap.

Dette program er relativt enkelt, men det illustrerer nogle meget kraftfulde ideer. Brug denne proces til at opbygge dit eget tidsfølsomme spil:

1. Opret en variabel for timeren.

   Dette skal kende. Alle de interessante elementer er objekter, og timeren er ingen undtagelse. Opret en variabel kaldet timer, der vil være et objekt af typen Timer.

2. Nulstil timeren.

   Sørg for, at timeren starter ved nul.

3. Få den forløbne tid i hver ramme.

   I opdateringen () -funktionen skal du ringe til timerens getElapsedTime () -metode for at finde ud af, hvor meget tid der er gået og kopiere denne værdi til outputområdet.

4. Nulstil timeren, når brugeren trykker på knappen.

   Når brugeren trykker på nulstillingsknappen, skal du kalde timerens reset () -metode for at nulstille den forløste tid tilbage til nul.

5. Skjul hovedscenen.

   Dette program bruger hovedløkken fra simpleGame, men det behøver ikke virkelig at vise scenen. Af denne grund har Scene-objektet en hide () -metode. Du kan også vise scenen senere med sin show () metode.