Inhoudsopgave:
Video: YOU SERIOUSLY NEED TO STOP POSTING THESE... 2024
Kijk eens naar de ruimte. html. Deze eenvoudige game biedt een goed voorbeeld voor het toepassen van realistische bewegingen op je HTML5-game. Het maakt gebruik van het besturingsschema beroemd gemaakt in de klassieke games Asteroids en Spacewar! (hoewel Asteroids beter bekend is, Spacewar! is veruit het eerdere en invloedrijkste spel.)
Klik hier voor de volledige ervaring.
Hoe u een force-vector toevoegt aan het object van uw spel
Het schip wordt bestuurd door de pijltjestoetsen, maar het effect van Newton is gemakkelijker te zien in de ruimte dan op de grond (geen hinderlijke sleepkrachten om in de weg te zitten). De linker en rechter pijltjestoetsen draaien het schip, maar ze hebben geen invloed op de beweging van het schip. De pijl naar boven vuurt een raket af, die een krachtvector toevoegt in de richting waarin het schip zich momenteel bevindt.
Hier is de code:
ruimtevareschip; var game; function Ship () {tShip = new Sprite (game, "ship. png", 25, 25); tShip. setSpeed (3); tShip. checkKeys = function () {if (keysDown [K_LEFT]) { dit. changeImgAngleBy (-5); } if (keysDown [K_RIGHT]) { dit. changeImgAngleBy (5); } if (keysDown [K_UP]) { dit. addVector (this. getImgAngle (),. 1); }} // functie einde terugkeer tShip;} // functie voor objectdefinitie init () {game = new Scene (); schip = nieuw schip (); spel. setBG ("zwarte"); spel. start ();} // update van de eind-init-functie () {game. duidelijk(); schip. checkKeys (); schip. update ();} // end update
Hoe simuleer je ruimte in je spel
Dit is het overzicht:
-
Begin het voorbeeld op de normale manier.
Net als bij de meeste eenvoudigeGame-demo's, begin je met een sprite en een scène. Omdat het schip een aangepaste methode heeft, maakt u er een uniek object van.
-
Geef het schip een methode checkKeys ().
De methode checkKeys () zoekt naar toetsaanslagen en wijzigt het gedrag van het schip dienovereenkomstig.
-
Verander de beeldhoek.
Een sprite heeft eigenlijk twee verschillende hoeken. Het kan een hoek hebben die het wijst (de imgAngle in simpleGame genoemd) en de hoek die het beweegt (de moveAngle genaamd). Wanneer u de hoek wijzigt, wijzigt u zowel de beweging als de beeldhoeken, ervan uitgaande dat het object eenvoudig in de richting waarin het wordt geplaatst, zal rijden.
Voor eenvoudige voorbeelden is dit prima, maar voor veel soorten bewegingen moeten de beeld- en bewegingshoeken worden ontkoppeld. Met de methode changeImgAngleBy () kunt u de richting van het beeld wijzigen zonder de bewegingshoek te wijzigen. (Er is ook een changeMotionAngle () -methode, maar deze wordt niet vaak gebruikt.)
-
Voeg een force-vector toe om stuwkracht te simuleren.
Wanneer de gebruiker op de pijl omhoog drukt, vuurt het schip de hoofdraketten af. Dit voegt een kleine krachtvector toe in de richting waarin het schip momenteel wordt geconfronteerd. Gebruik de methode getImgAngle () om te bepalen in welke richting het schip momenteel wordt geconfronteerd en gebruik deze waarde om aan te geven waar de kracht moet worden toegevoegd.
Omdat deze code voorkomt in de animatielus en wordt versterkt als de pijltjestoets ingedrukt wordt gehouden, is slechts een zeer kleine kracht nodig.
