Hvordan legge til sladd effekter til HTML5 spill

April 15  by Eliza

Du kan bruke kraftvektorene på en interessant måte i HTML5 spillet. Mange racing spill inkluderer sleng eller drivende mekanismer. Å få denne atferden helt riktig krever svært sofistikerte matematikk, men du kan gjøre en rimelig tilnærming til dette problemet uten for store anstrengelser.

Hvordan legge til sladd effekter til HTML5 spill


Dette bildet er ikke nok. Du trenger virkelig å se dette som et arbeidsprogram fordi det er kult. Når du beveger deg båten rundt på skjermen, båten driver og skids. Det er virkelig morsomt å spille med.

Hvordan legge til drivende atferd til din gameâ € ™ s objekt

For å få en enkel drivende oppførsel, bare legge en liten kraftvektor i båtens nåværende retning uavhengig av om brukeren er i dag å trykke på gasspedalen.

Denne teknikken er et kompromiss mellom rommet basert bevegelse (hvor kraftvektor tilsettes bare når gasspedalen trykkes) og standard bil oppførsel (hvor kjøreretningen alltid følger bilens nesen). Hver ramme har litt av hvert atferd.

Her er koden:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> drift.html </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
Var spillet;
Div båt;
funksjon Boat () {
tBoat = ny Sprite (spill, "boat.png", 100, 50);

tBoat.checkKeys = function () {
console.log (this.speed);
if (keysDown [K_LEFT]) {
this.changeImgAngleBy (-5);
}

if (keysDown [K_RIGHT]) {
this.changeImgAngleBy (5);
}

if (keysDown [K_UP]) {
this.addVector (this.getImgAngle (), 2);
}
this.addVector (this.getImgAngle (), (this.speed / 20));
} // end checkKeys

tBoat.checkDrag = function () {
speed = this.getSpeed ​​();
speed * = 0,95;
this.setSpeed ​​(hastighet);
}
returnere tBoat;
}
funksjon init () {
Spillet = ny Scene ();
game.setBG ("# 000066");
båt = ny båt ();
game.start ();
} // End init
funksjon oppdatering () {
game.clear ();

boat.checkKeys ();
boat.checkDrag ();
boat.update ();
}
</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Hvordan legge til drift til din gameâ € ™ s sprites

Ita € ™ s en veldig enkel prosedyre.

  1. Bygge en standard bilmodell.

    Vurdere å lage en båt, bare for variasjon.

  2. Bruk en kraftvektoren for akselerasjon.

    Igjen, du manuelt styre hastigheten, slik at addVector () mekanisme gir deg stor makt. Akselerasjonen kraftvektoren (brukes i opp-pil tastetrykk) kan være en bokstavelig verdi, men det trenger ikke å være enorme. Fordi du faktisk kommer til å være å legge en annen kraftvektoren, kan det være lurt å tone ned akselerasjonsvektoren.

  3. Legg en liten kraftvektoren hver ramme.

    Den primære kraftvektoren skjer bare når du akselererer, men en sekundær mindre vektor er lagt til hver ramme. Denne vektoren går i den retningen båten nå står overfor. Dette lille bevegelse vektor vil simulere momentum. Det er viktig at denne kraftvektor som en prosentandel av den hastighet, ikke en konstant verdi. Hvis du alltid gå fremover én piksel, for eksempel, båten vil aldri stoppe.