Hur man lägger till ett musrespons på ditt HTML5-spel för mobilåtkomst - dummies

Eftersom webbläsare är inkonsekventa i det sätt som de rapporterar musens position, är musposten i vanlig JavaScript knepig i HTML spelvärlden. SimpleGame-biblioteket hanterar detta genom att lägga till getMouseX () och getMouseY () -metoderna till scenobjektet. Dessa metoder är inte alltid exakt korrekta, men de är nära nog för de flesta spelprogrammering.

När du vill läsa en vanlig mus, använd bara objektobjektets getMouseX () och getMouseY () -funktioner för att bestämma den ungefärliga muspositionen.

Det mesta av tiden när du vill ha muspositionen beror på att du ska flytta ett objekt där musen är eller pekar ett objekt mot musen.

Ofta vill du gömma muspekaren, så att du kan använda motivets HideCursor () -metod för att dölja markören. (Naturligtvis kan du hämta markören med showCursor () -metoden.)

Om du vill läsa en pekskärm finns det ett enklare steg. SimpleGame-biblioteket har ett virtuellt joystickobjekt som heter Joy. Skapa en instans av den här klassen för att aktivera läsfunktionerna för pekskärmen.

Observera att pekgränssnittet för mobila enheter inte är precis som musen, så det behöver ett annat gränssnitt. Men när du har skapat ett Joy-objekt får funktionerna getMouseX () och getMouseY () en touch-ingångshandling som en vanlig mus.

touchMouse. html döljer den normala muspekaren och flyttar en boll varhelst musen pekar för närvarande. Det här exemplet fungerar både med en traditionell webbläsare och en pekskärmsenhet.

SimpleGame-biblioteket förenklar processen för att arbeta med muspekaren dramatiskt genom att ge några enkla metodsamtal. Här är koden:

touchMouse. html var boll; var spel; var glädje; funktion init () {game = new Scene (); boll = ny Sprite (spel, "redBall. png", 25, 25); boll. setSpeed ​​(0); spel. hideCursor (); glädje = ny glädje (); spel. start ();} // end init-funktionen uppdatering () {game. klar(); followMouse (); boll. uppdatering ();} // slutuppdatering funktion följerMouse () { x = spel. getMouseX (); y = spel. getMouseY (); om (spel. Berörbar) { // flytta objektet lite högre för pekskärmarna y - = 100; } // touchscreen-test boll. setPosition (x, y); }

Att få en sprite att följa med musen handlar bara om att veta vilka metoder som ska ringas.

1. Dölj muspekaren.

   Scenobjektet har en hideCursor () -metod.Det här är det enklaste sättet att dölja den normala muspekaren. Normalt, när du följer musen med ett objekt, menar du för att objektet ska fungera som den nya muspekaren, så du kommer att gömma den normala pilen.

2. Skapa en variabel för den virtuella joysticken.

   Om du arbetar med en pekplatta enhet behöver du en variabel som innehåller det virtuella joystickobjektet. (Om det här spelet bara kommer att användas på stationära maskiner med normala möss behöver du inte joystickobjektet.)

3. Initiera joysticken.

   Gör en förekomst av Joy-objektet i init () -funktionen. Justering av joysticken kommer att berätta för motorn att förvänta sig inmatning och kartlägga den till normala muskommandon.

4. Lägg till en followMouse () -funktion.

   Det är generellt bra att skapa en ny funktion för att hantera inmatning. Funktionen followMouse () kommer att berätta att objektet ska följa musen. Självklart, om du bygger ett objekt som följer musen kan du göra detta till en metod för det objektet om du föredrar det.

5. Använd metoderna getMouseX () och getMouseY ().

   Sceneobjektet har metoder som heter getMouseX () och getMouseY (). Använd dessa metoder för att få musens X- och Y-koordinater på scenen. Observera att koordinaterna inte alltid är exakta.

6. Kontrollera om du har en pekskärm.

   Scenobjektet har en berörbar egenskap som är sann om webbläsaren har en pekskärm. Du vill normalt inte att objektet ska döljas av ditt finger, så ofta vill du kompensera ett objekt när du använder en pekskärm för inmatning.

7. Flytta objektet högre än ditt finger.

   I en pekskärmsmiljö vill du normalt att spritet fortfarande är synligt, så att du ofta kompenserar Y-axeln med en viss mängd så att den inte döljs av spelarens finger. Subtrahera något värde från Y för att få denna effekt.