Hvordan man opretter et animationsløb i dit HTML5-spil - dummier

Hvis lærredet definerer rummet i et HTML5-spil, definerer en animationssløjfe tiden. De fleste JavaScript-spil bruger en mekanisme kaldet setInterval () for at forårsage gentagen adfærd. Denne funktion tager to parametre: et funktionsnavn og en forsinkelsesværdi.

Her er nogle kode, der simpelthen tæller ti gange et sekund:

tæller. html var counter = 0; var output; funktion init () {output = dokument. getElementById ("output"); setInterval (tæller, 100);} funktionstælling () {counter ++; produktion. innerHTML = counter;} intet her endnu

Processen er ligetil, og du kan bruge den når som helst du vil have noget til at ske med jævne mellemrum:

1. Opret en funktion, der vil blive gentaget.

   I dette simplistiske eksempel bliver funktionstællingen () kaldet ti gange pr. Sekund.

2. I din initialiseringskode skal du ringe setInterval ().

   Dette indstiller det gentagne opkald til funktionen.

3. Angiv den funktion, der vil gentage.

   Den første parameter er navnet på den funktion, der vil blive gentaget. Bemærk, at fordi du behandler funktionen som en variabel, indeholder ikke parenteser med funktionsnavnet.

4. Angiv forsinkelsen.

   Den anden parameter er en forsinkelsesværdi i millisekunder (en millisekund er 1/1000 ^th i et sekund). Dette eksempel kører med en forsinkelse på 100 millisekunder, hvilket er 10 billeder pr. Sekund. SimpleGame-biblioteket kører med 20 billeder pr. Sekund.

I simpleGame, når du opretter en sceneklasse, udover at oprette et lærred, er du også via sceneklassen oprettet et interval, der gentagne gange kalder opdatabasen () -metoden i dit spil. Det er derfor, du skal have en opdateringsmetode ().