Hvordan lage et animasjonsløp i HTML5-spillet ditt - dummies

Hvis lerret definerer plassen i et HTML5-spill, definerer en animasjonsløkke tiden. De fleste JavaScript-spill bruker en mekanisme kalt setInterval () for å forårsake gjentatt oppførsel. Denne funksjonen tar to parametere: et funksjonsnavn og en forsinkelsesverdi.

Her er noen kode som bare teller ti ganger i sekundet:

teller. html var counter = 0; var utgang; funksjon init () {output = document. getElementById ("output"); setInterval (telle, 100);} funksjonstelling () {counter ++; produksjon. innerHTML = counter;} ingenting her ennå

Prosessen er grei, og du kan bruke den når som helst du vil at noe skal skje med jevne mellomrom:

1. Lag en funksjon som vil gjentas.

   I dette forenklede eksempelet blir funksjonstellingen () kalt ti ganger per sekund.

2. I initialiseringskoden, ring setInterval ().

   Dette vil sette opp det gjentatte anropet til funksjonen.

3. Angi funksjonen som vil gjenta.

   Den første parameteren er navnet på funksjonen som skal gjentas. Merk at fordi du behandler funksjonen som en variabel, inneholder ikke parenteser med funksjonsnavnet.

4. Angi forsinkelsen.

   Den andre parameteren er en forsinkelsesverdi i millisekunder (en millisekund er 1/1000 ^th av et sekund). Dette eksempelet går i en forsinkelse på 100 millisekunder, som er 10 bilder per sekund. SimpleGame-biblioteket går til 20 bilder per sekund.

I SimpleGame, når du oppretter en sceneklasse, i tillegg til å sette opp et lerret, er du også, via Scene-klassen, opprettet et intervall som kalles gjentatte ganger oppdateringen () -metoden til spillet ditt. Dette er grunnen til at du må ha en oppdatering () -metode.