Hur man lägger till timing i ditt HTML5-spel - dummies

Ofta kommer tidens gång att vara ett element i dina HTML5-spel. Racingspel handlar om hastighet, eller du kan ha en tidsgräns för att utföra en viss uppgift. SimpleGame-biblioteket innehåller ett mycket användbart timerobjekt som gör att du enkelt kan hantera tiden. Timerobjektet skapas som något annat JavaScript-objekt. Det har tre metoder:

• återställ (): Den här funktionen initierar timern och startar den förflutna tidräknaren.

• getCurrentTime (): Den här funktionen returnerar den aktuella systemtiden när den heter. (Observera att tiden är i ett speciellt heltalformat och det kommer inte att identifieras av mänskliga läsare.)

• getElapsedTime (): Returnerar antalet sekunder sedan timern skapades eller den senaste återställningen (vilken som är senaste).

I JavaScript och de flesta andra språk lagras informationen om datum och tid generellt i ett speciellt heltal. Tiden räknas faktiskt som ett stort heltal som visar antalet millisekunder sedan midnatt den 1 januari 1970.

Även om det här kan verka som ett riktigt komplicerat system är det faktiskt perfekt för din användning, för vad du verkligen vill veta är hur mycket tid som har gått mellan två händelser. Om du verkligen vill få aktuellt datum och tid i ett personligt läsbart format, leta upp JavaScript Date-objektet.

För ett exempel på timing, kolla på timerDemo. html:

timerDemo var timer; varutmatning; var spel; funktion init () {game = new Scene (); output = dokument. getElementById ("output"); timer = ny timer (); timer. återställa(); spel. start ();} // end init-funktionen uppdatering () { spel. Dölj(); currentTime = timer. GetElapsedTime (); utgång. innerHTML = currentTime; } // Uppdatering av funktionsåterställning () { timer. återställa(); } / / återställning tom återställningstidtimer

Detta exempel visar en enkel timer. Den visar antalet sekunder som sidan har körts. Timern kan återställas med knappen (återigen känd) Reset Timer.

Detta program är relativt enkelt, men det illustrerar några mycket kraftfulla idéer. Använd den här processen för att bygga ditt eget tidsavkännande spel:

1. Skapa en variabel för timern.

   Detta borde bli bekant. Alla intressanta element är föremål, och timern är inget undantag. Skapa en variabel som kallas timer som kommer att vara ett objekt av typen Timer.

2. Återställ timern.

   Se till att timern startar vid noll.

3. Få den förflutna tiden i varje ram.

   I funktionen uppdatering () kan du ringa timerens getElapsedTime () -metod för att ta reda på hur mycket tid som har passerat och kopiera det här värdet till utmatningsområdet.

4. Återställ timern när användaren trycker på knappen.

   När användaren trycker på återställningsknappen, ringa till timerens återställning () -metod för att återställa den förflutna tiden tillbaka till noll.

5. Dölj huvudbilden.

   Detta program använder huvudslingan från simpleGame, men det behöver inte verkligen visa scenen. Av denna anledning har scenobjektet en hide () -metod. Du kan också visa scenen senare med sin show () -metod.