Hvordan man opbygger animation med simpleGame. js Dit HTML5-spil - dummies

Det er muligt at opbygge et bibliotek, der forenkler alle de forskellige HTML5-spilmotoregenskaber. Overvej at bruge biblioteket: simpleGame. js. Dette bibliotek er let at bruge og er fuldt udstyret til sofistikeret spiludvikling. For at komme i gang skal du virkelig forstå kun to objekter:

• Scenen: Dette objekt starter med et HTML-lærredsobjekt og tilføjer hovedløkken. Scenen er det samlende objekt, der styrer spillet.

• Sprites: Disse objekter er de elementer, der bevæger sig rundt på skærmen. De fleste af spilelementerne er sprites. Hver sprite skal tilhøre en enkelt scene, men du kan have så mange spriter som du vil. En sprite er baseret på et billede.

  

Denne kode er faktisk meget mere sofistikeret end den ser ud. Her er hvad det gør:

• Det tilføjer et lærred til siden. Det grå rektangel er faktisk et lærredstag, der automatisk er tilføjet til siden.

• Det starter en spilsløjfe. Dette program har en spilsløjfe, der allerede kører ved 20 billeder pr. Sekund.

• Den indeholder en sprite. Boldbilledet er et sprite, som har evnen til at bevæge enhver hastighed i enhver retning og andre interessante funktioner som kollisionsdetektering indbygget.

• Bolden bevæger sig. Den vikles automatisk til den anden side af skærmen, når den forlader den ene side.

Her er hele koden notering:

redBall. html // enkelt spil med en enkelt bevægende bold var scene; var bolden; funktion init () {scene = ny scene (); bold = ny Sprite (scene, "redBall. png", 50, 50); bold. setMoveAngle (180); bold. setSpeed ​​(3); scene. start ();} // end init funktion opdatering () {scene. klar(); bold. opdatering ();} // slut opdatering

Du starter med en grundlæggende HTML5-side og tilføjer et par funktioner for at gøre det til et spilmiljø.

Sådan opbygger du din spilside

Begynd ved at opbygge den underliggende side:

1. Begynd med en HTML5-side.

   Du kan bruge de samme værktøjer, du har brugt til din anden webudvikling. Opbyg en grundlæggende HTML5-skabelon, som du gør for ethvert andet HTML5-dokument.

2. Importer simpleGame. js bibliotek.

   Dette bibliotek er tilgængeligt gratis fra hjemmesiden. Brug et tag til at importere biblioteket. Indstil src-ejendommen til bibliotekets navn (simpleGame. Js).

3. Hold HTML nemmere.

   Du behøver ikke meget. Spilmotoren vil skabe et lærred indeholdende scenen. Du kan sætte en titel, instruktioner eller andre værktøjer som resultattavler på siden, men spilmotoren vil gøre det meste af arbejdet.

4. Ring init (), når kroppen lægger.

   Det er meget almindeligt at have en funktion, der kaldes, når kroppen lægger. Tilføj onload = "init ()" til kropstegnet for at kalde init () -metoden.

5. Opret et andet script-tag, der indeholder din kode.

   Du skal have et andet script-tag til brugerdefineret kode. Placer dette efter mærket, der importerer biblioteket.

6. Placer to funktioner i dit script.

   Alle simpleGame-programmer har mindst to funktioner: init () sker ved opstart, og opdatering () sker en gang pr. Ramme.

Sådan initialiseres dit spil

Initialiseringsdelen af ​​spillet sker som siden indlæser. Det er primært taget op med at etablere sprites og andre ressourcer. Her er koden:

var scene; var bolden; funktion init () {scene = ny scene (); bold = ny Sprite (scene, "redBall. png", 50, 50); bold. setMoveAngle (180); bold. setSpeed ​​(3);} // end init

De fleste spil bruger en lignende initialiseringsstil. Sådan konfigurerer du spillet:

1. Definer en variabel, der indeholder scenen.

   Hvert simpleGame-spil vil have mindst en sceneobjekt. Definer scenen uden for nogen funktioner, så den er tilgængelig for dem alle. Du vil faktisk lave scenen inde i init () -funktionen.

2. Definer en variabel for hver sprite.

   Hver sprite i dit spil skal også tilhøre en global variabel. Du opretter sprites i init () -funktionen, men du skal gøre variablen tilgængelig for alle funktioner.

3. Bygg init () -funktionen.

   Denne funktion kaldes af body onload. Det løber efter at siden er indlæst i hukommelsen.

4. Opret scenen.

   For at opbygge scenen, lav en forekomst af sceneklassen. Hvad du virkelig siger er "Gør mig en sceneobjekt og kalder denne særlige forekomst" scene. '"Scenen kræver ingen parametre.

5. Opret bolden sprite.

   Bolden er en Sprite-forekomst. For at lave en sprite har du brug for et par stykker information. Du har brug for en scene, et billede filnavn, bredde og højde.

6. Indstil kuglens bevægelsesvinkel.

   Du kan ændre vinklen kuglen bevæger sig. Vinklerne måles i grader som på et kort.

7. Indstil kuglens bevægelseshastighed.

   Du kan også bestemme boldens hastighed.

8. Start scenen.

   Når du er færdig med at indstille alt, skal du fortælle scenen for at starte.

Opdater spil animationen

Når du starter scenen, starter en timer. Tyve gange om et sekund vil det kalde en funktion på din side kaldet opdatering (). Så du skal have en sådan funktion, og det skal have nogle kode til dit spil at køre.

Funktionen opdatering () er heller ikke forfærdeligt vanskelig.

funktionsopdatering () {scene. klar(); bold. opdatering ();} // endopdatering

Funktionen opdatering () har typisk tre ting:

• Rydder den forrige skærm: Den første rækkefølge er at rydde op for noget rod, der skyldes den sidste skærm. Scenobjektet har en klar () funktion til netop dette formål.

• Kontrol af begivenheder: Typisk tjekker du for begivenheder, som brugerindgang, sprites krascher ind i hinanden, sprites forlader skærmen eller hvad som helst.For denne simple animation er den eneste begivenhed en sprite, der forlader skærmen, og adfærden i forbindelse med denne handling er blevet automatiseret.

• Opdateringer til hver sprite: Den sidste del af skærmopdateringen opdaterer sprites. Når du opdaterer et sprite, vil det trække i sin nye position.

Her er hvad der sker, hvis du ikke rydder skærmen. Alle sprite bevægelsen vil blive tegnet på lærredet, og det ligner et stort smear frem for en bevægende bold.