Hur man lägger till draffekter i ditt HTML5-spel - dummies

Principen för vektoraddition kan vara användbar för ditt HTML5-spel på många sätt. För en, kan den lägga till dragseffekt och därmed leda till mer exakt landfordons beteende. Tänk dig att bilen står fast i ett dåligt stadsdel i mitten av natten (igen). Du kan inte bara ändra bilens position direkt. Du kan inte ens ändra sin rörelse.

Vad du måste göra istället är att lägga till en kraft. När du lägger till kraft lägger du långsamt till rörelsevektorn. Så småningom börjar bilen röra sig. Om du slutar använda kraft, kommer det slutligen att sluta som vindmotstånd och rullande motstånd sakta ner bilen.

Gaming drag races

Drag. html-exempel visar en realistisk bil som accelererar långsamt och saktar till ett stopp när acceleratorn (i detta fall upp-pilen) släpps.

Du måste verkligen se programmet i aktion för att uppskatta dess beteende.

Drag var spel; var båt; funktion Bil () {tCar = nytt Sprite (spel, "bil. png", 100, 50); tCar. checkKeys = function () {konsol. logga (denna hastighet); om (keysDown [K_LEFT]) {this. changeImgAngleBy (-5);} om (keysDown [K_RIGHT]) {this. changeImgAngleBy (5);} om (keysDown [K_UP]) { detta. addVector (this. imgAngle, 2); } // flytta i nuvarande riktning detta. addVector (this. imgAngle, 2);} // end checkKeys tCar. checkDrag = funktion () { hastighet = detta. getSpeed ​​(); hastighet * =. 95; detta. setSpeed ​​(hastighet); } // slut checkDrag returnera tCar;} // slutbil def funktion init () {game = new Scene (); spel. setBG ("# 666666"); bil = ny bil (); spel. start ();} // end init-funktionen uppdatering () {game. klar(); bil. checkKeys (); bil. checkDrag (); bil. uppdatering ();} // slutuppdatering

Så här implementerar du dra i ditt spel

Denna version använder en mer realistisk kraftbaserad rörelse. När användaren trycker upp pilen, bygger bilen upp fart. Om användaren lämnar upp-pilen trycks, når bilen en toppfart naturligt. När användaren släpper upp pilen saktar bilen gradvis och slutar slutligen. Kraftvektorer är nyckeln.

Så här fungerar det:

1. Bygg ett grundläggande fordon.

   Skapa en anpassad sprite med en checkKeys () -metod och kontrollera alla normala piltangenter. Koden för kontroll av vänster och höger pilar är exakt vad du förväntar dig.

2. Gå framåt med en kraftvektor.

   Koden för framflyttning är något annorlunda. Istället för att bara ändra hastigheten direkt, applicera en kraft i bilens aktuella riktning. Använd spritets getImgAngle () -metod för att bestämma vilken riktning bilen pekar, och lägg till en liten kraft i den riktningen.

3. Skapa en checkDrag () -metod.

   Bilar går inte bara utan ström. Vind och markmotstånd saktar ner dem, och så småningom kommer de att sluta. Simulera de olika dragkrafterna genom att lägga till en checkDrag () -metod till ditt objekt.

4. Multiplicera hastigheten med en dragfaktor.

   För detta exempel kommer de olika dragkrafterna att riva bilen med 5 procent av sin hastighet varje ram. Kom ihåg att spelet körs med 20 bilder per sekund, så dragkraften är ganska stor. Du kan uppnå dra effekten på många sätt, men det enklaste sättet är att multiplicera bilens hastighet med något värde mindre än 1.

5. Inga bromsar!

   Vilken självhäftande arkadbil har bromsar? Allvarligt kan du lägga till en nedåtpilsinmatning, men det borde inte vara nödvändigt eftersom bilen kommer att sakta ner på egen hand.

6. Säsong till smak.

   Detta exempel ger en grov skiss, men du kan ändra ett antal värden för att få exakt den bilförmåga du vill ha. Du kan simulera en kraftfullare motor (eller en mindre massa) genom att öka kraftvektorn när du trycker på acceleratorn.

   Du kan simulera en mer responsiv upphängning genom att ändra vridningshastigheten om användaren trycker på höger eller vänsterpil. Du kan också simulera en mer eller mindre effektiv bil genom att ändra dragförhållandet. Just nu vänder bilen på vilken hastighet som helst, men du kan förhindra att vänster- och högerpil ingås om bilen är under en viss hastighet.