Hur man lägger tyngd i ditt HTML5-spel - dummies

Gravitetsberäkningar har varit en del av HTML5-videospel från början. Det finns faktiskt två typer av gravitation att överväga. I plattformsspel spelar spelaren nära en planet, och all tyngdkraft verkar dra allt rakt ner.

När du vet hur man lägger till accelerationsvektorer är plattformstil gravitationen verkligen lätt att arbeta med. Tänk på gravitation som en konstant kraft som alltid drar ner en liten mängd varje ram.

Hur man lägger till raketer på ditt spels tur

Detta exempel har en annan intressant funktion. När du trycker på uppåtpilen ändras bilbilden till en annan bild med flammor.

Koden för hoverCar-exemplet visas här i sin helhet:

hoverCar. html var bil; var stad; var spel; funktion Bil () {tCar = ny Sprite (spel, "hoverCar. png", 70, 50); tCar. setSpeed ​​(0); tCar. hSpeed ​​= 0 tCar. checkKeys = funktion () {tCar. changeImage ("hoverCar. png"); om (keysDown [K_LEFT]) { detta. hSpeed ​​- = 1 } om (keysDown [K_RIGHT]) { detta. hSpeed ​​+ = 1 } om (keysDown [K_UP]) { detta. addVector (0, 5); detta. changeImage ("hoverCarThrust. png") ;} detta. changeXby (this. hSpeed); } // slutet checkKeys tCar. checkGravity = function () { om (detta. y> 580) { detta. setPosition (detta, x, 580); } annars { detta. addVector (180, 1); } // slut om } // slutkontrollGravity returnera tCar;} // slutbil def funktion init () {game = new Scene (); bil = ny bil (); city ​​= new Sprite (spel, "city. png", 800, 600); stad. setSpeed ​​(0); stad. setPosition (400, 300); spel. start ();} // end init-funktionen uppdatering () {game. klar(); stad. uppdatering(); bil. checkKeys (); bil. checkGravity (); bil. uppdatering ();} // slutuppdatering

Hur man använder kraftvektor i ditt spel

Gravity är faktiskt ganska enkelt. Det är helt enkelt en kraftvektor. De andra intressanta delarna av det här exemplet innebär att man ändrar den horisontella rörelsen utan att ändra bilens bildvinkel och justera bilden för att indikera propelleren. Här är stegen:

1. Bygg två olika bilder.

   Använd din bildredigerare för att skapa två olika versioner av bilden.

2. Bygg en vanlig sprite.

   Liksom de flesta fordon sprites behöver du en checkKeys () -metod. Den här är uppbyggd på vanligt sätt, men beteendet är lite annorlunda.

3. Ställ in bilden som standard.

   Standardbilden har inga thrusters. Använd metoden changeImage () för att göra detta till standardbilden. När thrustrarna är påslagen kommer bilden att ändras.

4. Använd en variabel för att styra horisontell hastighet.

   Du kan skapa hSpeed-variabeln för att hantera bilens horisontella hastighet.

5. Ställ vänster och högerpil för att ändra hSpeed.

   Vänster och höger piltangenter ändrar hSpeed-variabeln.

6. Använd changeXby för att ställa in horisontell hastighet.

   Efter att ha kontrollerat alla nycklar ändrar du bilens x-värde till nuvarande värde för hSpeed.

7. Upppilen lägger till en vektor uppåt.

   Använd den nu ökända addVector () -funktionen för att lägga till en liten kraftvektor uppåt när användaren trycker upp pilen. Kom ihåg att 0 grader är uppe. Spela runt med det här värdet för att få den mängd drag du vill ha för ditt spel.

8. Visa tryckknapparna när pilen trycks upp.

   Om användaren trycker på uppåtpilen måste du visa thrustrarna. Använd metoden changeImage () för att ställa in spritets bild till den med raketpistoler.

9. Bygg en checkGravity () -metod.

   Denna metod kommer att kallas varje ram för att kompensera för tyngdkraften.

10. Kontrollera om du är på marken.

    I det här exemplet definieras marken som ett y-värde som är större än 580.

11. Om du inte är på marken lägger du till en tyngdkraftsvektor.

    Eftersom det kommer att ackumuleras måste gravitationskraftvektorn vara ganska liten. Du måste balansera kraften i tyngdkraften och thrustrarna för att få beteendet du vill ha. Om tyngdkraften är för stark, kommer de inte att fungera. Om thrusters är för starka, flyger bilen helt enkelt ut i rymden.