Video: Web Apps of the Future with React by Neel Mehta 2025
Der vil være tidspunkter, hvor du vil genbruge genstande flere gange i dine HTML5 spil og de vil forblive omtrent det samme. Så det giver mening at sætte dem i et bibliotek for nem genbrug. Det er præcis det, du skal gøre. Tag et kig på frogLib. js:
// frogLib. js // Objekter for frøen spil funktion Fly () {tFly = ny Sprite (scene, "fly. png", 20, 20); tFly. setSpeed (10); tFly. wriggle = function () {// ændre retning med nogle tilfældige mængder newDir = (Math. random () * 90) - 45; det her. changeAngleBy (newDir);} // end wriggle return tFly;} // end Flyfunktion Frog () {tFrog = ny Sprite (scene, "frosk. png", 50, 50); tFrog. maxhastighed = 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);} // end hvis hvis (keysDown [K_UP]) {this. changeSpeedBy (1); hvis (denne hastighed> denne. maxhastighed) {dette. setSpeed (denne maxSpeed);} // ende if} // ende hvis hvis (keysDown [K_DOWN]) {this. changeSpeedBy (-1); hvis (denne hastighedDette er et interessant dokument. Den indeholder intet andet end de to klassetegninger. Det bruges, fordi flere andre programmer vil bruge disse to klasser.
Brug af et bibliotek er enkelhed selv. Her er frogFly. html-fil, der sætter disse to elementer sammen i et enkelt spil:
frogFly. html src = "frogLib. js"> var scene; var frosk; var fly; var blade funktion init () {scene = ny scene (); scene. setBG ("grønne"); Frøen = Ny Frø (); fly = nyt fly (); blade = ny Sprite (scene, "blade. png", 640, 480); blade. setSpeed (0); scene. start ();} // end init funktion opdatering () {scene. klar(); frø. checkKeys (); flyve. sno (); blade. opdatering (); frø. opdatering (); flyve. opdatering ();} // end opdatering ();Dette program introducerer ikke meget, der er nyt. Det gennemfører blot de elementer, der er defineret i biblioteket, i henhold til disse trin:
Importer froglib. js bibliotek.
FrogLib-filen er simpelthen en JavaScript-fil. Importer det på samme måde som du importerer simpleGame. js-fil med et separat tag.
Opret sprites.
Bladene sprite er bare en almindelig sprite. Byg frøen og flyve som du gjorde før, selvom de er defineret i en anden fil. (Hvis frøen eller fluen ikke bliver oprettet, skal du sørge for at importere biblioteket korrekt.)
Administrer ændring.
Funktionen opdatering () tager ansvar for kontrollen af spillet. Her styrer du alle de forskellige spriteadfærd: Fortæl frøen at se efter tastetryk (med metoden til frøen checkcheys ()) og fortæl flyvet om at vride (med flyet. Wriggle () -metoden).
Tegn sprites.
Når du har håndteret alt, der fik spritesne til at ændre sig, tegner du sprites på skærmen. Tegn hver sprite ved at påberåbe sig dens opdateringsmetode (). Sprites er trukket i rækkefølge, så alt hvad du vil have i baggrunden skal trækkes før ting, der vises foran. (Frøen vises oven på baggrunden, så frøen skal trækkes efter baggrunden på hver skærmopdatering.)