Hoe te Gravity Toevoegen aan je HTML5 Game

Zwaartekracht berekeningen hebben een deel van HTML5 video games vanaf het begin geweest. Er zijn eigenlijk twee soorten zwaartekracht te overwegen. In de platform-stijl spelen, de speler is dicht bij een planeet, en al de zwaartekracht lijkt alles te trekken recht naar beneden.

Als je weet hoe je versnelling vectoren toe te voegen, platform-stijl zwaartekracht is eigenlijk eenvoudig om mee te werken. Denk aan de zwaartekracht als een constante kracht altijd naar beneden trekken van een kleine hoeveelheid elk frame.

Hoe te Gravity Toevoegen aan je HTML5 Game

Hoe om raketten toe te voegen aan uw gameâ € s rijden

Dit voorbeeld heeft een andere interessante eigenschap. Wanneer u op de pijl omhoog, wordt het de auto veranderd in een ander beeld met vlammen.

De code voor de hoverCar voorbeeld wordt hier getoond in zijn geheel:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> hoverCar.html </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
var auto;
var stad;
var spel;

functie Auto () {
tCar = new Sprite (spel, "hoverCar.png", 70, 50);
tCar.setSpeed ​​(0);
tCar.hSpeed ​​= 0

tCar.checkKeys = function () {
tCar.changeImage ("hoverCar.png");
if (keysDown [K_LEFT]) {
this.hSpeed ​​- = 1
}

if (keysDown [K_RIGHT]) {
this.hSpeed ​​+ = 1
}

if (keysDown [K_UP]) {
this.addVector (0, 0,5);
this.changeImage ("hoverCarThrust.png");
}

this.changeXby (this.hSpeed);
} // End checkKeys

tCar.checkGravity = function () {
if (this.y> 580) {
this.setPosition (this.x, 580);
} Else {
this.addVector (180, 0,1);
} // End if
} // End checkGravity

terug tCar;
} // End auto def

functie init () {
spel = new Scene ();
auto = new Car ();
stad = new Sprite (spel, "city.png", 800, 600);
city.setSpeed ​​(0);
city.setPosition (400, 300);

game.start ();
} // End init

functie update () {
game.clear ();
city.update ();

car.checkKeys ();
car.checkGravity ();
car.update ();
} // End-update

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

Hoe geweld vector gebruiken in je spel

Zwaartekracht is eigenlijk vrij eenvoudig. Het is gewoon een kracht vector. De andere interessante delen van dit voorbeeld omvatten de verticale beweging veranderen zonder de auto beeldhoek en het afbeelding de boegschroef geven. Hier zijn de stappen:

  1. Bouw van twee verschillende beelden.

    Gebruik uw beeldbewerkingsprogramma om twee verschillende versies van het beeld op te bouwen.
  2. Bouw een gewone sprite.

    Net als de meeste auto sprites, u een methode checkKeys () nodig. Deze is ingesteld op de gewone manier, maar het gedrag is een beetje anders.
  3. Stel het beeld op standaard.

    Het beeld standaard heeft geen stuwraketten. Gebruik de methode changeImage () om het beeld van de standaard te maken. Wanneer de stuwraketten zijn ingeschakeld, zal het beeld worden veranderd.
  4. Een variabele horizontale snelheid te controleren.

    U kunt de hspeed variabele creëren om de horizontale snelheid van de auto te beheren.
  5. Stel de links en rechts pijlen om hspeed wijzigen.

    De linker en rechter pijltoetsen wijzigen de hspeed variabele.
  6. Gebruik changeXby de horizontale snelheid ingesteld.

    Na het controleren van alle toetsen, verander de x-waarde van de auto om de huidige waarde van hspeed.
  7. De pijl omhoog voegt een vector omhoog.

    Gebruik de inmiddels beruchte addVector () functie om een ​​kleine kracht vector boven toe wanneer de gebruiker de pijl omhoog drukt. Vergeet niet dat 0 graden omhoog is. Speel met deze waarde aan de hoeveelheid stuwkracht die u wilt voor uw spel te krijgen.
  8. Toon de stuwraketten wanneer de pijl omhoog wordt gedrukt.

    Als de gebruiker is druk op de pijl omhoog, moet u de stuwraketten laten zien. Gebruik de methode changeImage () om het beeld van de sprite instellen op de een met raket thrusters.
  9. Bouw een methode checkGravity ().

    Deze methode zal elk frame worden opgeroepen om te compenseren voor de zwaartekracht.
  10. Controleren om te zien als je op de grond.

    In dit voorbeeld wordt de grond gedefinieerd als y-waarde groter dan 580.
  11. Als je niet op de grond, voeg een zwaartekracht vector.

    Omdat het zal ophopen, de zwaartekracht vector moet vrij klein. Je nodig hebt om de balans van de kracht van de zwaartekracht en de stuwraketten aan het gedrag dat u wilt krijgen. Als zwaartekracht te sterk is, zal de stuwraketten niet. Als stuwraketten zijn te sterk, de auto gewoon vliegt in de ruimte.

© 2019 Quilcedacarvers.com | Contact us: webmaster# quilcedacarvers.com