Hvordan man tilføjer musrespons til dit HTML5-spil til mobiladgang - dummier

Da browsere er inkonsekvente i den måde, de rapporterer musens position på, er musens indtastning i normal JavaScript vanskelig i HTML'en gaming verden. SimpleGame biblioteket håndterer dette ved at tilføje getMouseX () og getMouseY () metoder til Scene objektet. Disse metoder er ikke altid nøjagtigt korrekte, men de er tæt nok til de fleste spilprogrammering.

Når du vil læse en normal mus, skal du bare bruge Scene-objektets getMouseX () og getMouseY () funktioner til at bestemme den omtrentlige musposition.

Det meste af tiden, når du vil have musepositionen, skyldes, at du vil flytte et objekt, hvor musen er eller peger et objekt mod musen.

Ofte vil du skjule musemarkøren, så du kan bruge motivobjektets hideCursor () -metode til at skjule markøren. (Selvfølgelig kan du hente markøren med showCursor () -metoden.)

Hvis du vil læse en berøringsskærm, er der endnu et enkelt trin. SimpleGame biblioteket har et virtuelt joystick objekt kaldet Joy. Opret en forekomst af denne klasse for at tænde berøringsskærmens læsningsfunktioner.

Bemærk, at touch-grænsefladen mellem mobile enheder ikke er nøjagtigt som musen, så den har brug for en anden grænseflade. Men når du har oprettet et Joy-objekt, får getMouseX () og getMouseY () -funktionerne til at gøre touch input-handling ligesom en normal mus.

touchMouse. html skjuler den normale musemarkør og flytter en bold, hvor musen peger på det øjeblik. Dette særlige eksempel fungerer sammen med både en traditionel browser og en berøringsskærm enhed.

SimpleGame-biblioteket forenkler processen med at arbejde med musemarkøren dramatisk ved at give nogle nemme metodeopkald. Her er koden:

touchMouse. html var ball; var spil; var glæde; funktion init () {game = new Scene (); bold = ny Sprite (spil, "redBall. png", 25, 25); bold. setSpeed ​​(0); spil. hideCursor (); glæde = ny glæde (); spil. start ();} // end init funktion opdatering () {game. klar(); followMouse (); bold. opdatering ();} // end opdatering funktion followMouse () { x = spil. getMouseX (); y = spil. getMouseY (); hvis (spil. Berørbar) { // flyt objekt lidt højere for berøringsskærme y - = 100; } // ende berøringsskærm test bold. setPosition (x, y); }

At få en sprite til at følge musen er bare et spørgsmål om at vide, hvilke metoder der skal kaldes.

1. Skjul musemarkøren.

   Sceneobjektet har en hideCursor () -metode.Dette er den nemmeste måde at skjule den normale musemarkør på. Normalt, når du følger musen med et objekt, mener du for det formål at virke som den nye musemarkør, så du gemmer den normale pil.

2. Opret en variabel til den virtuelle joystick.

   Hvis du arbejder med en touchpad-enhed, skal du have en variabel, der indeholder det virtuelle joystick-objekt. (Hvis dette spil kun vil blive brugt på stationære maskiner med normale mus, behøver du ikke joystickobjektet.)

3. Initialiser joysticket.

   Lav en forekomst af Joy-objektet i init () -funktionen. Bare at oprette joysticket vil fortælle motoren at forvente berøringsindgang og kortlæg den til de normale musekommandoer.

4. Tilføj en followMouse () funktion.

   Det er generelt godt at oprette en ny funktion til at håndtere input. Funktionen followMouse () vil fortælle objektet at følge musen. Selvfølgelig, hvis du bygger et objekt, der følger musen, kan du gøre dette til en metode for objektet, hvis du foretrækker det.

5. Brug getMouseX () og getMouseY () metoder.

   Sceneobjektet har metoder kaldet getMouseX () og getMouseY (). Brug disse metoder til at få X- og Y-koordinaterne til musen på scenen. Bemærk at koordinaterne ikke altid er nøjagtige.

6. Kontroller, om du har en berøringsskærm.

   Sceneobjektet har en rørende egenskab, der er sandt, hvis browseren har en berøringsskærm. Du vil normalt ikke have objektet gemt af din finger, så ofte vil du kompensere for et objekt, når du bruger en berøringsskærm til input.

7. Flyt objektet højere end din finger.

   I et berøringsskærmmiljø ønsker du normalt, at sprite stadig skal være synlig, så du vil ofte kompensere Y-aksen med en vis mængde, så det ikke skjules af spillerens finger. Træk noget værdi fra Y for at få denne effekt.