Slik legger du til timing til HTML5-spillet ditt - dummies

Ofte vil tidspasseringen være et element i HTML5-spillene dine. Racing spill handler om hastighet, eller du kan ha en tidsbegrensning for å utføre noen oppgaver. SimpleGame-biblioteket inneholder et veldig praktisk timerobjekt som gjør at du enkelt kan klare tiden. Timer-objektet er opprettet som et hvilket som helst annet JavaScript-objekt. Den har tre metoder:

• reset (): Denne funksjonen initialiserer timeren og starter den forløpte tidstelleren.

• getCurrentTime (): Denne funksjonen returnerer gjeldende systemtid i øyeblikket det kalles. (Merk at tiden er i et spesielt heltall format, og det vil ikke bli gjenkjennelig av menneskelige lesere.)

• getElapsedTime (): Returnerer antall sekunder siden timeren ble opprettet eller sist tilbakestilt (hvilken som helst nyere).

I JavaScript og de fleste andre språk blir dato- og klokkeslettinformasjon vanligvis lagret i et spesielt heltalformat. Tiden er faktisk regnet som et stort heltall som viser antall millisekunder siden midnatt 1. januar 1970.

Selv om dette kan virke som en veldig komplisert ordning, er den faktisk perfekt for din bruk fordi det du virkelig vil vite er hvor mye tid som har gått mellom to hendelser. Hvis du faktisk vil få dagens dato og klokkeslett i et lesbart format, kan du slå opp JavaScript Date-objektet.

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

timerDemo var timer; var utgang; var spill; funksjon init () {game = new Scene (); output = dokument. getElementById ("output"); Timer = Ny Timer (); timer. tilbakestille(); spill. start ();} // end init-funksjonoppdatering () { spill. gjemme seg(); currentTime = timer. GetElapsedTime (); utgang. innerHTML = currentTime; } // End Update Function Reset () { timer. tilbakestille(); } // End reset Tøm resetimer

Dette eksemplet viser en enkel timer. Den viser antall sekunder siden har kjørt. Timeren kan tilbakestilles med (klokt navngitt) Reset Timer-knappen.

Dette programmet er relativt enkelt, men det illustrerer noen svært kraftige ideer. Bruk denne prosessen til å bygge ditt eget tidsavspillingsspill:

1. Lag en variabel for timeren.

   Dette skal bli kjent. Alle de interessante elementene er objekter, og timeren er ikke noe unntak. Opprett en variabel kalt timer som vil være et objekt av typen Timer.

2. Tilbakestill timeren.

   Pass på at timeren starter ved null.

3. Få den forløpte tiden i hver ramme.

   I oppdateringen () -funksjonen, ring tidtakeren getElapsedTime () -metoden for å finne ut hvor mye tid som er gått og kopiere denne verdien til utgangsområdet.

4. Tilbakestill timeren når brukeren trykker på knappen.

   Når brukeren trykker på tilbakestillingsknappen, kan du ringe timerenes tilbakestillingsmetode () for å tilbakestille den forløpte tiden tilbake til null.

5. Skjul hovedscenen.

   Dette programmet bruker hovedløkken fra simpleGame, men det trenger ikke virkelig å vise scenen. Av denne grunn har Scene-objektet en hide () -metode. Du kan også vise scenen senere med sin show () -metode.