Hvordan legge til metoder til klasser i ditt HTML5 spill

April 15 by Eliza

Egenskaper beskrive egenskapene til et objekt i HTML 5 spill, og metodene beskriver oppførselen. En metode er en funksjon assosiert med et objekt. Du bygger metoder veldig mye som å lage en eiendom, men i stedet for å legge en enkel verdi, du tildele en hel funksjon til et navn.

For eksempel, den neste utgave av critter har en changeSpeed () -metoden. Når brukeren trykker på pil opp, vil den critter fremskynde, og når brukeren trykker på pil ned, vil critter tregere (og til slutt går den andre veien). Her er koden for critter med sin nye metode på plass:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> critterChangeSpeed.html </ 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.speed = 0;
tCritter.checkKeys = function () {
if (keysDown [K_RIGHT]) {
this.speed ++;
}
if (keysDown [K_LEFT]) {
this.speed--;
}
tCritter.setSpeed (this.speed);
} // End metode
returnere tCritter;
}

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

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

Legg merke til at den beveger seg når brukeren trykker på tastene. For dette, og de fleste eksempler, vil et statisk bilde ikke være nok til å hjelpe deg å se hva som skjer.

I denne nye versjonen av programmet, har Critter objekt en ny atferd identifisert. I hovedsak, er en metode ingenting mer enn en funksjon definert inne i en klasse. Ikke få panikk. Det er egentlig ikke så vanskelig å finne ut. Du forteller at systemet hva du skal gjøre hvis brukeren noensinne spør Critter objekt for å endre hastigheten.

Lag en ny egenskap som kalles checkKeys.
I Javascript, en egenskap og en metode er nøyaktig det samme. Hvis du kobler en vanlig variabel til et objekt, er det en eiendom. Hvis du kobler en funksjon til det, det er en metode. (Eiendoms navnene er normalt substantiver. Metode navnene er normalt verb eller verb setninger.)
Bygge en ny metode for å inneholde atferden.
changeSpeed er ikke en vanlig eiendom, men en metode, så vil du legge til en funksjon i det. (For Computer Science majors der ute, og bygge en anonym funksjon på fly som dette er et eksempel på en lambda funksjon. Se etter den på deleksamen!)
Sjekk for keyboard input.
Når du gjør en Critter objekt, vil det allerede vet hvordan du skal se etter sine egne tastetrykk.
Endre hastigheten basert på keyboard input.
Hvis brukeren trykker rett, øke hastigheten (på standard retning, positive hastigheter flytte sprite til høyre). Hvis brukeren trykker igjen, senke hastigheten.
Bruk setSpeed () metode for å endre den faktiske hastigheten.
Sprite objekt som gir oppskriften på critter allerede har en setSpeed () -metoden. Bruk denne metoden for å gjøre objektet flytte på den angitte hastighet.
Inne i en metode, bruker dette søkeordet.
Når du oppretter en metode inne i en konstruktør, kan datamaskinen bli litt forvirret om navnene på ting. For det meste, du legger ting til en midlertidig critter kalt tCritter. For å eliminere forvirring, hvis du trenger å referere til andre eiendommer eller metoder for objektet du modifisere, bruk den generelle søkeord dette heller enn det faktiske navnet på objektet.
Endre oppdateringen () -funksjonen så critter sjekker tastaturet.
Husk at den viktigste oppdateringen () -funksjonen skjer en gang per ramme. Noe du vil skje en gang per ramme bør kalles i oppdateringen (). Legg et kall til critter.checkKeys (). Dette vil minne critter å sjekke tastaturet hver ramme og endre hastigheten etter behov.

In Verbindung stehende Artikel

Kanskje du har lyst