Hoe u zwaartekracht toevoegt aan uw HTML5-spel - dummies

Zwaartekrachtberekeningen maken al vanaf het begin deel uit van HTML5-videogames. Er zijn eigenlijk twee soorten zwaartekracht te overwegen. In platformachtige games bevindt de speler zich dicht bij een planeet en lijkt alle zwaartekracht alles recht naar beneden te trekken.

Wanneer u versnellingsvectoren kunt toevoegen, is zwaartekracht in platformstijl eigenlijk gemakkelijk om mee te werken. Denk aan de zwaartekracht als een constante kracht die altijd een klein bedrag naar beneden trekt in elk frame.

Rockets toevoegen aan de rit van je spel

Dit voorbeeld heeft nog een andere interessante functie. Wanneer u op de pijl-omhoog drukt, wordt de afbeelding van de auto gewijzigd in een andere afbeelding met vlammen.

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

hoverCar. html var auto; var stad; var game; function Car () {tCar = nieuwe Sprite (spel, "hoverCar. png", 70, 50); tCar. setSpeed ​​(0); tCar. hSpeed ​​= 0 tCar. checkKeys = function () {tCar. changeImage ("hoverCar. png"); if (keysDown [K_LEFT]) { dit. hSpeed ​​- = 1 } if (keysDown [K_RIGHT]) { dit. hSpeed ​​+ = 1 } if (keysDown [K_UP]) { dit. addVector (0, 5); dit. changeImage ("hoverCarThrust. png") ;} dit. changeXby (dit. hSpeed); } // end checkKeys tCar. checkGravity = function () { if (this. y> 580) { dit. setPosition (dit, x, 580); } else { dit. addVector (180, 1); } // einde als } // einde controleGravity return tCar;} // einde auto def-functie init () {game = new Scene (); auto = nieuwe auto (); city ​​= nieuwe Sprite (game, "city. png", 800, 600); stad. setSpeed ​​(0); stad. setPosition (400, 300); spel. start ();} // update van de eind-init-functie () {game. duidelijk(); stad. bijwerken(); auto. checkKeys (); auto. checkGravity (); auto. update ();} // end update

Force vector gebruiken in je spel

Zwaartekracht is eigenlijk vrij eenvoudig. Het is gewoon een krachtvector. De andere interessante delen van dit voorbeeld omvatten het veranderen van de horizontale beweging zonder de beeldhoek van de auto te veranderen en het beeld aan te passen om de boegschroef aan te duiden. Dit zijn de stappen:

1. Bouw twee verschillende afbeeldingen.

   Gebruik uw afbeeldingseditor om twee verschillende versies van de afbeelding te maken.

2. Bouw een gewone sprite.

   Zoals de meeste voertuigsprites, hebt u een methode checkKeys () nodig. Deze is op de gewone manier opgezet, maar het gedrag is een beetje anders.

3. Stel de afbeelding in als standaard.

   De standaardafbeelding heeft geen stuwraketten. Gebruik de methode changeImage () om hiervan de standaardafbeelding te maken. Wanneer de stuwraketten worden ingeschakeld, wordt de afbeelding gewijzigd.

4. Gebruik een variabele om de horizontale snelheid te regelen.

   U kunt de hSpeed-variabele maken om de horizontale snelheid van de auto te beheren.

5. Stel de linker en rechter pijlen in om hSpeed ​​aan te passen.

   De linker en rechter pijltjestoetsen wijzigen de hSpeed-variabele.

6. Gebruik changeXby om de horizontale snelheid in te stellen.

   Nadat u alle sleutels hebt gecontroleerd, wijzigt u de x-waarde van de auto in de huidige waarde van hSpeed.

7. Met de pijl-omhoog voegt u een vector toe.

   Gebruik de nu beruchte addVector () -functie om een ​​kleine krachtvector naar boven toe toe te voegen wanneer de gebruiker op de pijl omhoog drukt. Onthoud dat 0 graden omhoog is. Speel rond met deze waarde om de hoeveelheid stuwkracht te krijgen die je voor je spel wilt.

8. Laat de boegschroeven zien wanneer de pijl-omhoog wordt ingedrukt.

   Als de gebruiker op de pijl omhoog drukt, moet u de stuwraketten laten zien. Gebruik de methode changeImage () om de afbeelding van de sprite in te stellen op degene met raketstuwraketten.

9. Bouw een methode checkGravity ().

   Deze methode wordt elk frame genoemd om de zwaartekracht te compenseren.

10. Controleer of u op de grond bent.

    In dit voorbeeld is de grond gedefinieerd als een y-waarde groter dan 580.

11. Voeg een graviteitskrachtvector toe als u niet op de grond staat.

    Omdat de zwaartekrachtvector zal accumuleren, moet deze vrij klein zijn. Je zult de kracht van de zwaartekracht en de stuwraketten moeten balanceren om het gedrag te krijgen dat je wilt. Als de zwaartekracht te sterk is, zullen de stuwraketten niet werken. Als boegschroeven te sterk zijn, vliegt de auto gewoon de ruimte in.