Comment ajouter une réponse de la souris à votre jeu de HTML5 pour l'accès mobile

Parce que les navigateurs Web sont incompatibles dans la façon de rapporter la position de la souris, l'entrée de la souris dans la normale javascript est délicat dans le monde du jeu en HTML. La simpleGame bibliothèque gère cela en ajoutant getMouseX () et getMouseY () des méthodes pour la Scène objet. Ces méthodes ne sont pas toujours tout à fait exact, mais ils sont suffisamment proches pour la plupart des programmes de jeu.

Chaque fois que vous voulez lire une souris normale, il suffit d'utiliser la Scène objet de getMouseX () et getMouseY () fonctions afin de déterminer la position approximative de la souris.

La plupart du temps lorsque vous voulez la position de la souris, il est parce que vous allez déplacer un objet où la souris est ou pointer un objet vers la souris.

Souvent, vous aurez envie de cacher le curseur de la souris, de sorte que vous pouvez utiliser le Scène objet de hideCursor () méthode pour cacher le curseur. (Bien sûr, vous pouvez récupérer le curseur avec la showCursor () Procédé).

Si vous voulez lire un écran tactile, il ya une étape de plus simple. La simpleGame bibliothèque possède un objet de joystick virtuel appelé Joie. Créer une instance de cette classe pour activer les fonctions de lecture d'écran tactile.

Notez que l'interface tactile des appareils mobiles est pas exactement comme la souris, donc il a besoin d'une interface différente. Cependant, une fois que vous avez créé un Joie objet, le getMouseX () et getMouseY () fonctions feront toucher acte d'entrée comme une souris normale.

touchMouse.html masquer le curseur de la souris normale et déplace une boule où la souris pointe actuellement. Cet exemple particulier fonctionne à la fois avec un navigateur traditionnel et d'un appareil à écran tactile.

image0.jpg

La simpleGame bibliothèque simplifie considérablement le processus de travailler avec le pointeur de la souris en fournissant des appels de méthode facile. Voici le code:




touchMouse.html

Obtenir un sprite pour suivre la souris est juste une question de savoir quelles méthodes appellent.

  1. Cacher le curseur de la souris.

    La Scène objet a une hideCursor () Procédé. Ceci est la meilleure façon de cacher le pointeur de la souris normale. Normalement, lorsque vous suivez la souris avec un objet, vous voulez dire pour cet objet à agir comme le nouveau pointeur de la souris, vous aurez donc de masquer la flèche normale.

  2. Créer une variable pour le joystick virtuel.

    Si vous allez travailler avec un dispositif de touchpad, vous aurez besoin d'une variable pour contenir l'objet de joystick virtuel. (Si ce jeu ne sera utilisée que sur les ordinateurs de bureau avec des souris normales, vous ne serez pas besoin de l'objet de la manette.)

  3. Initialiser le joystick.

    Faire une instance de la Joie objet dans la init () fonction. Juste créer le joystick dira le moteur d'attendre la saisie tactile et mapper les commandes normales de souris.

  4. Ajouter un followmouse () fonction.

    Il est généralement bon de créer une nouvelle fonction pour gérer les entrées. La followmouse () fonction dira l'objet de suivre la souris. Bien sûr, si vous construisez un objet qui suit la souris, vous pouvez en faire une méthode de cet objet si vous préférez.

  5. Usage getMouseX () et getMouseY () méthodes.

    La Scène objet a des méthodes appelées getMouseX () et getMouseY (). Utilisez ces méthodes pour obtenir les coordonnées X et Y de la souris sur la scène. On notera que les coordonnées ne sont pas toujours exact.

  6. Vérifiez si vous avez un écran tactile.

    La Scène objet a une touchable propriété qui est vrai si le navigateur dispose d'un écran tactile. Vous ne voulez pas normalement l'objet à être caché par votre doigt, si souvent, vous aurez envie de compenser un objet lorsque vous utilisez un écran tactile pour la saisie.

  7. Déplacer l'objet supérieur à votre doigt.

    Dans un environnement de l'écran tactile, vous voulez normalement le sprite d'être toujours visible, de sorte que vous aurez souvent compensés l'axe Y par une certaine quantité de sorte qu'il ne soit pas obscurcie par le doigt du joueur. Soustraire une valeur de Y pour obtenir cet effet.


» » » » Comment ajouter une réponse de la souris à votre jeu de HTML5 pour l'accès mobile