Hvordan bygge Sprite objekter for din HTML5 spill

July 10  by Eliza

Å lage svært kraftige HTML5-spill, vil du ønsker å være i stand til å bygge dine egne sprites som akkurat det du vil de skal gjøre. Etter at du gjør et objekt, kan du gi den egenskaper og atferd.

Hvordan å lage et lager sprite objekt for spillet ditt

For å komme i gang, ta en titt på denne enkle objekt:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> krabat </ title>
<Script type = "text / javascript"
src = "simpleGame.js">
</ Script>
<Script type = "text / javascript">
Var spillet;
Var critter;
funksjon init () {
Spillet = ny Scene ();
critter = ny Sprite (spill, "critter.gif", 30,30);
critter.setSpeed ​​(0);
game.start ();
}

funksjon oppdatering () {
game.clear ();
critter.update ();
}
</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Dette er et ekstremt enkelt program. Det skaper en scene og et enkelt sprite kalt critter. Akkurat nå, vil ikke critter ikke gjøre mye.

Hvordan bygge Sprite objekter for din HTML5 spill

Hvordan du kan bygge ditt eget spill sprite

Sprite objekter er flott, men ville ikke det være fantastisk hvis critter selv var et objekt og enda bedre hvis det var et nytt objekt basert på sprite? Det kan begynne med alle de grunnleggende funksjonene i sprite, men du kan legge til nye evner å skille gnagerne fra andre sprites.

Ta en titt på CritterConstructor.html å se en måte å gjøre dette:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> krabat </ title>
<Script type = "text / javascript"
src = "simpleGame.js">
</ Script>
<Script type = "text / javascript">
Var spillet;
Var critter;

funksjon Critter () {
tCritter = ny Sprite (spill, "critter.gif", 30, 30);
tCritter.setSpeed ​​(0);
returnere tCritter;
}

funksjon init () {
Spillet = ny Scene ();
critter = ny Critter ();
game.start ();
}

funksjon oppdatering () {
game.clear ();
critter.update ();
}
</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Dette programmet fungerer akkurat som den siste, men det er organisert litt annerledes.

  • Det er en funksjon som heter Critter (). Det er viktig at funksjonen er navnet på et objekt, og det er også balanseført. Dette er en veldig spesiell funksjon, fordi det er brukt til å definere en Critter () objekt.
  • The Critter () -funksjonen oppretter en midlertidig sprite objekt. Inne i Critter () -funksjonen, ser du en midlertidig sprite objekt kalt tCritter (). Dette er en ny sprite.
  • Modifisere den midlertidige sprite så mye du vil. For å gjøre en ny type objekt i Javascript, du egentlig gjøre et nytt objekt og deretter endre den til å få akkurat den atferden du ønsker. I dette tilfellet ble det critter standardhastigheten innstilt.
  • Returnere den midlertidige Critter objekt. Slutten av spesiell Critter () -funksjonen returnerer sprite, men nå er det ikke bare en sprite, men en critter.

Poenget med denne mekanismen er å ha nye typer objekter tilgjengelige. Den Critter er mye som en Sprite, men det kan ha ny atferd og egenskaper. Dette er en utrolig kraftig funksjon.

Den tekniske betegnelsen for å lage en sprite handle som det er nedstammet fra en annen sprite er arv. Java arv modellen er vanligvis gjort på en annen måte (ved hjelp av en mekanisme som kalles prototyping).

Det er ikke slik formell Java arv er gjort, men mekanismen som vises her er lettere å forstå enn den "riktige" måten, og det ligner på hvordan arv er gjort i mange andre språk. Det er ingenting i det hele tatt galt med denne tilnærmingen, men noen ganger kan du se andre tilnærminger til arv i Javascript.