Hvordan det fungerer med flere objekter i HTML5 spill

December 15  by Eliza

Det ville være fint å ha mer enn ett objekt i HTML5 spillet. Flere objekter gjøre spillet litt mer spennende og legger til litt dybde. Ett objekt bumping rundt av seg selv ISNA € ™ t mye moro. Hva godt er feil hvis du ikke kan bli infisert med dem?

Hvordan det fungerer med flere objekter i HTML5 spill


Fordi spillet ble laget med objektorienterte prinsipper, er det ganske enkelt å legge til flere fluer. Her er koden.

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> multiFlies.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;
Var fluer;
Var løv;
Var Scoreboard;
Var treff;
Var ribbitMP3;
Var ribbitOGG;
// Var fly;
Var NUMFLIES = 3;
funksjon init () {
Scoreboard = document.getElementById ("Scoreboard");
hits = 0;
scene = ny Scene ();
scene.setBG ("green");
frosk = ny Frog ();
setupFlies ();
later = ny Sprite (scene, "leaves.png", 640, 480);
leaves.setSpeed ​​(0);
ribbitMP3 = ny Sound ("ribbit.mp3");
ribbitOGG = ny Sound ("ribbit.ogg");
scene.start ();
} // End init
funksjon oppdatering () {
scene.clear ();
frog.checkKeys ();
leaves.update ();
for (i = 0; i <NUMFLIES; i ++) {
flyr [i] .wriggle ();
checkCollisions (I);
flyr [i] .update ();
} // Slutt for loop
frog.update ();
} // End oppdatering ();
funksjons setupFlies () {
flyr = new Array (NUMFLIES);
for (i = 0; i <NUMFLIES; i ++) {
fluer [i] = new Fly ();
} // Slutt for
} // end setupFlies

funksjons checkCollisions (flyNum) {
if (frog.collidesWith (flyr [flyNum])) {
flyr [flyNum] .reset ();
ribbitMP3.play ();
ribbitOGG.play ();
updateScore ();
} // End if
} // end checkCollisions

funksjon updateScore () {
// Oppdatere resultattavlen
treff + = 1;
scoreBoard.innerHTML = "Treff:" + hits
} // End updateScore
</ Script>
</ Head>
<Body onload = "init ()">
<Div id = "Scoreboard"> Treff: 0 </ div>
</ Body>
</ Html>

Hovedsak, slår du en enkel flue inn i en rekke fluer. Hver gang du ville ha gjort noe med en enkel flue, iterere deg gjennom rekke fluer. Her er høydepunktene:

  1. Endre fly variabel slik det kalles nå fluer.

    Snarere enn en enkel flue variabel, vil du arbeide med en rekke fluer.

  2. Lag en NUMFLIES konstant.

    Lagre nummeret av fluer i en spesiell variabel kalt NUMFLIES. Dette angir hvor mange fluer i spillet. Du kan enkelt endre denne verdien for å gjøre spillet vanskeligere eller lettere. Legg merke til at verdien av NUMFLIES ikke forventes å endre seg under et enkelt løp av spillet, slik at du setter det hele i store bokstaver for å indikere at det er en konstant.

  3. Legge til et treff variabel og en resultattavle div.

    Denne variabelen vil holde oversikt over antall fly-frosk kollisjoner. Det er en tilsvarende div, som vil vise resultatet.

  4. Sett opp fluene.

    Den setupFlies () -funksjonen går gjennom en løkke NUMFLIES ganger. Hver gang gjennom løkken, skaper det en flue og føyer det til numFlies matrise:

    funksjons setupFlies () {
    flyr = new Array (NUMFLIES);
    for (i = 0; i <NUMFLIES; i ++) {
    fluer [i] = new Fly ();
    } // Slutt for
    } // end setupFlies

  5. Endre oppdateringen () -funksjonen.

    Nå som du har flere fluer, må du sørge for at du oppdaterer hvert element av fluer array. Igjen, bruk en for loop å gå gjennom rekke. For hvert fly i rekken, kaller sin sno seg () -metoden, sjekk for kollisjoner med frosken, og oppdatering:

    funksjon oppdatering () {
    scene.clear ();
    frog.checkKeys ();
    leaves.update ();
    for (i = 0; i <NUMFLIES; i ++) {
    flyr [i] .wriggle ();
    checkCollisions (I);
    flyr [i] .update ();
    } // Slutt for loop
    frog.update ();
    } // End oppdatering ();

  6. Endre checkCollisions () -funksjonen.

    Du trenger å gjøre noen mindre endringer i checkCollisions så det kan se etter en kollisjon mellom frosk og dagens fly. Bare passere en flue nummer til funksjonen og bruke denne indeksen til å gjøre kollisjonen sjekk:

    funksjons checkCollisions (flyNum) {
    if (frog.collidesWith (flyr [flyNum])) {
    flyr [flyNum] .reset ();
    ribbit.play ();
    updateScore ();
    } // End if
    } // end checkCollisions

  7. Oppdatere resultattavlen.

    Det siste trinnet er å oppdatere resultattavlen. Alt dette krever er å øke antall treff og deretter endre resultattavle div for å reflektere den nye antall treff:

funksjon updateScore () {
// Oppdatere resultattavlen
treff + = 1;
scoreBoard.innerHTML = "Treff:" + hits
} // End updateScore