Slik legger du til realistisk bevegelse i HTML5-spillet ditt - dummies

Ta en titt på rommet. html. Dette enkle spillet gir et godt eksempel for å bruke realistisk bevegelse til HTML5-spillet ditt. Den benytter kontrollskjemaet som ble kjent i de klassiske spillene Asteroids og Spacewar! (Selv om Asteroider er bedre kjent, Spacewar! er langt det tidligere og mer innflytelsesrike spillet.)

Klikk her for å få full erfaring.

Slik legger du til en kraftvektor til spillets objekt.

Skipet styres av piltastene, men Newtons effekt er lettere å se i rommet enn på bakken (ingen pesky dra styrker for å komme i vei). Venstre og høyre piltastene roterer skipet, men de påvirker ikke skipets bevegelse. Opp pilen brenner et rakett, som legger til en kraftvektor i den retningen skipet står overfor.

Her er koden:

space var skipet; var spill; funksjon Ship () {tShip = new Sprite (spill, "skip. png", 25, 25); tShip. setSpeed ​​(3); tShip. checkKeys = function () {if (keysDown [K_LEFT]) { dette. changeImgAngleBy (-5); } hvis (keysDown [K_RIGHT]) { dette. changeImgAngleBy (5); } hvis (keysDown [K_UP]) { dette. addVector (denne. getImgAngle (),. 1); }} // sluttfunksjon retur tShip;} // objektdefinisjon funksjon init () {game = new Scene (); skip = nytt skip (); spill. setBG ("black"); spill. start ();} // end init funksjon oppdatering () {spill. klar(); skip. checkKeys (); skip. oppdatering ();} // sluttoppdatering

Hvordan simulere plass i spillet ditt

Her er nedslaget:

1. Start eksempelet på vanlig måte.

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

2. Gi skipet en checkKeys () -metode.

   Metoden checkKeys () ser etter nøkkelpresser og endrer skipets oppførsel tilsvarende.

3. Endre bildevinkelen.

   En sprite har faktisk 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 bevegelsen og bildevinklene på antagelsen om at objektet bare vil reise i retningen det står overfor.

   For enkle eksempler er det bra, men mange typer bevegelse krever avkobling av bilde- og bevegelsesvinkler. Metoden changeImgAngleBy () lar deg endre retningen bildet peker uten å endre bevegelsesvinkelen. (Det er også en metode for changeMotionAngle (), men den brukes ikke så ofte.)

4. Legg til en kraftvektor for å simulere trykk.

   Når brukeren trykker på pil opp, brenner skipet sine viktigste raketter. Dette legger til en liten kraftvektor i den retningen skipet står overfor. Bruk metoden getImgAngle () for å bestemme hvilken retning skipet står overfor, og bruk denne verdien til å spesifisere hvor kraften skal legges til.

   Fordi denne koden skjer i animasjonssløyfen og forsterkes når piltasten holdes nede, er det bare en veldig liten kraft som trengs.