Hoe u methoden aan klassen toevoegt in uw HTML5-spel - dummies

Eigenschappen beschrijven de kenmerken van een object in uw HTML 5-spel en -methoden beschrijven het gedrag. Een methode is een functie die aan een object is gekoppeld. U bouwt methoden heel erg op het maken van een eigenschap, maar in plaats van een eenvoudige waarde toe te voegen, wijst u een volledige functie toe aan een naam.

De volgende versie van het critter heeft bijvoorbeeld een changeSpeed ​​() -methode. Wanneer de gebruiker op de pijl-omhoog drukt, zal het critter sneller gaan en wanneer de gebruiker op de pijl-omlaag drukt, zal het critter vertragen (en uiteindelijk de andere richting ingaan). Hier is de code voor het critter met zijn nieuwe methode:

critterChangeSpeed. html var-spel; var critter; functie Critter () {tCritter = nieuwe Sprite (game, "critter. gif", 30, 30); tCritter. snelheid = 0; tCritter. checkKeys = function () { if (keysDown [K_RIGHT]) { dit. snelheid ++; } if (keysDown [K_LEFT]) { dit. snelheid--; } tCritter. setSpeed ​​(deze snelheid); } // eindmethode return tCritter;} functie init () {game = new Scene (); critter = nieuwe Critter (); spel. start ();} functie update () {spel. duidelijk(); critter. checkKeys (); critter. update ();}

Merk op dat het beweegt wanneer de gebruiker op de toetsen drukt. Voor dit en de meeste voorbeelden is een statische afbeelding niet genoeg om u te helpen zien wat er aan de hand is.

In deze nieuwe versie van het programma heeft het Critter-object een nieuw gedrag geïdentificeerd. In essentie is een methode niets meer dan een functie die in een klas is gedefinieerd. Geen paniek. Het is echt niet zo moeilijk om erachter te komen. U vertelt het systeem wat te doen als de gebruiker het Critter-object ooit vraagt ​​om van snelheid te veranderen.

1. Maak een nieuwe eigenschap met de naam CheckKeys.

   In JavaScript zijn een eigenschap en een methode precies hetzelfde. Als u een gewone variabele aan een object koppelt, is dit een eigenschap. Als je er een functie aan koppelt, is het een methode. (Eigennamen zijn gewoonlijk zelfstandige naamwoorden. Methodenamen zijn normaal werkwoorden of werkwoordzinnen.)

2. Bouw een nieuwe methode om het gedrag te beheersen.

   changeSpeed ​​is geen gewone eigenschap, maar een methode, dus u voegt er een functie aan toe. (Voor de majors Computer Science die er zijn, is het bouwen van een anonieme functie zo als deze een voorbeeld van een lambda functie. Kijk ernaar tijdens het tussentijdse examen!)

3. Controleer op toetsenbordinvoer.

   Wanneer u een Critter-object maakt, weet het al hoe het moet zoeken naar zijn eigen toetsaanslagen.

4. Wijzig de snelheid op basis van toetsenbordinvoer.

   Als de gebruiker op rechts drukt, verhoogt u de snelheid (in de standaardrichting bewegen positieve snelheden de sprite naar rechts).Als de gebruiker naar links drukt, verlaagt u de snelheid.

5. Gebruik de methode setSpeed ​​() om de werkelijke snelheid te wijzigen.

   Het Sprite-object dat de blauwdruk voor critter levert, heeft al een methode setSpeed ​​(). Gebruik deze methode om het object met de aangegeven snelheid te laten bewegen.

6. Gebruik het trefwoord this in een methode.

   Wanneer u een methode in een constructor maakt, kan de computer enigszins verward raken over de namen van dingen. Voor het grootste deel, voeg je dingen toe aan een tijdelijk critter genaamd tCritter. Als u verwarring wilt voorkomen, gebruikt u het algemene trefwoord in plaats van de werkelijke naam van het object als u naar andere eigenschappen of methoden van het object wilt verwijzen dat u wilt wijzigen.

7. Wijzig de update () -functie zodat het critter het toetsenbord controleert.

   Let op: de hoofdupdate () -functie gebeurt één keer per frame. Alles wat u eenmaal per frame wilt laten gebeuren, moet worden aangeroepen in update (). Voeg een oproep toe aan Critter. checkKeys (). Dit zal het critter eraan herinneren om het toetsenbord elk frame te controleren en de snelheid te veranderen als dat nodig is.