Hvordan lage en animasjon Loop i din HTML5 spill

November 30  by Eliza

Hvis lerretet definerer plass i en HTML5 spill, definerer en animasjon sløyfe tid. De fleste Javascript-spill bruker en mekanisme som kalles setInterval () å forårsake gjentatte oppførsel. Denne funksjonen tar to parametere: en funksjon navn og en forsinkelsesverdi.

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

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> counting.html </ title>
<Script type = "text / javascript">
Var teller = 0;
Var utgang;
funksjon init () {
output = document.getElementById ("output");
setInterval (teller, 100);
}
funksjonen teller () {
teller ++;
output.innerHTML = teller;
}
</ Script>
</ Head>
<Body onload = "init ()">
<Div id = "output">
ingenting her ennå
</ Div>
</ Body>
</ Html>

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

  1. Lag en funksjon som vil bli gjentatt.

    I dette forenklede eksempel vil funksjonen teller () bli kalt ti ganger i sekundet.

  2. I din initialisering kode, ring setInterval ().

    Dette vil sette opp gjentatt anrop til funksjonen.

  3. Indikerer funksjon som vil gjenta.

    Den første parameteren er navnet på den funksjon som vil bli gjentatt. Legg merke til at fordi du behandler den funksjon som en variabel, trenger du ikke inkludere parentes med funksjonsnavnet.

  4. Indikere forsinkelsen.

    Den andre parameteren er en forsinkelsesverdi i millisekunder (et millisekund er 1/1000 th deler av et sekund). Dette eksemplet kjører med en forsinkelse på 100 millisekunder, noe som er 10 bilder per sekund. Den simpleGame bibliotek kjører på 20 bilder per sekund.

I simpleGame, når du oppretter en Scene klasse, i tillegg til å sette opp et lerret, er du også, via Scene klassen, noe som skaper et intervall som gjentatte ganger kaller oppdateringen () metode for spillet ditt. Dette er grunnen til at du trenger å ha en oppdatering () -metoden.