Hvordan du bygger et bibliotek med gjenbrukbare objekter for ditt HTML5-spill - dummier

Det vil være ganger når du vil gjenbruke objekter flere ganger i HTML5-spillene dine, og de skal forbli omtrent det samme. Så det er fornuftig å sette dem i et bibliotek for enkel gjenbruk. Det er akkurat det du skal gjøre. Ta en titt på frogLib. js:

// frogLib. js // Objekter for froskspillfunksjon Fly () {tFly = ny Sprite (scene, "fly.png", 20, 20); tFly. setSpeed ​​(10); tFly. wriggle = funksjon () {// endre retning med noen tilfeldig mengde newDir = (Math. random () * 90) - 45; dette. changeAngleBy (newDir);} // endre vende tilbake tFly;} // end Flyfunksjon Frog () {tFrog = new Sprite (scene, "frosk. png", 50, 50); tFrog. maxSpeed ​​= 10; tFrog. minSpeed ​​= -3; tFrog. setSpeed ​​(0); tFrog. setAngle (0); tFrog. checkKeys = function () {if (keysDown [K_LEFT]) {this. changeAngleBy (-5);} // end hvis hvis (keysDown [K_RIGHT]) {this. changeAngleBy (5);} // ende hvis hvis (keysDown [K_UP]) {this. changeSpeedBy (1); hvis (denne hastigheten> dette. maxSpeed) {dette. setSpeed ​​(denne maksimalhastigheten);} // ende hvis} // ende hvis hvis (keysDown [K_DOWN]) {this. changeSpeedBy (1); hvis (denne hastigheten 
Dette er et interessant dokument. Den inneholder ingenting annet enn de to klassen definisjonene. Den brukes fordi flere andre programmer vil bruke disse to klassene.






Bruk av et bibliotek er enkelhet selv. Her er frogFly. html-fil som setter disse to elementene sammen i et enkelt spill:
frogFly. html src = "frogLib. js"> var scene; var frosk; var fly; var blader; funksjon init () {scene = ny scene (); scene. setBG ("green"); frosk = ny frosk (); fly = nytt fly (); blader = ny Sprite (scene, "blader.png", 640, 480); blader. setSpeed ​​(0); scene. start ();} // end init-funksjon oppdatering () {scene. klar(); frosk. checkKeys (); fly. vri seg(); blader. Oppdater(); frosk. Oppdater(); fly. oppdatering ();} // sluttoppdatering ();

Dette programmet introduserer ikke mye som er nytt. Den implementerer bare elementene som er definert i biblioteket, i henhold til disse trinnene:









Importer froglib. js bibliotek.
FrogLib-filen er bare en JavaScript-fil. Importer det på samme måte som du importerer simpleGame. js-fil, med en egen tagg.


Lag sprites.
Bladene sprite er bare en vanlig sprite. Bygg frosken og fly som du gjorde før, selv om de er definert i en annen fil. (Hvis frosken eller fluen ikke blir opprettet, må du sørge for at du importerte biblioteket riktig.)








Administrer endring.
Oppdateringen () -funksjonen tar ansvar for kontrollen av spillet. Dette er hvor du klarer alle de forskjellige spriteadferdene: Fortell frøen å se etter tastetrykk (med frosken. CheckKeys () -metoden), og fortell flyet å vri (med fly. Wriggle () -metoden).


Tegn sprites.
Når du har håndtert alt som førte til at sprites endrer seg, tegner du sprites på skjermen. Tegn hver sprite ved å bruke sin oppdateringsmetode (). Sprites er trukket i rekkefølge, så alt du vil ha i bakgrunnen skal trekkes før ting som vises foran. (Frosken vises ovenpå bakgrunnen, så frosken skal tegnes etter bakgrunnen på hver skjermoppdatering.)