Vidéo: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo 2025
Les appareils mobiles ont un mécanisme de saisie très intrigant qui vous permet de contrôler les objets dans un jeu HTML5 en les inclinant. Cela fonctionne avec un outil spécial de bord appelé l'accéléromètre , qui suit le mouvement. L'accéléromètre mesure la rotation, et vous pouvez l'utiliser pour obtenir de bons contrôles d'inclinaison dans votre jeu.
Créez un objet Accel.
-
SimpleGame a un objet Accel. Créez cet objet pour activer les tests accélérométriques.
Utilisez des méthodes pour déterminer l'inclinaison.
-
L'objet Accel a des méthodes spéciales appelées getAX () et getAY () qui indiquent la quantité de rotation.
-
Les valeurs AX et AY affichent la quantité de rotation autour des axes X et Y, respectivement. Les valeurs vont de -9 à 9. En général, vous devrez modifier les valeurs d'inclinaison pour obtenir exactement le comportement que vous voulez. Cela implique généralement quelques calculs mathématiques simples.
Voici le code pour accel. html:
accel. jeu html var; var ball;
var accel fonction init () {jeu = nouvelle Scène (); balle = nouveau Sprite (jeu, "redBall.png", 50, 50); accel = nouveau Accel (); jeu. start ();} // fin de la fonction d'initialisation update () {game. clair(); nouveauDX = accel. getAY (); nouveauDY = accélérer. getAX (); nouveauDX * = -5; nouveauDY * = -5; balle. setDX (nouveauDX); balle. setDY (newDY); balle. update ();} L'accéléromètre est facile à utiliser:
-
Vous pouvez appeler votre variable Accel.
Utiliser accél. getAX () pour obtenir une rotation autour de X.
-
La méthode getAX () renvoie le pourcentage d'inclinaison autour de l'axe X. L'axe X va d'un côté à l'autre sur l'écran, donc la rotation autour de X est normalement liée au mouvement le long de l'axe Y!
Utilisez acccel. getAY () pour déterminer la rotation autour de Y.
-
De même, la méthode getAY () décrit le pourcentage d'inclinaison le long de l'axe Y (vertical). Normalement, vous utiliserez getAY () pour contrôler le mouvement horizontal.
Ne vous préoccupez pas de l'axe Z.
-
Vous pouvez également lire la rotation le long de l'axe Z (qui va du centre de l'écran à votre nez), mais cela n'est généralement pas utile.
Supposons (pour l'instant) que la position neutre repose parfaitement à plat sur une table.
-
Vous obtiendrez des valeurs nulles pour getAX () et getAY () lorsque l'appareil est complètement immobile sur une table parfaitement plate.
Expérimentez avec des facteurs d'échelle.
-
Vous devrez généralement multiplier les résultats getAX () et getAY () d'une certaine manière pour obtenir le comportement que vous voulez. Si vous multipliez les deux par le négatif cinq, vous obtiendrez des valeurs appropriées pour dy et dx. Vous devrez expérimenter pour obtenir exactement le comportement que vous voulez.
