Vidéo: Tutoriel: Contrôle des GPIO du Raspberry Pi à partir d'une page web 2025
La bibliothèque simpleGame dispose d'une fonctionnalité pratique appelée GameButton pour ajouter un bouton à l'écran d'un appareil mobile pour votre jeu HTML5. Le clavier est l'un des moyens les plus faciles d'obtenir des entrées dans un navigateur standard, mais la plupart des appareils mobiles n'ont pas de claviers. Le premier problème est de comprendre comment obtenir l'entrée de l'utilisateur quand il n'y a pas de clavier.
L'objet bouton personnalisé GameButton commence avec les fonctionnalités d'un bouton HTML standard, mais ajoute quelques astuces pour le rendre adapté au jeu. Vous pouvez activer le bouton avec une souris normale ou avec les commandes tactiles, le rendant idéal pour les jeux qui peuvent être joués sur les deux types d'appareils. Le bouton. La page html illustre le bouton en action:
. html var btnMove; jeu var; var ball; Fonction init () {game = new Scène (); Jeu. setSize (200, 200); balle = nouveau Sprite (jeu, "redBall.png", 25, 25); ballon. setSpeed (0); ballon. setPosition (100, 100); btnMove = new GameButton ("Déplacer"); btnMove. setPos (70, 150); btnMove. setSize (60, 30); jeu. start ();} // fin de la fonction d'initialisation update () {game. clair(); checkButtons (); balle. update ();} // met à jour update function checkButtons () { if (btnMove.isClicked ()) { balle. setSpeed (3); } else { balle. setSpeed (0); } // fin si } // fin checkButtons
Comme d'habitude, les nouveaux éléments intéressants sont indiqués en gras. Voici comment ajouter un bouton de jeu à un jeu:
-
Crée une variable pour le bouton.
Comme tout autre élément du jeu, vous commencez par créer une variable pour faire référence au bouton.
-
Construire l'objet GameButton.
Construire l'objet GameButton dans la méthode init (). Le seul paramètre indique la légende du bouton.
-
Définissez la taille et la position du bouton.
Vous aurez envie de réfléchir un peu à la façon dont votre gameplay fonctionnera sur les appareils mobiles. Placez vos boutons là où le joueur peut facilement les atteindre sans trop bloquer la vue. Notez que vous aurez également besoin de faire les boutons assez gros pour être pressés pendant la chaleur du jeu. (Les boutons à l'écran sont bien meilleurs pour les jeux sur tablettes.)
-
Vérifiez l'état du bouton pendant la mise à jour ().
Tout comme vous vérifiez normalement l'état du clavier pendant la fonction update (), vous pouvez également appeler une fonction pour vérifier l'état de votre bouton. Bien sûr, vous devrez écrire cette fonction.
-
Lisez la méthode isClicked () du bouton.
Si le bouton est en cours de compression, la valeur de isClicked () est vraie. Si le bouton n'est pas en cours de compression, isClicked () renvoie false.Utilisez cette méthode pour déterminer l'état actuel de chaque bouton et agir en conséquence.
-
Traitez un bouton comme le clavier.
Parce que tester les boutons renvoie finalement des valeurs booléennes (vraies ou fausses), la recherche de boutons est généralement très similaire à la recherche du clavier.
-
Envisagez d'ajouter des boutons uniquement si nécessaire.
Si vous le souhaitez, vous pouvez concevoir un jeu pour afficher (et tester) les boutons uniquement lorsqu'un écran tactile est disponible. L'objet Scene a une variable spéciale appelée touchable. Cette variable est vraie si la bibliothèque détecte un écran tactile et false dans le cas contraire. Vous pouvez utiliser cette variable pour générer une interface personnalisée qui s'adapte à l'environnement de jeu.
Normalement, vous allez ajouter plusieurs boutons à votre interface, un pour remplacer chaque touche que vous attendez de l'utilisateur (par exemple, les flèches et la barre d'espace). De cette façon, vous pouvez créer un clavier virtuel sur l'écran. Vous devrez peut-être tester la taille et la position de chaque touche pour obtenir une expérience de jeu confortable.
Notez que la légende du bouton est du HTML ordinaire, donc si vous voulez que vos boutons soient basés sur des images, vous pouvez simplement ajouter la balise
