Slik legger du tyngdekraften til HTML5-spillet ditt - dummies

Gravitetsberegninger har vært en del av HTML5 videospill helt fra begynnelsen. Det er faktisk to typer tyngdekraften å vurdere. I plattformspill er spilleren nær en planet, og all tyngdekraften ser ut til å trekke alt rett ned.

Når du vet hvordan du legger til akselerasjonsvektorer, er plattform-stil tyngdekraften faktisk lett å jobbe med. Tenk på tyngdekraften som en konstant kraft som alltid trekker ned en liten mengde hver ramme.

Slik legger du til raketter på spillets tur

Dette eksemplet har en annen interessant funksjon. Når du trykker på pil opp, blir bilbildet endret til et annet bilde med flammer.

Koden for hoverCar-eksemplet vises her i sin helhet:

hoverCar. html var bil; var byen; var spill; funksjon Bil () {tCar = ny Sprite (spill, "hoverCar. png", 70, 50); TCAR. setSpeed ​​(0); TCAR. hSpeed ​​= 0 tCar. checkKeys = funksjon () {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); } annet { dette. addVector (180, 1); } // slutt hvis } / / end checkGravity returner tCar;} // end bil def funksjon init () {game = new Scene (); bil = ny bil (); city ​​= new Sprite (spill, "city. png", 800, 600); by. setSpeed ​​(0); by. setPosition (400, 300); spill. start ();} // end init funksjon oppdatering () {spill. klar(); by. Oppdater(); bil. checkKeys (); bil. checkGravity (); bil. oppdatering ();} // sluttoppdatering

Slik bruker du kraftvektor i spillet ditt

Gravity er faktisk ganske grei. Det er bare en kraftvektor. De andre interessante delene i dette eksempelet innebærer å endre horisontal bevegelse uten å endre bilens bildevinkel og justere bildet for å indikere thrusteren. Her er trinnene:

1. Bygg to forskjellige bilder.

   Bruk bildeditoren til å bygge to forskjellige versjoner av bildet.

2. Bygg en vanlig sprite.

   Som de fleste kjøretøy sprites, trenger du en checkKeys () metode. Denne er satt opp på vanlig måte, men oppførselen er litt annerledes.

3. Still bildet som standard.

   Standardbildet har ingen thrusters. Bruk metoden changeImage () for å gjøre dette til standardbildet. Når thrusters er slått på, vil bildet bli endret.

4. Bruk en variabel for å styre horisontal hastighet.

   Du kan opprette hSpeed-variabelen for å styre bilens horisontale hastighet.

5. Still venstre og høyre pil for å endre hSpeed.

   Venstre og høyre piltastene endrer hSpeed-variabelen.

6. Bruk changeXby for å angi horisontal hastighet.

   Etter å ha kontrollert alle tastene, må du endre bilens x-verdi til den nåværende verdien av hSpeed.

7. Opp pilen legger til en vektor oppover.

   Bruk den nå beryktede addVector () -funksjonen til å legge til en liten kraftvektor oppover når brukeren trykker på pil opp. Husk at 0 grader er oppe. Spill rundt med denne verdien for å få det du trenger for spillet ditt.

8. Vis thrusters når du trykker på pil opp.

   Hvis brukeren trykker på pil opp, må du vise thrusters. Bruk metoden changeImage () for å angi spriteens bilde til den med rakettstøttere.

9. Bygg en checkGravity () metode.

   Denne metoden vil bli kalt hver ramme for å kompensere for tyngdekraften.

10. Sjekk om du er på bakken.

    I dette eksemplet defineres bakken som en y-verdi som er større enn 580.

11. Hvis du ikke er på bakken, legg til en tyngdekraftsvektor.

    Fordi det vil samle seg, må tyngdekraften vektoren være ganske liten. Du må balansere kraften av tyngdekraften og thrusters for å få den oppførselen du vil ha. Hvis tyngdekraften er for sterk, vil thrusters ikke fungere. Hvis thrusters er for sterke, flyr bilen ganske enkelt inn i rommet.