Hvordan legge til Realistisk Motion til din HTML5 spill

August 17  by Eliza

Ta en titt på space.html. Dette enkle spillet er et godt eksempel for å anvende realistisk bevegelse til HTML5 spillet. Det benytter kontroll ordningen gjort kjent i det klassiske spill asteroider og Spacewar! (Selv om Asteroids er bedre kjent, Spacewar! Er langt tidligere og mer innflytelsesrike spill.)

Hvordan legge til Realistisk Motion til din HTML5 spill


Klikk her for å få den fulle opplevelsen.

Hvordan legge til en kraftvektor til din gameâ € ™ s objekt

Skipet styres av piltastene, men Newtons effekten er lettere å se i verdensrommet enn på bakken (ingen pesky motvirkende krefter å komme i veien). De venstre- og høyre piltast rotere skipet, men de påvirker ikke skipets bevegelse. Opp-pilen fyrer av en rakett, som legger en kraftvektor i retning skipet er i dag overfor.

Her er koden:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> plass </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
Var skipet;
Var spillet;
funksjon Ship () {
tShip = ny Sprite (spill, "ship.png", 25, 25);
tShip.setSpeed ​​(3);
tShip.checkKeys = function () {
if (keysDown [K_LEFT]) {
this.changeImgAngleBy (-5);
}
if (keysDown [K_RIGHT]) {
this.changeImgAngleBy (5);
}
if (keysDown [K_UP]) {
this.addVector (this.getImgAngle (), 0,1);
}
} // End funksjon
returnere tShip;
} // Objekt definisjon
funksjon init () {
Spillet = ny Scene ();
skip = ny Ship ();
game.setBG ("svart");

game.start ();
} // End init
funksjon oppdatering () {
game.clear ();
ship.checkKeys ();
ship.update ();
} // End oppdatering
</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Hvordan simulere plass i spillet ditt

Her er oversikt:

  1. Begynn eksempelet på vanlig måte.

    Som de fleste simpleGame demoer, begynner med en sprite og en scene. Fordi skipet vil ha en tilpasset metode, du gjør det et unikt objekt.

  2. Gi skipet en checkKeys () -metoden.

    Den checkKeys () metoden ser for tastetrykk og endrer skipets oppførsel deretter.

  3. Endre bildevinkel.

    En sprite faktisk har to forskjellige vinkler. Det kan ha en vinkel som den peker (kalt imgAngle i simpleGame) og vinkelen den beveger seg (kalt moveAngle). Når du endrer vinkelen, endrer du både bevegelse og bildevinkler på antagelsen om at objektet vil bare reise i retning den peker.

    For enkle eksempler dette er greit, men mange typer bevegelse krever frakobling bilde og bevegelses vinkler. Den changeImgAngleBy () metoden gjør det mulig å endre retningen på bildet peker uten å endre bevegelse vinkel. (Det er en changeMotionAngle () metoden, også, men det er ikke brukt så ofte.)

  4. Legg en kraftvektoren å simulere fremstøt.

    Når brukeren trykker på pil opp, fyrer skipet sine viktigste raketter. Dette legger en liten kraftvektor i retning skipet er i dag overfor. Bruk getImgAngle () metode for å bestemme retningen skipet er i dag overfor, og bruke denne verdien til å angi hvor kraften skal legges.

    Fordi denne koden som skjer i animasjonen sløyfe og forsterkes som piltasten holdes nede, er bare en veldig liten kraft trengs.