Comment créer un joystick virtuel pour votre jeu de html5

category Ordinateurs et logiciels / Programmation / Jeux

Beaucoup de jeux HTML5 tactiles utilisent un mécanisme de joystick virtuel. L'utilisateur touche l'écran pour commencer l'entrée, puis glisse à apporter leur contribution. Glisser vers la gauche est lu comme le déplacement d'un joystick vers la gauche. Le plus loin l'utilisateur glisse, plus la valeur d'entrée est. La simpleGame bibliothèque possède un objet de joystick virtuel qui le rend facile à mettre en œuvre un joystick virtuel sur vos appareils tactiles.

image0.jpg

Le joystick virtuel fonctionne en retournant des données numériques. Il est souvent plus facile de comprendre comment il fonctionne en regardant la sortie numérique avant la plaquant sur un élément visuel.

joystick test
Rien ici encore

Le joystick virtuel est très facile à utiliser:

  1. Créer une variable pour le joystick.

    Vous pouvez l'appeler manche à balai. Type de accrocheur.

  2. Créer le joystick si possible.

    Utilisez le game.touchable propriété pour déterminer si une interface tactile est présent. Dans la négative, envoyer un message à l'utilisateur.




  3. Obtenez la position de la souris.

    Lorsque le J virtueloystick objet détecte une touche sur l'écran, il déclenche mouseX et mouseY des valeurs. Utilisez le joystick de getMouseX () et getMouseY () Méthodes pour déterminer les positions X et Y de la touche. De cette façon, l'interface tactile agit un peu comme la souris traditionnelle.

  4. Obtenir un diffX et diffy la lecture de la manette.

    Lorsque l'utilisateur touche l'écran, la bibliothèque suit les coordonnées du contact initial. Il mesure ensuite la distance que l'utilisateur a glissée. La différence de X est appelé diffX, et la différence est appelée Y diffy. Utilisez le getDiffX () et getDiffY () méthodes de l'objet de joystick virtuel pour déterminer le nombre de pixels en X et Y que l'utilisateur a déménagé depuis touchant l'écran.

  5. Afficher les valeurs actuelles.

    Pour cette première passe, il est important de comprendre ce que le joystick affiche, si juste prendre les valeurs et les imprimer à une sortie à l'écran.

Bien sûr, le point d'un joystick virtuel est de déplacer des choses autour de l'écran.

image1.jpg

Voici le code:

joystick test

Cet exemple est encore plus simple que la précédente.

  1. Creer un sprite de la balle simple.

    Pour cet exemple, une balle simple est utilisé. Créer comme tout autre sprite de base.

  2. Construire un objet de joystick.

    Faire un objet joystick virtuel.

  3. Plan de la manette diffX et diffy à de la balle dx et dy des valeurs.

    Cela donne un mouvement extrêmement sensible, de sorte que vous pouvez régler la sensibilité en divisant le diffX et diffy par un facteur d'échelle.

Articles Similaires

A propos Auteur
Comment ajouter des boutons à votre jeu de HTML5 pour l'accès mobile Comment ajouter des boutons à votre jeu de HTML5 pour l'accès mobile

La simpleGame bibliothèque possède une fonction pratique appelée GameButton pour ajouter un bouton à l'écran d'un appareil mobile pour votre jeu HTML5. Le clavier est un des moyens les plus faciles à obtenir l'entrée dans un navigateur…

Comment ajouter des collisions à votre jeu de html5 Comment ajouter des collisions à votre jeu de html5

Les choses les plus intéressantes dans les jeux vidéo HTML5 se produisent lorsque les sprites pif et entrent en collision dans l'autre. Moteurs de jeux ont normalement une sorte d'outil pour tester si deux sprites se chevauchent. C'est appelé…

Comment ajouter une réponse de la souris à votre jeu de HTML5 pour l'accès mobile 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…

Comment créer pong dans votre jeu de html5 Comment créer pong dans votre jeu de html5

Pas de jeu de HTML5 discussion de développement ne serait complète sans une mention du célèbre jeu Pong. Bien que ce ne fut pas, techniquement, le premier jeu vidéo, il a été le premier à attirer l'attention populaire, et il est de loin l'un…

Comment créer une interaction de l'utilisateur dans votre jeu de html5 Comment créer une interaction de l'utilisateur dans votre jeu de html5

La plus grande différence entre un jeu HTML5 et une animation est l'interaction de l'utilisateur. Si vous voulez faire un jeu, vous avez besoin à l'utilisateur d'y participer. Et voici comment faire.Voici le code:car.htmlConduire la…

Le développement de jeux HTML5: ajout de boutons avec l'objet de GameButton Le développement de jeux HTML5: ajout de boutons avec l'objet de GameButton

Si votre jeu ne permet la saisie au clavier, les utilisateurs avec appareils à écran tactile peuvent ne pas être en mesure de jouer. Utilisez le GameButton opposer à ajouter des boutons de l'écran tactile soutenue.buttonname = newGameButton…

Html 5 développement de jeu: travailler avec l'objet de la scène Html 5 développement de jeu: travailler avec l'objet de la scène

L'élément principal de toute simpleGame jeu est le Scene objet. Ne pas modifier directement les propriétés de la scène. Au lieu de cela, utilisez la méthode appropriée pour gérer la scène.touchableIndique si la scène est en cours…

Html5 développement de jeux pour les nuls Html5 développement de jeux pour les nuls

L'élément principal de toute simpleGame jeu est le Scene objet. Ne pas modifier directement les propriétés de la scène. Au lieu de cela, utilisez la méthode appropriée pour gérer la scène.touchableIndique si la scène est en cours…

Html5 programmation de jeux: l'ajout d'un contact avec l'objet de joystick virtuel Html5 programmation de jeux: l'ajout d'un contact avec l'objet de joystick virtuel

Créer un Joystick opposer chaque fois que vous pensez que votre jeu peut être utilisé sur les appareils tactiles. De la scène getMouseX () et getMouseY () méthodes vont répondre à la saisie tactile.joyName = new Joy ()Crée un nouveau…

Comment faire pour créer des réservoirs dans votre jeu de html5 Comment faire pour créer des réservoirs dans votre jeu de html5

Ce type de jeu vous donne une sorte de mécanisme de lancement de votre jeu HTML5 avec la physique semi-réaliste, et a vous lancez des projectiles (aviaires avec des problèmes de colère ou autre) à une sorte de cible.Réservoirs, des tourelles,…

Comment faire pour créer le jeu de marbre roulant dans votre jeu de html5 Comment faire pour créer le jeu de marbre roulant dans votre jeu de html5

Ce type de HTML5 jeu est conçu spécifiquement pour les appareils mobiles avec un accéléromètre (bien que cela fonctionne sur un ordinateur de bureau). L'idée est de faire pencher l'appareil pour déplacer une balle dans le but bleu sans…

Comment créer whack-a-mole dans votre jeu de html5 Comment créer whack-a-mole dans votre jeu de html5

Le genre whack-a-mole re-crée un jeu d'arcade classique physiques dans votre jeu HTML5. Dans le jeu original, vous avez une série de trous et un gros marteau. Comme une taupe ressorte d'un trou, l'utilisateur sent avec un marteau, et il remonte…

Comment fonctionne un programme d'ordinateur? Comment fonctionne un programme d'ordinateur?

Ordinateurs ne font rien sans quelqu'un leur dire quoi faire, tout comme l'adolescent moyen. Pour rendre l'ordinateur faire quelque chose d'utile, vous devez lui donner des instructions dans l'une des deux manières suivantes:Ecrire un programme qui…

Comment mettre à niveau un contrôleur de jeu d'ordinateur Comment mettre à niveau un contrôleur de jeu d'ordinateur

Beaucoup de jeux informatiques exécutent très bien avec le clavier et la souris. Mais pour les jeux de pointe, beaucoup de gens préfèrent dédiés contrôleurs de jeu. Tous les contrôleurs de jeu modernes insistent sur un autre port…

» » » » Comment créer un joystick virtuel pour votre jeu de html5