Sådan tilføjes realistisk bevægelse til dit HTML5-spil - dummier

Tag et kig på rummet. html. Dette enkle spil er et godt eksempel til at anvende realistisk bevægelse til dit HTML5-spil. Det udnytter kontrolordningen, der blev kendt i de klassiske spil Asteroids og Spacewar! (Selvom Asteroider er bedre kendt, er Spacewar! langt det tidligere og mere indflydelsesrige spil.)

Klik her for at få den fulde oplevelse.

Sådan tilføjer du en kraftvektor til dit spilsobjekt

Skibet styres af piletasterne, men Newtons effekt er lettere at se i rummet end på jorden (ingen krænkede kræfter for at komme i vejen). Venstre og højre piletasterne roterer skibet, men de påvirker ikke skibets bevægelse. Op-pilen brænder en raket, som tilføjer en kraftvektor i den retning skibet står overfor.

Her er koden:

space var skib; var spil; funktion Ship () {tShip = new Sprite (spil, "skib. 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 (dette. getImgAngle (),.1); }} // slutfunktions retur tShip;} // objekt definition funktion init () {game = new Scene (); skib = nyt skib (); spil. setBG ("sorte"); spil. start ();} // end init funktion opdatering () {game. klar(); skib. checkKeys (); skib. opdatering ();} // slut opdatering

Sådan simuleres plads i dit spil

Her er rundvisningen:

1. Start eksemplet på normal måde.

   Som de fleste simpleGame-demoer begynder man med en sprite og en scene. Fordi skibet vil have en brugerdefineret metode, gør du det til et unikt objekt.

2. Giv skibet en checkKeys () metode.

   Metoden checkKeys () ser efter nøglepresser og ændrer skibets adfærd i overensstemmelse hermed.

3. Skift billedvinkel.

   En sprite har faktisk to forskellige vinkler. Det kan have en vinkel, som den peger på (kaldet imgAngle i simpleGame) og vinklen den bevæger sig (kaldet moveAngle). Når du ændrer vinklen, ændrer du både bevægelsen og billedvinklerne på den antagelse, at genstanden simpelthen rejser i den retning, den vender mod.

   For enkle eksempler er det fint, men mange slags bevægelser kræver afkobling af billed- og bevægelsesvinklerne. Metoden changeImgAngleBy () gør det muligt at ændre retningen, som billedet peger på, uden at ændre bevægelsesvinklen. (Der er også en metode for changeMotionAngle (), men den bruges ikke meget ofte.)

4. Tilføj en kraftvektor til at simulere trykkraft.

   Når brugeren trykker på pil op, brænder skibet sine vigtigste raketter. Dette tilføjer en lille kraftvektor i den retning skibet står overfor. Brug metoden getImgAngle () til at bestemme den retning, skibet står overfor, og brug denne værdi til at angive, hvor kraften skal tilføjes.

   Da denne kode sker i animationssløjfen og forstærkes, da piletasten holdes nede, behøver kun en meget lille kraft.