Hvordan legge til Timing til din HTML5 spill

May 29  by Eliza

Ofte tidens gang vil være et element i dine HTML5-spill. Racing spill er alt om fart, eller du kan ha en frist for å utføre en oppgave. Den simpleGame biblioteket inneholder en meget hendig tidtaker objekt som lar deg administrere tid lett. Timer objektet er opprettet som alle andre Javascript objekt. Den har tre metoder:

  • reset (): Denne funksjonen initialiserer timeren og starter tidtaker for medgått tid.
  • getCurrentTime (): Denne funksjonen returnerer gjeldende systemtiden i øyeblikket det heter. (Merk at tiden er i en spesiell heltall format, og det vil ikke være gjenkjennelig med menneskelige lesere.)
  • GetElapsedTime (): Returnerer antall sekunder siden timeren ble laget eller den siste tilbakestilling (det som er av nyere dato).

I Javascript og de fleste andre språk, er dato og klokkeslett vanligvis lagret i en spesiell heltall format. Tid er faktisk regnet som et stort heltall som viser hvor mange millisekunder siden midnatt 1 januar 1970.

Selv om dette kan virke som en veldig komplisert ordning, det er faktisk perfekt for ditt bruk fordi det du egentlig vil vite er hvor mye tid som har gått mellom to hendelser. Hvis du ønsker å faktisk få den gjeldende dato og klokkeslett i en lesbar format, se opp Javascript Dato objekt.

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

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> timerDemo </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
Var tidsur;
Var utgang;
Var spillet;

funksjon init () {
Spillet = ny Scene ();
output = document.getElementById ("output");
tidsur = new Timer ();
timer.reset ();
game.start ();
} // End init

funksjon oppdatering () {
game.hide ();
currentTime = timer.getElapsedTime ();
output.innerHTML = currentTime;
} // End oppdatering

reset funksjon () {
timer.reset ();
} // End reset
</ Script>
</ Head>
<Body onload = "init ()">
<Div id = "output"> tom </ div>
<-knappen Onclick = "reset ()">
nullstille tidtakeren
</ Knapp>
</ Body>
</ Html>

Dette eksempel viser et enkelt tidsur. Den viser antall sekunder siden har kjørt. Timeren kan tilbakestilles med (kløktig heter) nullstill-knappen.

Hvordan legge til Timing til din HTML5 spill


Dette programmet er relativt enkel, men det illustrerer noen veldig kraftige ideer. Bruk denne prosessen til å bygge din egen tid-sensing spillet:

  1. Lag en variabel for tidtakeren.

    Dette bør bli kjent. Alle de interessante elementene er objekter, og timeren er intet unntak. Lag en variabel kalt timer som vil være et objekt av typen Timer.

  2. Nullstille tidtakeren.

    Pass på timeren starter på null.

  3. Få medgått tid i hver ramme.

    I oppdateringen () -funksjonen, ring timerens GetElapsedTime () metode for å finne ut hvor mye tid som har gått, og kopiere denne verdien til utgangsområdet.

  4. Nullstille tidtakeren når brukeren trykker på knappen.

    Når brukeren trykker på reset-knappen, kaller timerens reset () metode for å tilbakestille tiden som er gått tilbake til null.

  5. Skjule hovedscenen.

    Dette programmet bruker hoved sløyfe fra simpleGame, men det gjør egentlig ikke trenger å vise scenen. Av denne grunn har Scene objekt en hide () -metoden. Du kan også vise scenen senere med sin utstilling () -metoden.