Vidéo: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo 2025
Les navigateurs Web ne sont pas cohérents dans la façon dont ils signalent la position de la souris. monde du jeu vidéo La bibliothèque simpleGame gère cela en ajoutant les méthodes getMouseX () et getMouseY () à l'objet Scene. Ces méthodes ne sont pas toujours correctes, mais elles sont assez proches pour la plupart des jeux.
Chaque fois que vous voulez lire une souris normale, utilisez simplement les fonctions getMouseX () et getMouseY () de l'objet Scene pour déterminer la position approximative de la souris.
La plupart du temps lorsque vous voulez positionner la souris, c'est parce que vous allez déplacer un objet à l'endroit où se trouve la souris ou pointer un objet vers la souris.
Souvent, vous voulez masquer le curseur de la souris, vous pouvez donc utiliser la méthode hideCursor () de l'objet Scene pour masquer le curseur. (Bien sûr, vous pouvez récupérer le curseur avec la méthode showCursor ().)
Si vous voulez lire un écran tactile, il y a une étape plus simple. La bibliothèque simpleGame possède un objet de joystick virtuel appelé Joy. Créez une instance de cette classe pour activer les fonctions de lecture de l'écran tactile.
Notez que l'interface tactile des appareils mobiles n'est pas exactement comme la souris, elle nécessite donc une interface différente. Cependant, une fois que vous avez créé un objet Joy, les fonctions getMouseX () et getMouseY () feront que l'entrée tactile agira comme une souris normale.
touchMouse. html cache le curseur normal de la souris et déplace une balle là où la souris pointe actuellement. Cet exemple particulier fonctionne à la fois avec un navigateur traditionnel et un appareil à écran tactile.
La bibliothèque simpleGame simplifie considérablement le processus de travail avec le pointeur de la souris en fournissant quelques appels de méthode faciles. Voici le code:
touchMouse. html var ball; var jeu; var joie; function init () {game = new Scène (); balle = nouveau Sprite (jeu, "redBall.png", 25, 25); ballon. setSpeed (0); jeu. hideCursor (); joie = nouvelle Joie (); jeu. start ();} // fin de la fonction d'initialisation update () {game. clair(); followMouse (); balle. update ();} // fin de la mise à jour function followMouse () { x = jeu. getMouseX (); y = jeu. getMouseY (); if (jeu. Touchable) { // déplacer un objet un peu plus haut pour les écrans tactiles y - = 100; } // fin du test de l'écran tactile. setPosition (x, y); }
Obtenir une image-objet à suivre est simplement une question de savoir quelles méthodes utiliser.
-
Masquer le curseur de la souris.
L'objet Scene a une méthode hideCursor ().C'est le moyen le plus simple de cacher le pointeur normal de la souris. Normalement, lorsque vous suivez la souris avec un objet, vous voulez que cet objet agisse comme le nouveau pointeur de la souris, donc vous allez cacher la flèche normale.
-
Créez une variable pour le joystick virtuel.
Si vous travaillez avec un périphérique à pavé tactile, vous aurez besoin d'une variable pour contenir l'objet virtuel. (Si ce jeu ne sera utilisé que sur des machines de bureau avec des souris normales, vous n'aurez pas besoin de l'objet joystick.)
-
Initialisez le joystick.
Crée une instance de l'objet Joy dans la fonction init (). Le simple fait de créer le joystick indique au moteur de s'attendre à une entrée tactile et de le mapper aux commandes normales de la souris.
-
Ajoutez une fonction followMouse ().
Il est généralement bon de créer une nouvelle fonction pour gérer les entrées. La fonction followMouse () indiquera à 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.
-
Utilisez les méthodes getMouseX () et getMouseY ().
L'objet Scene 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. Notez que les coordonnées ne sont pas toujours exactes.
-
Vérifiez si vous avez un écran tactile.
L'objet Scène possède une propriété tangible qui est vraie si le navigateur est doté d'un écran tactile. Normalement, vous ne voulez pas que l'objet soit caché par votre doigt, vous aurez donc souvent besoin de décaler un objet lorsque vous utilisez un écran tactile pour la saisie.
-
Déplacez l'objet plus haut que votre doigt.
Dans un environnement à écran tactile, vous souhaitez normalement que l'image-objet soit toujours visible, de sorte que vous décaliez souvent l'axe Y d'une certaine quantité pour ne pas être masqué par le doigt du joueur. Soustrayez une certaine valeur de Y pour obtenir cet effet.
