Hvordan bygge Animasjon med simpleGame.js Din HTML5 Spill

January 1  by Eliza

Det er mulig å bygge et bibliotek som forenkler alle de ulike HTML5 spillmotor funksjoner. Vurder å bruke biblioteket: simpleGame.js. Dette biblioteket er enkel å bruke og er fullt i stand til avansert spillutvikling. Å komme i gang, du virkelig trenger å forstå bare to objekter:

  • Scenen: Dette objektet starter med en HTML lerret objekt og legger hoved loop. Scenen er den samlende objekt som styrer spillet.
  • Sprites: Disse objektene er elementer som beveger seg rundt på skjermen. De fleste av spillelementer er sprites. Hver sprite må tilhøre en enkelt scene, men du kan ha så mange sprites som du vil. En sprite er basert på et bilde.

    Hvordan bygge Animasjon med simpleGame.js Din HTML5 Spill

Denne koden er faktisk mye mer sofistikert enn den ser ut. Her er hva den gjør:

  • Det legger et lerret til siden. Den grå rektangelet er faktisk et lerret tag som er blitt automatisk lagt til side.
  • Det begynner et spill loop. Dette programmet har et spill sløyfe allerede kjører på 20 bilder per sekund.
  • Den inneholder en sprite. Ballen bildet er en sprite, som har evnen til å flytte noen fart i alle retninger og andre interessante funksjoner som kollisjoner bygget i.
  • Ballen er i bevegelse. Det brytes automatisk til den andre siden av skjermen når den forlater den ene siden.

Her er hele koden oppføringen:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> redBall.html </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
// Enkelt spill med et enkelt flytte ball
Var scene;
Var ball;
funksjon init () {
scene = ny Scene ();
ball = ny Sprite (scene, "redBall.png", 50, 50);
ball.setMoveAngle (180);
ball.setSpeed ​​(3);
scene.start ();
} // End init
funksjon oppdatering () {
scene.clear ();
ball.update ();
} // End oppdatering
</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Du begynner med en grunnleggende HTML5 side og tilsett noen funksjoner for å gjøre den om til en spillmiljø.

Hvordan du kan bygge din spillsiden

Begynn med å bygge den underliggende side:

  1. Begynn med en HTML5-side.

    Du kan bruke de samme verktøyene du har brukt for den andre webutvikling. Bygge en grunnleggende HTML5 mal som du gjør for noe annet HTML5 dokument.

  2. Importere simpleGame.js bibliotek.

    Dette biblioteket er tilgjengelig gratis fra nettsiden. Bruk en <script> tag å importere biblioteket. Still src eiendom til navnet på biblioteket (simpleGame.js).

  3. Hold HTML enkel.

    Du trenger ikke mye. Spillmotoren vil skape et lerret som inneholder scenen. Du kan sette en tittel, instruksjoner, eller andre verktøy som resultattavler på siden, men spillmotoren vil gjøre det meste av arbeidet.

  4. Ring init () når kroppen belastninger.

    Det er veldig vanlig å ha en funksjon som heter når kroppen belastninger. Legg onload = "init ()" til kroppen koden for å ringe init () -metoden.

  5. Lag en andre skriptmerket til å inneholde koden din.

    Du må ha en annen skriptmerket for egendefinert kode. Plasser denne etter koden som importerer biblioteket.

  6. Plasser to funksjoner i skriptet.

    Alle simpleGame programmer vil ha minst to funksjoner: init () skjer ved oppstart, og oppdateringen () skjer en gang per ramme.

Hvordan å initial spillet ditt

Initialisering delen av spillet skjer som siden lastes. Det er hovedsakelig tatt opp med å sette opp sprites og andre ressurser. Her er koden:

Var scene;
Var ball;
funksjon init () {
scene = ny Scene ();
ball = ny Sprite (scene, "redBall.png", 50, 50);
ball.setMoveAngle (180);
ball.setSpeed ​​(3);
} // End init

De fleste spill vil bruke en lignende stil av initialisering. Her er hvordan du setter opp spillet:

  1. Definere en variabel til å inneholde scenen.

    Hver simpleGame spillet vil ha minst én scene objekt. Definere scenen utenfor noen funksjoner, så det er tilgjengelig for dem alle. Du vil faktisk lage scenen inne i init () -funksjonen.

  2. Definere en variabel for hver sprite.

    Hver sprite i spillet må tilhøre en global variabel i tillegg. Du vil lage sprites i init () -funksjonen, men du trenger å gjøre variabelen tilgjengelig til alle funksjoner.

  3. Bygg init () -funksjonen.

    Denne funksjonen kalles av kroppen onload. Det vil kjøre etter at siden er lastet inn i minnet.

  4. Lag scenen.

    Å bygge scenen, opprette en forekomst av scenen klassen. Det du egentlig sier er "Gjør meg en Scene objekt og kaller dette tilfellet" scene "." Scenen krever ingen parametre.

  5. Lag ballen sprite.

    Ballen er en Sprite eksempel. For å gjøre en sprite, trenger du noen flere biter av informasjon. Du trenger en scene, et bilde filnavn, bredde og høyde.

  6. Still ballens bevegelse vinkel.

    Du kan endre vinkelen på ballen beveger seg. Vinklene er målt i grader som på et kart.

  7. Sette ballen bevegelse hastighet.

    Du kan også bestemme hastigheten på ballen.

  8. Start scene.

    Når du er ferdig med å sette alt opp, forteller scenen for å starte.

Oppdatere spillet animasjon

Når du har startet scene, vil en tidtaker begynne. Tjue ganger i sekundet, vil det ringe en funksjon på din side som heter oppdateringen (). Så må du ha en slik funksjon, og det er behov for å ha noen kode for spillet til å kjøre.

Oppdateringen () -funksjonen er ikke veldig vanskelig heller.

funksjon oppdatering () {
scene.clear ();
ball.update ();
} // End oppdatering

Oppdateringen () -funksjonen vanligvis gjør tre ting:

  • Sletter forrige skjerm: Den første bestillingen av virksomheten er å rydde opp i eventuelle rotet forårsaket av det siste skjermbildet. Scene objektet har en klar () -funksjonen for akkurat dette formålet.
  • Sjekker for arrangementer: Vanligvis du se etter hendelser, som brukerundersøkelser, sprites krasje inn i hverandre, sprites forlater skjermen, eller hva. For denne enkle animasjon, er det eneste arrangementet en sprite forlater skjermen, og den atferd assosiert med denne handlingen er automatisert.
  • Oppdaterer hver sprite: Den siste delen av skjermen oppdateringen oppdaterer sprites. Når du oppdaterer en sprite, vil det trekke i sin nye stilling.

Her er hva som skjer hvis du ikke tømme skjermen. All sprite bevegelse vil bli trukket på lerretet, og det ser ut som en stor smøre snarere enn et bevegelig ball.

Hvordan bygge Animasjon med simpleGame.js Din HTML5 Spill