Hvordan legge til Drag effekter til HTML5 spill

May 31  by Eliza

Vektoren tillegg prinsippet kan være nyttig for din HTML5 spill på mange måter. For én, kan det legge dra effekt og dermed føre til mer nøyaktig land kjøretøy atferd. Tenk deg bilen din er fast i et dårlig nabolag i midten av natten (igjen). Du kan ikke bare endre plasseringen av bilen direkte. Du kan ikke selv endre sin bevegelse.

Hva du har å gjøre i stedet er å legge en kraft. Når du legger kraft, du sakte legge til bevegelsesvektoren. Til slutt begynner bilen beveger seg. Hvis du slutter å bruke makt, vil det til slutt stoppe som luftmotstanden og rullemotstand bremse bilen ned.

Gaming dra løp

Den drag.html eksempelet viser en realistisk bil som akselererer sakte og bremser til en stopp som gasspedalen (i dette tilfellet, pil opp) slippes.

Hvordan legge til Drag effekter til HTML5 spill


Vil du virkelig trenger å se programmet i aksjon for å sette pris på sin oppførsel.

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

tCar.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.imgAngle, 2);
}
// Bevege seg i den aktuelle retningen
this.addVector (this.imgAngle, 2);
} // end checkKeys

tCar.checkDrag = function () {
speed = this.getSpeed ​​();
speed * = 0,95;
this.setSpeed ​​(hastighet);
} // End checkDrag
returnere TCAR;
} // End bil def
funksjon init () {
Spillet = ny Scene ();
game.setBG ("# 666666");
bil = ny bil ();
game.start ();
} // End init
funksjon oppdatering () {
game.clear ();

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

Hvordan implementere dra i spillet ditt

Denne versjonen bruker et mer realistisk kraft basert bevegelse. Når brukeren trykker på pil opp, bygger bilen opp hastigheten. Hvis brukeren forlater pil opp trykket, når bilen en toppfart naturlig. Når brukeren frigjør pil opp, bilen bremser gradvis og til slutt stopper. Kraftvektorene er nøkkelen.

Slik fungerer det:

  1. Bygge en grunnleggende kjøretøy.

    Opprette en egendefinert sprite med en checkKeys () metoden, og se etter alle de vanlige piltastene. Koden for å sjekke venstre og høyre piltast er akkurat hva du forventer.

  2. Gå videre med en kraftvektor.

    Koden for fremover er litt annerledes. Snarere enn bare å endre hastigheten direkte og bruk kraft i bilens strømretningen. Bruk sprite er getImgAngle () metode for å bestemme hvilken retning bilen peker, og legge til en liten styrke i den retningen.

  3. Lag en checkDrag () -metoden.

    Biler ikke bare holde det gående uten strøm. Vind og jordmotstand vil bremse dem ned, og til slutt vil de stoppe. Simulere de ulike motstandskreftene ved å legge en checkDrag () metoden til objektet.

  4. Multiplisere hastigheten ved et drag faktor.

    For dette eksempelet, de ulike motstandskreftene vil rane bilen på 5 prosent av sin fart hver ramme. Husk at spillet kjører på 20 bilder per sekund, slik at dragkraft er ganske betydelig. Du kan oppnå dra effekten på mange måter, men den enkleste måten er å multiplisere bilens hastighet av noen verdi mindre enn 1.

  5. Ingen bremser!

    Hva med selvrespekt arcade bilen har bremser? Seriøst, kan det være lurt å legge en ned-pil-inngang, men det bør ikke være nødvendig fordi bilen vil avta av seg selv.

  6. Smak til.

    Dette eksemplet gir en grov skisse, men du kan endre en rekke verdier for å få akkurat den bilen ytelsen du ønsker. Du kan simulere en kraftigere motor (eller en mindre masse) ved å øke kraftvektoren når du trykker på gasspedalen.

    Du kan simulere en mer responsiv suspensjon ved å endre svinghastighet hvis brukeren trykker høyre eller venstre piler. Du kan også simulere en mer eller mindre effektiv bil ved å endre dra forholdet. Akkurat nå, snur bilen i alle hastigheter, men du kan hindre venstre- og høyrepil innganger hvis bilen er under en viss hastighet.