Hvordan lage Tanks i din HTML5 spill

October 22  by Eliza

Denne typen spill gir deg en slags lansering mekanisme for HTML5-spill med semi-realistisk fysikk, og har du lansere prosjektiler (flygende dyr med sinne problemer eller annet) på en slags mål.

Hvordan lage Tanks i din HTML5 spill

Stridsvogner, tårn, og skjell

Det mest interessante ting om en tank-stil spillet er forholdet mellom tanken, sin turret, og kulene det branner.

Tanken er et fantom, men tankbildet ikke omfatter en turret. Dreiehodet er en separat sprite ment å bli forbundet til beholderen og dreies om sin egen. Når spilleren beveger seg i tanken, beveger dreieskiven med den. Når brukeren roterer tårnet, roterer dreieskiven, men tanken ikke gjør det.

Kulen er en tredje sprite, som vises når brukeren fyrer av tanken. Kulen utgangsstilling bestemmes av tankens stilling, og kulen initielle bevegelsesvinkel er bestemt av dreiehodet vinkel.

Her er koden for tanken:

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

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

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

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

// Alltid flytte turret med meg.
this.turret.setPosition (this.x, this.y);

// Rotere turret

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

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

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

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

} // end checkKeys

returnere tTank;
} // End tank

Tanken Designet er mildt komplisert ved å ha en avhengig turret sprite, og en kule sprite. Her er hvordan du kan bygge dette mish mos av pansrede sprite godhet:

  1. Bygg tanken sprite først.

    Som med de fleste eksemplene i simpleGame, begynner ved å bygge en midlertidig sprite for tanken (kalt tTank).

  2. Bygge en turret sprite.

    Dreiehodet er en andre sprite. Det er en egenskap av tanken, samt en sprite i seg selv. Dreiehodet er forholdsvis enkel, slik at det kan være et lager sprite. Det trenger ikke å være en komplett underklasse.

  3. Bygge en kule sprite.

    Hver tank har en sprite og en kule. Kulen vil trenge noen spesiell oppførsel, så det vil være en underklasse av Sprite objekt. For nå, bare vet at tanken vil trenge en kule. Legg merke til at kulen trenger å vite hvilken tank det tilhører.

  4. Les tastaturet.

    Tanken er nå satt til å bruke WASD-tastene for innspill.

  5. Flytte tanken til venstre og høyre.

    Den venstre og høyre kontroller flytte tanken sprite seg selv. Flytt turret så sitt senter er alltid det samme som tankens sentrum. Dette fører til at dreieskiven alltid bevege seg med tanken.

  6. Rotere turret.

    Opp og ned kontrollene føre til turret å rotere. Sett minimums- og maksimumsverdier for å holde dreieskiven innen et rimelig område av vinkler.

  7. Fyre kulen.

    På bålet kommando (space bar som standard), påberope kulen brann () -metoden. (Selvfølgelig, må du skrive det i Bullet klassen.)

  8. Oppdatere turret.

    Inntil nå har alle oppdateringen () samtaler skjedde i hovedoppdaterings () -funksjonen. Men den viktigste spillet ikke egentlig trenger å oppdatere turret. På grunn av at dreieskiven er en del av tanken, bør oppdateringen av tanken oppdatere turret. Fordi checkKeys () metoden vil skje hver ramme, oppdatere turret for å sikre at det trekker riktig.

  9. Beveg kulen.

    Hvis en kule er aktiv, bruker checkGravity () metode for å spore sin nåværende kurs mens du tar gravitasjonskreftene i betraktning. Hvis det ikke er noe punkt for tiden aktiv, vil denne linje bli ignorert.

  10. Oppdatere bullet.

    Igjen, føles kulen som en del av tanken, så det bør bli oppdatert automatisk.

Hvordan bygge en kule

Kulen klassen vil bli skutt av en tank. Kulen er en overraskende sofistikert klasse, som det er behov for en brann () metoden (som vil brann kulen basert på tanken og turret nåværende situasjon) og en checkGravity () metode (som plotter bullet bane i verdensrommet).

Her er Bullet klassekoden:

funksjon Bullet (eier) {
// Eieren er tanken å eie denne bullet

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

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

tBullet.fire = function () {
// Begynne i midten av min tank
// Peker i tank turret retning
this.setPosition (this.owner.x, this.owner.y);
this.setMoveAngle (this.owner.turret.getImgAngle ());
this.setSpeed ​​(20);
this.show ();
} // End brann

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

returnere tBullet;
} // End bullet

Her er historien om en kule i et spill:

  1. Spesifiser eieren tank.

    Når dette spillet har flere stridsvogner skyte på hverandre (som det helt klart behov), bør det være mange av kulene flyr rundt. Hver kule må vite hvilken tank det tilhører så det kan skyte fra høyre posisjon i riktig retning.

  2. Skjule.

    Bullet objekt opprettes helt i begynnelsen av spillet, men den tilbringer mesteparten av sitt liv gjemt bort usett. En av de første tingene du gjør er å skjule kulen så det vil være synlig først etter at det er avfyrt.

  3. Satt grense handling å DØ.

    Kuler vanligvis dør når de kommer til enden av skjermen. Sprite er ikke fjernet fra minnet. Det rett og slett ikke vises på skjermen, og ikke svare på kollisjoner. Stille grensen handling å DØ vil føre til ønsket atferd.

  4. Brann fra å eie tank posisjon.

    Når kulen er avfyrt, plassere den ved å eie tank posisjon.

  5. Still bevegelsen vinkel til å eie tankens turret vinkel.

    Turret hovedoppgave er å angi hvilken vinkel er brukt som kulen startbane.

  6. Gi en stor bevegelseshastighet.

    Kuler bør bevege seg raskt, så sett en utgangshastighet på 20 piksler per bilde. (Du kan legge til en annen kontroll for å tillate brukeren å endre den innledende hastighet hvis du ønsker det.)

  7. Avslør kulen.

    Påkall kulen show () metode for å gjøre kule vises på skjermen.

  8. Sjekk for tyngdekraften.

    All denne funksjonen gjør er å kompensere for gravitasjonskreftene med addVector () -metoden.