SPRITE-objecten bouwen voor uw HTML5-spel - dummies

Om zeer krachtige HTML5-spellen te maken, wil je in staat zijn om je eigen sprites te bouwen die dat wel doen precies wat je wilt dat ze doen. Nadat je een object hebt gemaakt, kun je het kenmerken en gedrag geven.

Een voorraadsprite-object maken voor je spel

Om te beginnen, bekijk dit eenvoudige object:

critter var-spel; var critter; function init () {game = new Scene (); critter = nieuwe Sprite (spel, "critter. gif", 30, 30); critter. setSpeed ​​(0); spel. start ();} functie update () {spel. duidelijk(); critter. update ();}

Dit is een uiterst eenvoudig programma. Er wordt een scène en een enkele sprite met de naam critter gemaakt. Op dit moment doet het beest niet veel.

Je eigen sprite bouwen

Sprite-objecten zijn geweldig, maar zou het niet geweldig zijn als het critter zelf een object was en nog beter als het een nieuw object was gebaseerd op de sprite? Het zou kunnen beginnen met alle basisfuncties van de sprite, maar je zou nieuwe mogelijkheden kunnen toevoegen om critters te onderscheiden van andere sprites.

Bekijk CritterConstructor. html om een ​​manier te zien om dit te doen:

critter var game; var critter; functie Critter () {tCritter = nieuwe Sprite (game, "critter. gif", 30, 30); tCritter. setSpeed ​​(0); return tCritter;} function init () {game = new Scene (); critter = nieuwe Critter (); spel. start ();} functie update () {spel. duidelijk(); critter. update ();}

Dit programma werkt precies zoals de vorige, maar het is een beetje anders georganiseerd.

• Er is een functie met de naam Critter () . Het is belangrijk dat de functie de naam van een object is en dat het ook een hoofdletter is. Dit is een heel speciale functie, omdat het wordt gebruikt om een ​​Critter () -object te definiëren.

• De Critter () -functie maakt een tijdelijk sprite-object. In de Critter () -functie ziet u een tijdelijk sprite-object met de naam tCritter (). Dit is een nieuwe sprite.

• Wijzig de tijdelijke sprite zo vaak als u wilt. Als u een nieuw type object in JavaScript wilt maken, maakt u in feite een nieuw object en past u het vervolgens aan om precies het gewenste gedrag te krijgen. In dit geval is de standaardsnelheid van de critter ingesteld.

• Retourneer het tijdelijke Critter -object. Het einde van de speciale Critter () -functie retourneert de sprite, maar nu is het niet alleen maar een sprite, maar een critter.

Het punt van dit mechanisme is om nieuwe soorten objecten beschikbaar te hebben. De Critter lijkt veel op een Sprite, maar hij kan nieuw gedrag en nieuwe kenmerken hebben. Dit is een ongelooflijk krachtige functie.

De technische term voor het maken van een sprite werkt alsof het afstamt van een andere sprite is overerving. Het inheritance-model van JavaScript wordt meestal op een andere manier uitgevoerd (met behulp van een mechanisme genaamd prototyping ).

Het is niet de manier waarop formele JavaScript-overerving wordt gedaan, maar het hier getoonde mechanisme is gemakkelijker te begrijpen dan de "juiste" manier, en het is vergelijkbaar met hoe overerving wordt gedaan in veel andere talen. Er is helemaal niets mis met deze aanpak, maar je zult soms andere benaderingen van overerving in JavaScript tegenkomen.