Sådan tilføjer du tyngdekraften til dit HTML5-spil - dummier

Gravitetsberegninger har været en del af HTML5 videospil fra begyndelsen. Der er faktisk to typer tyngdekraft at overveje. I platform-stil spil er spilleren tæt på en planet, og al tyngdekraft ser ud til at trække alt lige ned.

Når du ved, hvordan du tilføjer accelerationsvektorer, er platform-stil tyngdekraft faktisk nemt at arbejde med. Tænk på tyngdekraften som en konstant kraft, der altid trækker en lille smule af hver ramme.

Sådan tilføjer du raketter til dit spils tur

Dette eksempel har en anden interessant funktion. Når du trykker på pil op, ændres bilens billede til et andet billede med flammer.

Koden til hoverCar-eksemplet vises her i sin helhed:

hoverCar. html var bil; var byen; var spil; funktion bil () {tCar = ny Sprite (spil, "hoverCar. png", 70, 50); tCar. setSpeed ​​(0); tCar. hSpeed ​​= 0 tCar. checkKeys = funktion () {tCar. changeImage ("hoverCar. png"); hvis (keysDown [K_LEFT]) { dette. hSpeed ​​- = 1 } hvis (keysDown [K_RIGHT]) { dette. hSpeed ​​+ = 1 } hvis (keysDown [K_UP]) { dette. addVector (0, 5); dette. changeImage ("hoverCarThrust. png") ;} dette. changeXby (denne hSpeed); } // end checkKeys tCar. checkGravity = function () { hvis (dette. y> 580) { dette. setPosition (dette x, 580); } ellers { dette. addVector (180, 1); } // ende hvis } / / end checkGravity returnér tCar;} // ende bil def funktion init () {game = new Scene (); bil = ny bil (); city ​​= New Sprite (spil, "city. png", 800, 600); byen. setSpeed ​​(0); byen. setPosition (400, 300); spil. start ();} // end init funktion opdatering () {game. klar(); byen. opdatering (); bil. checkKeys (); bil. checkGravity (); bil. opdatering ();} // slut opdatering

Sådan bruges kraftvektor i dit spil

Gravity er faktisk ret ligetil. Det er simpelthen en kraftvektor. De andre interessante dele af dette eksempel indebærer ændring af den vandrette bevægelse uden at ændre bilens billedvinkel og justere billedet for at indikere thrusteren. Her er trinene:

1. Byg to forskellige billeder.

   Brug din billededitor til at oprette to forskellige versioner af billedet.

2. Byg et almindeligt sprite.

   Som de fleste køretøjer sprites, har du brug for en checkKeys () metode. Denne er oprettet på almindelig vis, men adfærden er lidt anderledes.

3. Indstil billedet som standard.

   Standardbilledet har ingen thrusters. Brug metoden changeImage () for at gøre dette til standardbilledet. Når thrusterne er tændt, vil billedet blive ændret.

4. Brug en variabel til at styre vandret hastighed.

   Du kan oprette hSpeed-variablen for at styre bilens vandrette hastighed.

5. Indstil venstre og højre pil for at ændre hSpeed.

   Venstre og højre piletasterne ændrer hSpeed-variablen.

6. Brug changeXby til at indstille den vandrette hastighed.

   Efter at have tjekket alle tasterne, skal du ændre bilens x-værdi til den aktuelle værdi af hSpeed.

7. Op-pilen tilføjer en vektor opad.

   Brug den nu berygtede addVector () -funktion til at tilføje en lille kraftvektor opad, når brugeren trykker på pil op. Husk at 0 grader er op. Spil rundt med denne værdi for at få den mængde tryk du vil have til dit spil.

8. Vis thrusterne, når pilen er trykket op.

   Hvis brugeren trykker på pil op, skal du vise thrusterne. Brug metoden changeImage () til at indstille spritets billede til den med raketdrivere.

9. Byg en checkGravity () metode.

   Denne metode kaldes hver ramme for at kompensere for tyngdekraften.

10. Kontroller, om du er på jorden.

    I dette eksempel defineres jorden som en y-værdi større end 580.

11. Hvis du ikke er på jorden, skal du tilføje en tyngdekraftsvektor.

    Fordi det vil akkumulere, skal tyngdekraftsvektoren være temmelig lille. Du bliver nødt til at afbalancere tyngdekraftens og thrusters kraft for at få den adfærd du ønsker. Hvis tyngdekraften er for stærk, vil de ikke virke. Hvis thrusters er for stærke, flyver bilen simpelthen ind i rummet.