Hur man lägger till metoder för klasser i ditt HTML5-spel - dummies

Egenskaper beskriver egenskaperna hos ett objekt i ditt HTML 5-spel och metoder beskriver beteendet. En metod är en funktion som är associerad med ett objekt. Du bygger metoder så mycket som att skapa en egendom, men snarare än att lägga till ett enkelt värde, tilldelar du en hel funktion till ett namn.

Till exempel har nästa version av critter en changeSpeed ​​() -metod. När användaren trycker upp pilen, kommer critter att påskynda, och när användaren trycker ner pilen, kommer critter att sakta ner (och så småningom gå åt andra hållet). Här är koden för critter med sin nya metod på plats:

critterChangeSpeed. html var spel; var critter; funktion Critter () {tCritter = nytt Sprite (spel, "critter. gif", 30, 30); tCritter. hastighet = 0; tCritter. checkKeys = function () { om (keysDown [K_RIGHT]) { detta. hastighet ++; } om (keysDown [K_LEFT]) { detta. fart--; } tCritter. setSpeed ​​(denna hastighet); } // slutmetod returnera tCritter;} funktion init () {game = new Scene (); critter = new Critter (); spel. start ();} funktionsuppdatering () {spel. klar(); nötkreatur. checkKeys (); nötkreatur. uppdatering ();}

Observera att den rör sig när användaren trycker på tangenterna. För detta och de flesta exemplen är det inte en statisk bild som hjälper dig att se vad som händer.

I den här nya versionen av programmet har Critter-objektet ett nytt beteende identifierat. I huvudsak är en metod inget annat än en funktion definierad i en klass. Var inte panik. Det är verkligen inte så svårt att räkna ut. Du berättar för systemet vad du ska göra om användaren någonsin frågar Critter-objektet för att ändra hastigheten.

1. Skapa en ny egenskap som heter checkKeys.

   I JavaScript är en egenskap och en metod exakt densamma. Om du bifogar en vanlig variabel till ett objekt är det en egenskap. Om du bifogar en funktion till det är det en metod. (Egenskapsnamn är normalt substantiv. Metodnamn är normalt verb eller verbsatser.)

2. Bygg en ny metod för att innehålla beteendet.

   changeSpeed ​​är inte en vanlig egenskap, men en metod, så du bifogar en funktion till den. (För de datavetenskapliga majorsna där ute bygger en anonym funktion i flygningen på detta sätt ett exempel på en funktion för lambda . Var försiktig med halvtidsexamen!)

3. Kontrollera för tangentbordsinmatning.

   När du gör ett Critter-objekt, vet det redan hur man letar efter egna tangenttryck.

4. Ändra hastigheten baserat på tangentbordsinmatning.

   Om användaren trycker höger, höjer hastigheten (i standardriktningen flyttar positiva hastigheter sprite till höger).Om användaren trycker vänster, minska hastigheten.

5. Använd metoden setSpeed ​​() för att ändra den aktuella hastigheten.

   Sprite-objektet som ger ritningen till critter har redan en setSpeed ​​() -metod. Använd den här metoden för att flytta objektet med den angivna hastigheten.

6. Använd det här sökordet inom en metod.

   När du skapar en metod inom en konstruktör kan datorn bli lite förvirrad om namnen på saker. För det mesta lägger du saker till en tillfällig critter som heter tCritter. För att eliminera förvirring, om du behöver referera till andra egenskaper eller metoder för objektet du modifierar, använd det allmänna sökordet här istället för objektets verkliga namn.

7. Ändra uppdateringen () -funktionen så att critter kontrollerar tangentbordet.

   Kom ihåg att funktionen för huvuduppdatering () sker en gång per ram. Allt som du vill hända en gång per bild ska kallas i uppdatering (). Lägg till ett samtal till critter. checkKeys (). Detta kommer att påminna critter för att kontrollera tangentbordet varje ram och ändra dess hastighet efter behov.