Sådan oprettes Tanke i dit HTML5 spil

Denne type spil giver dig en slags lanceringen mekanisme til din HTML5 spil med semi-realistiske fysik, og har du starte projektiler (fugle med vrede spørgsmål eller andet) på en slags mål.

Sådan oprettes Tanke i dit HTML5 spil

Tanke, tårne, og skaller

Det mest interessante ved en tank-stil spil er forholdet mellem tanken, dens tårn, og kuglerne det brande.

Tanken er en sprite, men tanken billedet ikke omfatter et tårn. Tårnet er en separat sprite beregnet til at blive forbundet til beholderen og roteres på egen hånd. Når spilleren bevæger tank, revolverhovedet bevæger sig med den. Når brugeren roterer revolveren, revolverhovedet roterer, men tanken ikke.

Kuglen er en tredje sprite, som vises, når brugeren affyrer tanken. Kuglen oprindelige position er bestemt ved tankens position, og kuglen oprindelige bevægelse vinkel bestemmes af revolverhovedet vinkel.

Her er koden for tanken:

funktion UserTank () {
tTank = ny Sprite (spil, "greenTank.png", 50, 25);
tTank.setSpeed ​​(0);
tTank.setPosition (100, 550);

tTank.turret = ny Sprite (spil, "turret.png", 50, 25);
tTank.bullet = ny Bullet (tTank);

tTank.checkKeys = function () {
Hvis (keysDown [K_A]) {
this.changeXby (-2);
}

Hvis (keysDown [K_D]) {
this.changeXby (2);
}

// Altid flytte tårn med mig.
this.turret.setPosition (this.x, this.y);

// Rotere tårn

Hvis (keysDown [K_W]) {
this.turret.changeImgAngleBy (-5);
Hvis (this.turret.getImgAngle () <0) {
this.turret.setImgAngle (0);
} // End if
}

Hvis (keysDown [K_S]) {
this.turret.changeImgAngleBy (5);
Hvis (this.turret.getImgAngle ()> 90) {
this.turret.setImgAngle (90);
}
}

Hvis (keysDown [K_SPACE]) {
this.bullet.fire ();
}

this.turret.update ();
this.bullet.checkGravity ();
this.bullet.update ();

} // end checkKeys

tilbage tTank;
} // Ende tanken

Tanken design er mildt kompliceres ved at have en afhængig tårn sprite, og en kugle sprite. Her er hvordan man opbygger dette sammensurium af pansret sprite godhed:

  1. Byg tanken sprite først.

    Som med de fleste eksempler i simpleGame, begynde med at bygge en midlertidig sprite for tanken (kaldet tTank).
  2. Byg et tårn sprite.

    Tårnet er en anden sprite. Det er en egenskab af tanken, samt en sprite i egen ret. Tårnet er forholdsvis enkel, så det kan være en bestand sprite. Det behøver ikke at være en komplet underklasse.
  3. Byg en kugle sprite.

    Hver tank har en sprite og en kugle. Kuglen får brug for nogle specifikke adfærd, så det vil være en underklasse af Sprite objektet. For nu, bare vide, at tanken skal bruge en kugle. Bemærk, at kuglen bliver nødt til at vide, hvilken tank det tilhører.
  4. Læs tastaturet.

    Tanken er i øjeblikket indstillet til at bruge WASD tasterne for input.
  5. Flyt beholderen til venstre og højre.

    Venstre og højre kontrol flytte tanken sprite selv. Flyt tårnet så dens centrum er altid den samme som tankens center. Dette bevirker, at revolveren altid bevæge sig med tanken.
  6. Drej revolveren.

    De op og ned kontrollen forårsager revolveren til at rotere. Indstil minimum og maksimum værdier til at holde tårnet inden for et rimeligt udvalg af vinkler.
  7. Fire kuglen.

    På ilden kommandoen (mellemrumstasten som standard), påberåbe kuglen ild () metode. (Selvfølgelig, skal du skrive det i Bullet klasse.)
  8. Opdater tårn.

    Indtil nu har alle opdatering () opkald skete i de vigtigste opdatering () funktion. Men den vigtigste spil ikke virkelig har brug for at opdatere tårn. Fordi tårn er en del af tanken, skal opdatere tanken opdatere tårn. Fordi checkKeys () metode vil ske hver frame, opdatere tårn for at sikre, at det trækker korrekt.
  9. Flyt kugle.

    Hvis en kugle er aktiv, skal du bruge checkGravity () metode til at spore sin nuværende kurs, mens du tager tyngdepåvirkning i betragtning. Hvis der ikke er bullet aktuelt er aktiv, vil denne linje blive ignoreret.
  10. Opdater kuglen.

    Igen kuglen føles del af tanken, så det bør opdateres automatisk.

Hvordan til at bygge en kugle

Kuglen klasse vil blive fyret af en tank. Kuglen er en overraskende sofistikeret klasse, som den har brug for en brand () metode (som vil fyre kuglen baseret på tanken og tårn aktuelle situation) og en checkGravity () metode (som plotter kuglen bane i rummet).

Her er den Bullet klasse-kode:

funktion Bullet (ejer) {
// Ejer er tanken at eje denne kugle

tBullet = ny Sprite (spil, "bullet.png", 5, 5);

tBullet.owner = ejer;
tBullet.hide ();
tBullet.setBoundAction (DIE);

tBullet.fire = function () {
// Begynder i midten af ​​mit akvarium
// Peger i tank tårn retning
this.setPosition (this.owner.x, this.owner.y);
this.setMoveAngle (this.owner.turret.getImgAngle ());
this.setSpeed ​​(20);
this.show ();
} // Ende brand

tBullet.checkGravity = function () {
this.addVector (180, 1);
} // Ende checkGravity

tilbage tBullet;
} // Ende kugle

Her er livshistorie en kugle i et spil:

  1. Angiv ejeren tank.

    Når dette spil har flere tanke skyde på hinanden (som det klart behov), bør der være en masse af kugler flyver rundt. Hver kugle skal vide hvilken tank det tilhører, så den kan skyde fra højre position i den rigtige retning.
  2. Skjul.

    Den Bullet objekt oprettes i begyndelsen af ​​spillet, men det bruger det meste af sit liv gemt væk uset. En af de første ting du skal gøre er at skjule kuglen, så det vil først blive synlige efter den er fyret.
  3. Indstil grænse indsats for at dø.

    Kugler typisk dør, når de når til slutningen af ​​skærmen. Sprite er ikke fjernes fra hukommelsen. Det kan simpelthen ikke vises på skærmen, og ikke reagerer på kollisioner. Indstilling af grænsen indsats for at dø, vil gøre den ønskede adfærd.
  4. Fire fra eje tankens position.

    Når kuglen er fyret, skal den placeres på ejende tankens holdning.
  5. Sæt bevægelsen vinkel til eje tankens tårn vinkel.

    Tårnet vigtigste opgave er at angive, hvilken vinkel anvendes som bullet s start bane.
  6. Giv en stor bevægelse hastighed.

    Bullets bør bevæge sig hurtigt, så sæt en starthastighed på 20 pixels per frame. (Du kan tilføje en anden kontrol for at gøre det muligt for brugeren at ændre starthastigheden, hvis du ønsker.)
  7. Reveal kuglen.

    Påberåbe kuglen show () metode til at gøre kuglen vises på skærmen.
  8. Check for tyngdekraften.

    Alt denne funktion gør, er at kompensere for tyngdepåvirkning med addVector () metode.

© 2019 Zajacperrone.com | Contact us: webmaster# zajacperrone.com