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.)
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:
- 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.
- Gi skipet en checkKeys () -metoden.
Den checkKeys () metoden ser for tastetrykk og endrer skipets oppførsel deretter.
- 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.)
- 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.
- • Hvordan legge til Gravity til din HTML5 spill
- • Hvordan legge til Timing til din HTML5 spill
- • Hvordan lage Tic-Tac-Toe i din HTML5 spill
- • Hvordan legge til lyd til din HTML5 spill
- • Hvordan legge til din e-postkonto til din iPad
- • Hvordan lage en Lunar Lander i din HTML5 spill
- • Hvordan lage en animasjon Loop i din HTML5 spill
- • Hvordan lage en virtuell joystick for din HTML5 spill
- • Hvordan legge til kollisjoner til din HTML5 spill