Video: Technology Stacks - Computer Science for Business Leaders 2016 2024
Er zullen momenten zijn dat je objecten meerdere keren in je HTML5-spellen zult hergebruiken en dat ze ongeveer hetzelfde blijven. Het is dus logisch om ze in een bibliotheek te plaatsen voor eenvoudig hergebruik. Dat is precies wat je gaat doen. Kijk eens naar frogLib. js:
// frogLib. js // Objecten voor kikkergame-functie Fly () {tFly = nieuwe Sprite (scène, "fly. png", 20, 20); tFly. setSpeed (10); tFly. wriggle = function () {// van richting veranderen met een willekeurige hoeveelheid newDir = (Math. random () * 90) - 45; deze. changeAngleBy (newDir);} // end wriggle return tFly;} // end Fly-functie Frog () {tFrog = nieuwe Sprite (scène, "frog. 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 if if (keysDown [K_RIGHT]) {dit. changeAngleBy (5);} // end if if (keysDown [K_UP]) {dit. changeSpeedBy (1); als (deze snelheid> dit. maxSpeed) {dit. setSpeed (this. maxSpeed);} // end if} // end if if (keysDown [K_DOWN]) {this. changeSpeedBy (-1); if (this. speed
Dit is een interessant document. Het bevat niets anders dan de twee klassendefinities. Het wordt gebruikt omdat verschillende andere programma's deze twee klassen zullen gebruiken.
Het gebruik van een bibliotheek is de eenvoud zelf. Hier is de frogFly. html-bestand dat deze twee elementen samenbrengt in één spel:
frogFly. html src = "frogLib. js"> var scène; var frog; var vlieg; var bladeren; function init () {scene = new Scene (); tafereel. setBG ("groene"); frog = new Frog (); vliegen = nieuwe vlieg (); bladeren = nieuwe Sprite (scène, "bladeren. png", 640, 480); verlaat. setSpeed (0); tafereel. start ();} // update van de end-init-functie () {scène. duidelijk(); kikker. checkKeys (); vlieg. kronkelen(); verlaat. bijwerken(); kikker. bijwerken(); vlieg. update ();} // einde update ();
Dit programma introduceert niet veel dat nieuw is. Het implementeert eenvoudig de elementen gedefinieerd in de bibliotheek, volgens deze stappen:
-
Importeer de froglib. js bibliotheek.
Het bestand frogLib is gewoon een JavaScript-bestand. Importeer het op dezelfde manier als u de simpleGame importeert. js-bestand, met een afzonderlijke tag.
-
Maak de sprites.
De sprite bladeren is slechts een gewone sprite. Bouw de kikker en vlieg net zoals je eerder deed, ook al zijn ze in een ander bestand gedefinieerd. (Als de kikker of vlieg niet wordt gemaakt, zorg er dan voor dat u de bibliotheek correct hebt geïmporteerd.)
-
Wijzigingen beheren.
De update () -functie neemt de verantwoordelijkheid voor de besturing van het spel. Hier kun je alle verschillende spritegedragingen beheren: laat de kikker naar toetsaanslagen zoeken (met de methode checkKeys ()) en vertel de vlieg om te kronkelen (met de methode fly.wiggle ()).
-
Teken de sprites.
Nadat u alles hebt verwerkt waarvoor de sprites zijn gewijzigd, tekent u de sprites op het scherm. Teken elke sprite door de methode update () aan te roepen. Sprites worden op volgorde getekend, dus alles wat je op de achtergrond wilt hebben, moet worden getekend vóór items die vooraan worden weergegeven. (De kikker verschijnt bovenop de achtergrond, dus de kikker moet worden getekend na de achtergrond bij elke schermupdate.)
