Video: Web Apps of the Future with React by Neel Mehta 2024
Det kommer att finnas tillfällen när du kommer att återanvända objekt flera gånger i dina HTML5-spel och de kommer att förbli ungefär samma. Så det är vettigt att sätta dem i ett bibliotek för enkel återanvändning. Det är precis vad du ska göra. Ta en titt på frogLib. js:
// frogLib. js // Objekt för groda spelfunktion Fly () {tFly = ny Sprite (scen, "flyga png", 20, 20); tFly. setSpeed (10); tFly. wriggle = function () {// ändra riktning med någon slumpmässig mängd newDir = (Math. random () * 90) - 45; detta. changeAngleBy (newDir);} // end wriggle return tFly;} // end Flyfunktion Groda () {tFrog = ny Sprite (scen, "groda. png", 50, 50); tFrog. maxhastighet = 10; tFrog. minSpeed = -3; tFrog. setSpeed (0); tFrog. setAngle (0); tFrog. checkKeys = function () {if (keysDown [K_LEFT]) {this. changeAngleBy (-5);} // end if if (keysDown [K_RIGHT]) {this. changeAngleBy (5);} // end if if (keysDown [K_UP]) {this. changeSpeedBy (1); om (denna hastighet> den här maxSpeed) {this. setSpeed (this maxSpeed);} / / if if} // end if if (keysDown [K_DOWN]) {this. changeSpeedBy (-1); om (denna hastighetDetta är ett intressant dokument. Den innehåller ingenting annat än de två klassdefinitionerna. Det används eftersom flera andra program kommer att använda dessa två klasser.
Att använda ett bibliotek är enkelhet själv. Här är frogFly. html-fil som sätter dessa två element ihop i ett enda spel:
frogFly. html src = "frogLib. js"> var scen; var groda; var flyga; var lämnar; funktion init () {scene = new Scene (); scen. setBG ("grön"); groda = ny groda (); flyga = ny flyga (); blad = ny Sprite (scen, "lämnar. png", 640, 480); löv. setSpeed (0); scen. start ();} // end init-funktionen uppdatering () {scen. klar(); groda. checkKeys (); flyga. slingra sig(); löv. uppdatering(); groda. uppdatering(); flyga. uppdatering ();} // slutuppdatering ();Detta program introducerar inte mycket som är nytt. Det implementerar enkelt de element som definieras i biblioteket enligt dessa steg:
Importera froglib. js-biblioteket.
FrogLib-filen är helt enkelt en JavaScript-fil. Importera det på samma sätt som du importerar simpleGame. js-fil, med en separat tagg.
Skapa sprites.
Bladen är bara en vanlig sprite. Bygg grodan och flyga precis som du gjorde förut, även om de är definierade i en annan fil. (Om grodan eller flyget inte skapas, se till att du importerat biblioteket korrekt.)
Hantera förändring.
Funktionen uppdatering () tar ansvar för kontrollen av spelet. Här kan du hantera alla olika spritbeteenden: Låt grodan leta efter tangenttryckningar (med metoden fröken. CheckKeys ()) och berätta att flyget ska vridas (med hjälp av.wriggle () -metoden).
Rita spritesna.
När du har hanterat allt som orsakade spritesna att ändra, rita spritesna på skärmen. Rita varje sprite genom att anropa sin update () metod. Sprites är ritade i ordning, så allt du vill ha i bakgrunden ska dras före föremål som kommer att visas framför. (Grodan kommer att visas ovanpå bakgrunden, så grodan ska dras efter bakgrunden på varje skärmuppdatering.)