Hvordan bygge en Library of Gjenbrukbare objekter for din HTML5 spill

August 28  by Eliza

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

//frogLib.js
// Objekter for frosk spill
funksjon Fly () {
tFly = ny Sprite (scene, "fly.png", 20, 20);
tFly.setSpeed ​​(10);
tFly.wriggle = function () {
// Endre retning av noen tilfeldig mengde
newDir = (Math.random () * 90) - 45;
this.changeAngleBy (newDir);
} // End sno seg
returnere tFly;
} // End Fly
fungere Frog () {
tFrog = ny Sprite (scene, "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]) {
this.changeAngleBy (5);
} // End if
if (keysDown [K_UP]) {
this.changeSpeedBy (1);
if (this.speed> this.maxSpeed) {
this.setSpeed ​​(this.maxSpeed);
} // End if
} // End if
if (keysDown [K_DOWN]) {
this.changeSpeedBy (1);
if (this.speed <this.minSpeed) {
this.setSpeed ​​(this.minSpeed);
} // End if
} // End if
} // end checkKeys
returnere tFrog;
} // End setupFrog

Dette er et interessant dokument. Den inneholder ikke noe annet enn de to klassedefinisjoner. Den brukes fordi flere andre programmer vil bruke disse to klassene.

Ved hjelp av et bibliotek er enkelheten selv. Her er frogFly.html fil som setter disse to elementene sammen i et enkelt spill:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> frogFly.html </ title>
<Script type = "text / javascript"
src = "simpleGame.js">
</ Script>
<Script type = "text / javascript"
src = "frogLib.js"> </ script>
<Script type = "text / javascript">
Var scene;
Var frosk;
Div fly;
Var løv;
funksjon init () {
scene = ny Scene ();
scene.setBG ("green");
frosk = ny Frog ();
fly = ny Fly ();
later = ny Sprite (scene, "leaves.png", 640, 480);
leaves.setSpeed ​​(0);
scene.start ();
} // End init
funksjon oppdatering () {
scene.clear ();
frog.checkKeys ();
fly.wriggle ();
leaves.update ();
frog.update ();
fly.update ();
} // End oppdatering ();

</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Dette programmet introduserer ikke mye som er nytt. Det implementerer bare de elementene som er definert i biblioteket, i henhold til fremgangsmåten:

  1. Importere froglib.js bibliotek.

    Den frogLib filen er rett og slett en Javascript-fil. Importere den på samme måte som du importere simpleGame.js fil, med en separat <script> tag.

  2. Lag sprites.

    Bladene sprite er bare en vanlig sprite. Bygg frosken og fly akkurat som du gjorde før, selv om de er definert i en annen fil. (Hvis frosken eller fly ikke blir opprettet, sørg for at du har importert biblioteket riktig.)

  3. Håndtere endring.

    Oppdateringen () -funksjonen tar ansvar for kontroll av spillet. Det er der du administrere alle de forskjellige sprite atferd: Fortell frosken å se etter tastetrykk (med frog.checkKeys () metoden), og fortelle fly å vri seg (med fly.wriggle () metoden).

  4. Tegn sprites.

    Når du har håndtert alt som forårsaket sprites å endre, trekke sprites på skjermen. Tegne hver sprite ved å påberope sin oppdatering () -metoden. Sprites er trukket for, så alt du ønsker å ha i bakgrunnen bør trekkes før elementer som vil vise i front. (Frosken vil vises på toppen av bakgrunnen, så frosken skal trekkes etter bakgrunnen på hver skjerm oppdatering.)

    Hvordan bygge en Library of Gjenbrukbare objekter for din HTML5 spill