Driftaffecten toevoegen aan uw HTML5-spel - dummies

Je kunt dwangvectoren op een interessante manier gebruiken in je HTML5-game. Veel racegames zijn slip- of driftmechanismen. Om dit gedrag precies goed te krijgen, is zeer geavanceerde wiskunde vereist, maar je kunt dit gedrag zonder al te veel moeite redelijk op elkaar afstemmen.

Deze afbeelding is niet genoeg. Je moet dit echt als een werkprogramma zien, want het is echt gaaf. Terwijl u de boot op het scherm beweegt, drijft de boot en slipt. Het is echt heel leuk om mee te spelen.

Hoe je afdrijvingsgedrag toevoegt aan het object van je spel

Om een ​​eenvoudig drijfgedrag te krijgen, voeg je eenvoudig een kleine krachtvector toe in de huidige richting van de boot, ongeacht of de gebruiker op dit moment op het gaspedaal drukt.

Deze techniek is een compromis tussen de op ruimte gebaseerde beweging (waarbij de krachtvector alleen wordt toegevoegd wanneer het gaspedaal wordt ingedrukt) en standaard autogedrag (waarbij de rijrichting altijd de neus van het voertuig volgt). Elk frame heeft een beetje van elk gedrag.

Hier is de code:

afwijking. html var-spel; var boot; function Boat () {tBoat = nieuwe Sprite (game, "boot. png", 100, 50); tBoat. checkKeys = function () {console. log (deze snelheid); if (keysDown [K_LEFT]) {this. changeImgAngleBy (-5);} if (keysDown [K_RIGHT]) {dit. changeImgAngleBy (5);} if (keysDown [K_UP]) {dit. addVector (this. getImgAngle (), 2);} this. addVector (this. getImgAngle (), (this. speed / 20)); } // end checkKeys tBoat. checkDrag = function () {speed = this. getSpeed ​​(); snelheid * =. 95; deze. setSpeed ​​(snelheid);} return tBat;} functie init () {game = new Scene (); spel. setBG ("# 000066"); boot = nieuwe boot (); spel. start ();} // update van de eind-init-functie () {game. duidelijk(); boot. checkKeys (); boot. checkDrag (); boot. update ();}

Hoe je drift toevoegt aan de sprites van je spel

Het is een heel eenvoudige procedure.

1. Bouw een standaard voertuigmodel.

   Overweeg om een ​​boot te maken, alleen voor afwisseling.

2. Gebruik een krachtvector voor versnelling.

   Nogmaals, u beheert de snelheid handmatig, dus het addVector () -mechanisme biedt u geweldige kracht. De versnellingskrachtvector (gebruikt bij het indrukken van pijltjes naar boven) kan een letterlijke waarde zijn, maar deze hoeft niet enorm te zijn. Omdat u daadwerkelijk een tweede krachtvector gaat toevoegen, wilt u mogelijk de versnellingsvector verlagen.

3. Voeg in elk frame een kleine geforceerde vector toe.

   De primaire krachtvector vindt alleen plaats wanneer u versnelt, maar elk frame wordt voorzien van een secundaire kleinere vector. Deze vector gaat in de richting waarin de boot zich momenteel bevindt.Deze kleine bewegingsvector simuleert momentum. Het is belangrijk dat deze krachtvector een percentage van de snelheid is in plaats van een letterlijke waarde. Als u bijvoorbeeld altijd een pixel vooruitrijdt, stopt de boot nooit.