Hvordan man opretter brugerinteraktion i dit HTML5-spil - dummies

Den største forskel mellem et HTML5-spil og en animation er brugerinteraktion. Hvis du vil gøre det til et spil, skal du bruge brugeren til at blive involveret. Og her er hvordan man gør det.

Her er koden:

bil. html var scene; var bil; funktion init () {scene = ny scene (); bil = ny Sprite (scene, "bil. png", 50, 30); bil. setAngle (270); bil. setSpeed (0); scene. start ();} // end init funktion opdatering () {scene. klar(); // tasterne hvis (keysDown [K_LEFT]) { bil. changeAngleBy (-5); } // ende hvis hvis (keysDown [K_RIGHT]) { bil. changeAngleBy (5); } // ende hvis hvis (keysDown [K_UP]) { bil. changeSpeedBy (1); } // ende hvis hvis (keysDown [K_DOWN]) { bil. changeSpeedBy (-1); } // ende hvis bil. opdatering ();} // slut opdatering

Kør bilen!

Sådan bruger du tastaturet til dit spil

På en eller anden måde skal brugeren interagere med siden. Tastaturet er et af de nemmeste inputelementer, der skal bruges. simpleGame giver et par måder at kontrollere tastaturet på, men den mest kraftfulde teknik bruger en særlig variabel kaldet keysDown. Sådan fungerer det:

keysDown er et globalt array. Denne variabel oprettes automatisk, når du bygger en scene. Det er en række boolske værdier - det betyder, at hvert element kun kan være sandt eller kun falsk.
Der er en konstant defineret for hver nøgle. Hver tast på standardtastaturet har en speciel konstant, der allerede er defineret. For eksempel repræsenterer K_A A-tasten, og K_B repræsenterer B-tasten.
keysDown fortæller status for hver nøgle. Hvis A-tasten for øjeblikket trykkes, vil tasterne Ned [A] indeholde værdien ægte. Hvis A-tasten ikke trykkes, vil tasterne Ned [A] indeholde værdien falsk.
Du kan bestemme den aktuelle status for en nøgle. Bare tjek tasterneDown [] array for at bestemme den aktuelle status for en hvilken som helst tast.
Du kan have flere nøgler nede på én gang. Det primære formål med denne teknik er at tillade, at flere taster trykkes på en gang. Ved normal beregning er det usædvanligt at have mere end en nøgle ad gangen. I spil er det meget almindeligt at trykke mere end en nøgle ad gangen, så du har brug for en mekanisme, som kan understøtte denne forventning.

Sådan flytter du spillets sprite

I hovedsagen har en sprite en position, som styres af X- og Y-egenskaber. Hvis du husker fra matematikklasse, repræsenterer X vandrette værdier, og Y er for lodret placering. Oprindelse (0, 0) er øverste venstre hjørne af skærmen.

X koordinater fungerer ligesom du husker fra matematik klasse. Når X-værdierne bliver større, bevæger sprite sig til højre. I computergrafik virker Y lidt anderledes end den gjorde i matematik klasse.De fleste viser hardware scanning fra top til bund, så Y er 0 øverst på skærmen og øges, mens du bevæger dig nedad.

Bemærk, at den maksimale højde og bredde er gemt i variabler: scene. højde og scene. bredde.

Alle de forskellige bevægelsesmetoder handler om at manipulere X og Y. Du kan indstille disse værdier manuelt (setPosition (), setX () og setY ()), eller du kan ændre værdierne (changeXby (), changeYby ()). Hver af disse metoder virker øjeblikkeligt, så du kan bruge dem til at styre spritets position eller bevægelse.

Nogle af disse funktioner ligner hinanden. For eksempel ser changeXby () meget ud som setChangeX (). Disse funktioner har en subtil men vigtig forskel. Funktionen changeXby () ændrer værdien af X en gang. Hvis du vil have ændringen til at fortsætte, skal du fortsætte med at ringe til denne funktion.

Funktionen setChangeX () er mere kraftfuld, fordi du kan kalde den en gang, og det ændrer gentagne gange x med den værdi, du bestemmer, indtil du kalder setChangeX () igen.

For de fleste sprites, vil du virkelig bare give sprite en vinkel og en hastighed, og lad det gå. Sprite-objektet har præcis de metoder, du har brug for til denne adfærd. setAngle () giver dig mulighed for at bestemme hvilken retning sprite vil gå, og setSpeed () lader dig angive hastigheden til at gå i den retning. Ligesom de fleste bevægelsesfunktioner er der også ChangeAngle () og ChangeSpeed () metoder.

Sådan styres bilen i dit spil

Nøglerne Nedadgående mekanisme kan kombineres med bevægelsesmetoderne, så du nemt kan styre din bil. Her er den relevante kode fra opdatering () igen:

funktionsopdatering () {scene. klar(); // tasterne hvis (keysDown [K_LEFT]) { bil. changeAngleBy (-5); } // ende hvis hvis (keysDown [K_RIGHT]) { bil. changeAngleBy (5); } // ende hvis hvis (keysDown [K_UP]) { bil. changeSpeedBy (1); } // ende hvis hvis (keysDown [K_DOWN]) { bil. changeSpeedBy (-1); } // ende hvis bil. opdatering ();} // end opdatering

Den egentlige kodning er ret let at forstå:

Ryd scenen.

Som sædvanlig er den første rækkefølge i virksomheden i opdateringen () -funktionen at rydde op i lekrummet. Sørg for at du har slettet den forrige ramme, før du gør noget andet.
Check for en venstre-pil-tryk.

Brug tasterneDown-mekanismen til at bestemme, om venstre pil trykkes for øjeblikket.
Hvis venstre pil trykkes, drejes bilen tilbage.

Hvis brugeren for øjeblikket trykker på venstre piletast, drejer bilen fem grader mod uret. Brug metoden changeAngleBy () til at ændre bilens visuelle udseende såvel som den retning, den rejser.
Gentag for højre pil.

Højrepilen er den samme, men denne gang drejer bilen fem grader med uret.
Brug op-pilen til at accelerere.

Hvis brugeren trykker på pil op, skal du ændre bilens hastighed. Brug en positiv værdi til at accelerere bilen. Det vil ikke tage meget, fordi denne kode kontrolleres 20 gange i sekundet.
Sæt bilen ned med nedpilen.

Brug en lignende mekanisme til nedpilen.Skift hastigheden med en negativ værdi for at bremse bilen. Denne tilgang giver mulighed for negative værdier, og bilen vil sikkerhedskopiere, hvis du vil.
Træk bilen i sin nye position.

Det er kritisk vigtigt at huske at kalde spritens bevægelsesfunktioner ændrer ikke bilens placering! Det ændrer kun interne data i spilets hukommelse. Du skal kalde bilens opdatering () -metode for at se disse ændringer i handling.