Apprenez à utiliser le framework Keypress pour gérer facilement le clavier de l’utilisateur de votre application.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
JavaScript Écoutez facilement les touches du clavier avec le Framework keypress le listener keyboard
Bonjour et bienvenu sur Développement Facile.
Dans ce nouveau cours je voudrais partager avec vous une librairie très légère, très simple à utiliser mais qui va vous rendre des services énormes, quand vous développez vos jeux avec JavaScript, ou vos applications JavaScript HTML 5, souvent, quasiment 90 % des cas, dans 90 % de vos projets, vous avez besoin de mettre des écouteurs sur les touches du clavier et avec JavaScript mettre des écouteurs c’est un peu compliqué, déjà vous devez connaître le code de la touche, 38, 39 mettre en place l’écouteur, récupérer à chaque fois que la touche est appuyée mettre en place la fonction qui sera appelée automatiquement par JavaScript, alors qu’il existe la librairie keypress donc c’est une librairie JavaScript très robuste et qui est très légère, environ 9 kg, l’avantage c’est qu’elle est autonome, elle fonctionne sans jQuery, sans prototype, c’est une librairie entièrement autonome, très légère, là si j’appuie sur des touches de mon clavier vous voyez je peux faire des combos de touches et donc les touches se mettent à jour, pareil donc c’est très pratique ça permet de capturer toutes les touches de votre clavier, donc vraiment très simple à utiliser le déplacement, voilà, vous pouvez faire des combo là avec, là c’est tabulation + espace très pratique, ou des séquences de combos pour par exemple, faire dans un jeu, avec street Fighter faire des sortes de caméaméa si vous voulez et il y a d’autres fonctionnalités pour par exemple, aller beaucoup plus loin, je vais vous montrer ces fonctionnalités avancées, donc à travers un exemple, ce que vous pouvez faire si vous appuyez sur D il ne se passe rien, juste sur S, il ne se passe rien, vous appuyez sur contrôle S, vous avez appuyé sur les touches ctrl S, A, voilà E, vous relâchez la touche E, je vais vous montrer comment ça ce fait qu’il y a des messages différents, vous appuyez sur la touche Z, là vous relâchez la touche Z, vous avez relâché la touche E, vous pouvez faire des combos R T Y vous avez appuyé sur les touches R T Y, là je viens de relâcher ou simultanément des touches, WF et ça fait un compte voilà, ça compte le nombre de fois que vous laissez, que vous appuyez, très pratique pour des jeux ou vous pouvez faire des combos, haut, bas, gauche, droite Q, S, entrée, combo réussi donc voilà très pratique pour écouter les touches.
Voyons le code comment ça se passe avec le code, vous avez juste la librairie keypress à utiliser, donc là c’est la version non optimisée, bien évidemment vous téléchargerez sur le site officiel la version, je ne vais pas la télécharger tout de suite, la version optimisée c’est-à-dire réduite, très légère, de keypress, là il y a toutes les explications, comment on l’utilise ?
Comme d’habitude vous avez la classe main, la un petit peu la notice pour utiliser keypress tout simplement, et dans votre classe main dès que le DOM est chargé on récupère div game pour faire des innerHTML pour afficher un petit message de debug ou un console.log pour afficher un message de debug à l’utilisateur, il suffit de faire Windows.keypress.LISTENER, on le met en écouteur du clavier, on à notre object listerner, là on écoute un simple combo juste la touche A, là deux touches en même temps, il suffit de mettre le nom de la touche, par exemple là je vais mettre shift, tout simplement, et à la place tout de suite là j’ai par rechargé la page c’est contrôle S, et là contrôle S ne marche plus c’est shift ES, tout simplement je vais remettre Control S, les combos, pour compter les combos, on appelle COMPTING combo WS et lorsque vous appuyez sur WS, ça compte les combos tout simplement donc c’est génial, une séquence de combo, up down, bon c’est en anglais, left, wit, us, Center ça va vous faire combo réussi, là c’est les fonctions avancées de gestion des touches du clavier, vous pouvez faire un tableau pour enregistrer directement plusieurs gestions de touches, ce que j’ai fait ici, donc la touche ou plusieurs touches, si elle est exclusive, ça appel uniquement cette séquence de touches et pas les autres si vous en avez défini par exemple si vous avez défini W+Z, juste Z, ça va appeler que Z, on keydown, sur l’appui de la touche vous mettez ce que vous souhaitez que ça fasse comme fonction, sur le relâchement de la touche ce que vous souhaitez que ça fasse comme fonction c’est pour ça que vous avez appuyé sur la touche Z, vous avez relâché la touche Z, vous avez appuyé sur la touche Z, vous avez relâché la touche Z. C’est aussi simple que ça, ça c’est down on key up pour éviter les répétitions de touche, si vous faites un combo par exemple R T Y qu’est-ce que vous pouvez les mettre par défaut, c’est dans l’ordre, mais si vous souhaitez que l’utilisateur puisse les appeler dans le désordre vous pouvez l’activer, pour compter le nombre de fois, appuyez sur les touches, pour mettre un combo et pour créer une suite de touches, un combo pour la séquence, pareil là sauf que j’utilise que key up, je ne mets que les options qui m’intéressent les autres je les laissent par défaut donc vous avez relâché la touche E, si j’appuie sur la touche E ça ne me dis rien ça met juste que vous avez relâché la touche E et là un combo exclusif c’est une séquence donc c’est un combo tout simplement, vous avez appuyé sur les touches RTY, vous avez relâché les touches RTY, le combo, là je les appuis en même temps, là je fais un combo je les appuie l’une après l’autre RTY, ça a été détecté. Ensuite vous pouvez supprimer un écouteur particulier du clavier donc c’est aussi simple que unregister combo WS, WS, contrôle S, juste A ou juste Z, juste E, ou alors vous pouvez carrément supprimer l’écouteur sur toute une liste de combo, vous avez défini dans votre jeu vous pouvez définir plusieurs listes de combo en fonction du niveau du héros de ce qu’il gagne comme bonus, ça ouvre tout un tas de possibilités, si vous développez un jeu comme Mario vous avez des bonus lancer la boule de feu, vous pouvez faire un register mani plusieurs combos mais que quand il gagne le bonus, et dès qu’il perd son bonus, vous faites sur une liste de combo ou alors pouvez carrément supprimer tous les écouteurs du clavier onlistener.reset, vous faites un reset de tout.
Voilà donc c’est une librairie vraiment très pratique, très simple à utiliser il n’y a pas plus simple, enregistrer un combo, le code ou alors des combos, des touches plus compliquées des combos avec sur le keydown, le key up, c’est aussi simple que ça pour supprimer les écouteurs unregister combo, soit une liste, soit des touches et reset pour tout supprimer.
Comme d’habitude vous trouverez le code source en téléchargement sous ce cours vidéo, si vous avez des questions posez-les également sous ce cours vidéo l’équipe développement facile vous répondra avec grand plaisir et maintenant si vous voulez aller beaucoup mais vraiment beaucoup plus loin dans la création de jeux d’applications avec JavaScript, il y a juste au-dessus du cours il y a un lien cliquable qui va vous rediriger vers une deuxième vidéo qui va vous apprendre comment profiter et de l’expertise de l’équipe développement facile pour vous aider, si vous rencontrez des difficultés dans certain code source, les cours, comment les adapter à vos projets, ils seront là pour répondre à toutes vos questions, vous allez apprendre à créer des applications performantes, que ce soit sur les tablettes, sur les Smartphones, sur le Web, avec les modèles de conceptions, la programmation orientée objet, le framework phaser, ionique Framework tout ça n’aura plus aucun secret pour vous, pour travailler en équipe, pour créer des architectures d’applications ou de jeux JavaScript qui soit vraiment très solide, ouverte aux évolutions, sans bug tout ça c’est dans la deuxième vidéo cliquez simplement sur le lien, sur l’image au-dessus de ce cours, je vous retrouve tout de suite dans la deuxième vidéo pour tous vous révéler à tout de suite.
