Hoe u muisrespons toevoegt aan uw HTML5-spel voor mobiele toegang - dummies

Omdat webbrowsers niet consistent zijn in de manier waarop ze de positie van de muis rapporteren, is muisinvoer in normaal JavaScript lastig in de HTML gamingwereld. De simpleGame-bibliotheek verwerkt dit door de methoden getMouseX () en getMouseY () aan het Scene-object toe te voegen. Deze methoden zijn niet altijd precies correct, maar ze zijn voldoende voor de meeste gameprogrammering.

Telkens wanneer u een normale muis wilt lezen, gebruikt u de functies getMouseX () en getMouseY () van het Scene-object om de muispositie bij benadering te bepalen.

Meestal wanneer u de positie van de muis wilt, komt dit omdat u een voorwerp gaat verplaatsen waar de muis zich bevindt of een voorwerp naar de muis wijst.

Vaak wilt u de muisaanwijzer verbergen, zodat u de methode hideCursor () van het Scene-object kunt gebruiken om de cursor te verbergen. (Natuurlijk kunt u de cursor ophalen met de methode showCursor ().)

Als u een aanraakscherm wilt lezen, is er nog een eenvoudige stap. De simpleGame-bibliotheek heeft een virtueel joystick-object met de naam Joy. Maak een instantie van deze klasse om de leesfuncties van het aanraakscherm in te schakelen.

Merk op dat de aanraakinterface van mobiele apparaten niet precies op de muis lijkt, dus het heeft een andere interface nodig. Nadat u echter een Joy-object hebt gemaakt, zullen de functies getMouseX () en getMouseY () de invoer van het aanraakscherm net als een normale muis laten werken.

touchMouse. html verbergt de normale muiscursor en verplaatst een bal overal waar de muis naar wijst. Dit specifieke voorbeeld werkt met zowel een traditionele browser als een apparaat met touchscreen.

De simpleGame-bibliotheek vereenvoudigt het proces van werken met de muisaanwijzer dramatisch door enkele eenvoudige methode-aanroepen aan te bieden. Hier is de code:

touchMouse. html var ball; var game; var joy; functie init () {game = new Scene (); ball = nieuwe Sprite (spel, "redBall. png", 25, 25); bal. setSpeed ​​(0); spel. hideCursor (); joy = new Joy (); spel. start ();} // update van de eind-init-functie () {game. duidelijk(); followMouse (); bal. update ();} // einde update functie followMouse () { x = spel. getMouseX (); y = game. getMouseY (); if (game. Touchable) { // object verplaatsen een beetje hoger voor aanraakschermen y - = 100; } // eindtouchscreen-test bal. setPosition (x, y); }

Het verkrijgen van een sprite om de muis te volgen, is slechts een kwestie van weten welke methoden moeten worden aangeroepen.

1. Verberg de muiscursor.

   Het Scene-object heeft de methode hideCursor ().Dit is de gemakkelijkste manier om de normale muisaanwijzer te verbergen. Normaal gesproken, als u de muis volgt met een object, bedoelt u dat dat object werkt als de nieuwe muisaanwijzer, zodat u de normale pijl verbergt.

2. Maak een variabele voor de virtuele joystick.

   Als u met een touchpad-apparaat werkt, hebt u een variabele nodig die het virtuele joystickobject bevat. (Als deze game alleen op desktopcomputers met normale muizen wordt gebruikt, hebt u het joystick-object niet nodig.)

3. Initialiseer de joystick.

   Maak een instantie van het Joy-object in de functie init (). Alleen al het maken van de joystick zal de motor vertellen om aanraakinvoer te verwachten en deze toe te wijzen aan de normale muisopdrachten.

4. Voeg een followMouse () -functie toe.

   Het is over het algemeen goed om een ​​nieuwe functie voor invoerverwerking te maken. De functie followMouse () vertelt het object om de muis te volgen. Natuurlijk, als je een voorwerp aan het bouwen bent dat de muis volgt, kun je dit naar keuze een methode van dat object maken.

5. Gebruik de methoden getMouseX () en getMouseY ().

   Het Scene-object heeft methoden die getMouseX () en getMouseY () worden genoemd. Gebruik deze methoden om de X- en Y-coördinaten van de muis op de scène te krijgen. Merk op dat de coördinaten niet altijd exact zijn.

6. Controleer of u een aanraakscherm hebt.

   Het Scene-object heeft een aanraakbare eigenschap die waar is als de browser een aanraakscherm heeft. Normaal gesproken wilt u het object niet met uw vinger verbergen, dus u wilt een object vaak verplaatsen als u een aanraakscherm gebruikt voor invoer.

7. Verplaats het object hoger dan uw vinger.

   In een omgeving met aanraakscherm wilt u meestal dat de sprite nog steeds zichtbaar is, dus u verplaatst de Y-as vaak met een bepaalde hoeveelheid zodat deze niet wordt verdoezeld door de vinger van de speler. Trek een waarde van Y af om dit effect te krijgen.