Hvordan legge til Gravity til din HTML5 spill

June 11  by Eliza

Gravity beregninger har vært en del av HTML5 videospill fra begynnelsen. Det er faktisk to typer tyngdekraften til å vurdere. I plattform-stil spill, er spilleren nær en planet, og all gravitasjon ser ut til å trekke alt rett ned.

Når du vet hvordan du legger akselerasjon vektorer, er faktisk lett å arbeide med plattform-stil gravitasjon. Tenk på gravitasjon som en konstant kraft alltid trekke ned et lite beløp hver ramme.

Hvordan legge til Gravity til din HTML5 spill

Hvordan legge til raketter til din gameâ € ™ s ride

Dette eksempelet har en annen interessant funksjon. Når du trykker på pil opp, bilen bildet endret til et annet bilde med flammer.

Koden for hoverCar eksempel er vist her i sin helhet:

<! 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 bil;
Var byen;
Var spillet;

funksjon Car () {
TCAR = ny Sprite (spill, "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

returnere TCAR;
} // End bil def

funksjon init () {
Spillet = ny Scene ();
bil = ny bil ();
by = ny Sprite (spill, "city.png", 800, 600);
city.setSpeed ​​(0);
city.setPosition (400, 300);

game.start ();
} // End init

funksjon oppdatering () {
game.clear ();
city.update ();

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

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

Hvordan bruke kraftvektoren i spillet ditt

Gravity er faktisk ganske grei. Det er rett og slett en kraftvektoren. De andre interessante deler av dette eksempel innebære endring av den horisontale bevegelse uten å endre på bilens bildevinkel og justering av bildet for å indikere thruster. Her er fremgangsmåten:

  1. Bygge to forskjellige bilder.

    Bruke bilderedigeringsprogram for å bygge to forskjellige versjoner av bildet.

  2. Bygg en vanlig sprite.

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

  3. Angi bildet til standard.

    Standardbildet har ingen thrustere. Bruk changeImage () metode for å gjøre dette til standardbildet. Når thrustere er slått på, vil bildet endres.

  4. Bruke en variabel for å kontrollere horisontal hastighet.

    Du kan opprette hSpeed ​​variabel for å styre horisontalhastighet av bilen.

  5. Angi venstre og høyre piltast for å endre hSpeed.

    Venstre og høyre piltaster endre hSpeed ​​variabel.

  6. Bruk changeXby å sette den horisontale hastighet.

    Etter å ha sjekket alle tastene, endre x verdien av bilen til den nåværende verdien av hSpeed.

  7. Opp-pilen legger en vektor oppover.

    Bruk nå-beryktede addVector () -funksjonen til å legge til en liten styrke vektor oppover når brukeren trykker på pil opp. Husk at 0 grader er opp. Lek litt med denne verdien for å få mengden thrust du ønsker å spille.

  8. Vis thrustere når pil opp trykkes.

    Hvis brukeren trykke pil opp, må du vise thrustere. Bruk changeImage () metode for å sette sprite bilde til ett med rakett thrustere.

  9. Bygge en checkGravity () -metoden.

    Denne fremgangsmåten vil bli kalt hver ramme for å kompensere for tyngdekraften.

  10. Sjekk for å se om du er på bakken.

    I dette eksemplet, er i første definert som y-verdi større enn 580.

  11. Hvis du ikke er på bakken, legge til en tyngdekraften vektor.

    Fordi det vil akkumulere, må tyngdekraften vektor for å være ganske liten. Du må balansere kraften av tyngdekraften og thrustere for å få den atferden du ønsker. Hvis tyngdekraften er for sterk, vil thrustere ikke fungere. Hvis thrustere er for sterk, bare flyr bilen ut i verdensrommet.