Comment utiliser le clavier avec JavaScript et l’API canvas – keyboard clavier

On continue ensemble avec l’API Canvas pour développer des jeux vidéo.

Aujourd’hui vous allez apprendre à capturer les entrées/sorties du clavier pour interagir avec votre jeu.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment utiliser le clavier avec JavaScript et l’API canvas –  keyboard clavier

Bonjour à tous et bienvenu sur Développement Facile.

On continu ensemble la série de cours dédiée à la création de jeux JavaScript donc toujours avec l’API canvas, au fur et à mesure des jours qui suivent, des semaines qui suivent, vous allez apprendre à utiliser, à découvrir le code source de jeux très simples à travers des jeux très simples comme le pong par exemple où il a rien de bien compliqué dans le développement et bien vous allez découvrir comment utiliser tout le potentiel de l’API canvas et du JavaScript comment organiser vos fichiers pour créer des jeux et même des applications performantes.

Là ce cours est dédié à l’utilisation du clavier, pour le jeu soit je déplace la barre ici vous voyez la partie gauche avec la souris ou là avec le clavier comme je fais actuellement, moi je suis le joueur gauche avec deux points, l’ordinateur a trois points, et donc je déplace avec les flèches haut et bas du clavier, le curseur, donc là je vais faire exprès de perdre comme ça vous verrez l’écran game over, dans le dernier cours vous avez vu l’écran Victory, alors comment gérer le déplacement du clavier.

Toujours la même chose je ne vais pas revenir dessus, on force le navigateur à recharger le fichier JavaScript donc on désactive le cache et également il y a plusieurs bibliothèques JavaScript nécessaires donc là pour effectuer des effets twin, le son, gérer le son, la barre de chargement que vous avez vu les movie clip, donc les éléments graphiques, create JS, une bibliothèque JavaScript qui simplifie la création de jeux et d’applications.

Alors comment gérer le clavier ?

Le clavier vous vous en doutez, en fait si vous êtes développeurs ActionScript Flash vous savez faire, c’est le même principe d’écouter des événements. Si vous avez des bases en développement JavaScript, vous savez que le langage JavaScript c’est un langage événementiel et donc pour écouter les touches du clavier il va falloir tout simplement ajouter des événements, alors on les ajoute où ? On fait comment pour tous les événements du clavier ?

Surtout le jeu, le principe de fonctionnement du jeu, donc il y a plusieurs solutions j’en ai créé une toute simple, alors le clavier donc là ici on écoute les touches, qu’est-ce qu’on fait ? Ici vous faites un document.body, sur la balise body de votre code HTML, ici tout ce qui se situe dans cette balise body vous allez tout simplement écouter le clavier à chaque fois que le joueur va presser une touche vous appellerez la fonction update keydown à chaque fois qu’il va relâcher une touche, vous appellerez la fonction update keyup. Dans cette fonction, on va optimiser le truc, donc on a un tableau qui utilise des touches en fait qui sont appuyées,  qui est déclarée ici, donc on a un tableau vide qui contient toutes les touches du clavier qui sont pressés et donc ici alors, on écoute le clavier que je retrouve ici, donc vous écoutez le clavier et on va écouter uniquement la flèche haut ou la flèche bas, là c’est les codes pour écouter la flèche haut ou bas donc on reçoit un événement event.keycode on récupère le keycode code. la flèche haut. la flèche bas, et donc on associe keys.keycode à True, cette touche est pressée donc on le sait, et si la touche est relâchée, on l’associe à false, on optimise notre code en faisant un if et en mettant dans le tableau uniquement les touches que l’on écoute, donc si vous avez un jeu avec un joueur, un personnage de type Mario qui se déplace vous écouterez plusieurs touches, notamment les flèches bas, haut, gauche, droite plus peut-être la barre espace pour sauter, une autre touche pour tirer des munitions ou des objets.

Voilà, premier temps on écoute les événements keydown, keyup et on appelle les fonctions JavaScript correspondantes et ensuite deuxième événement, update Player on va déplacer le joueur donc si la touche 38, c’est la touche flèche haut est utilisée, je vais rajouter des commentaires, ici, si la touche flèche haut, on déplace le joueur, la barre là c’est une barre, si touche flèche bas, on va déplacer la barre vers le bas, tout simplement. Il me semble que 38 c’est plutôt flèche bas, vous vérifierez je ne connais pas les touches, les codes des touches par cœur  je les connais pas par cœur, donc si on descend je pense que 38 c’est plutôt flèche bas et là 40 il me semble que c’est plutôt flèche haut, ça doit être ça d’un point de vue logique du code, donc si la flèche bas est appuyée on fait ça, sinon c’est que c’est la flèche haut qui est appuyée, donc on fait ça, donc c’est le déplacement de la barre, on limite la vitesse de déplacement il y a un effet de friction et donc soit on change la valeur de la barre de progression, Y donc plus on descend vers le bas, si on le rajoute, si on fait un plus ici, on remonte parce qu’enfaite on est en négatif le coin haut gauche c’est le point 00 donc ici c’est le point 00 et quand on descend vers le bas on rentre en négatif, on décrémente la valeur donc ici c’est flèche bas et lorsqu’on remonte vers le haut au incrémente la valeur ici, pour se rapprocher de zéro, bien évidemment, avant zéro on arrête pour que la barre si je joue, la barre ne dois pas dépasser, elle doit rester pareil pour en bas ou elle doit rester ici, et en haut elle doit ne doit pas sortir.

Et voilà c’est aussi simple que ça et après on rappelle updatePlayer, vous avez en continu ces événements diffusés update keydown à chaque fois qu’une touche est relâchée, donc c’est appelé donc si le joueur maintient la touche flèche bas appuyée, ça ce sera appelé qu’une seule fois par contre en continu updatePlayer sera appelé toutes les 10 millisecondes, donc si la partie continue bien évidemment, à cinq dès qu’un des deux joueurs, que ce soit le joueur ou l’ordinateur atteint cinq on arrête timeout, on arrête d’appeler update Player, on pourrait même faire un remove listener pour optimiser le jeu, ce que l’on va faire tout de suite, voilà, je les rajoutent, on optimise vraiment notre jeu, on arrête de faire des timeout, de rappeler updatePlayer toutes les 10 ms, on enlève l’écoute des événements, la touche du haut pressée, les touches pressées et touches relâchée, n’importe quelles touches du clavier et je vous répète une dernière fois, on écoute les touches appuyées, les touches relâchées du clavier, on fait un filtre uniquement sur flèche haut, et flèche bas, pareil pour que la touche relâchée, pour la touche appuyée, et on appelle update Player grâce à un set timeout toutes les 10 ms pour mettre à jour la barre du joueur, en fait, tout simplement grâce ici en fonction de si on appui sur la touche bas, sur la touche flèche haut, et on fait un déplacement avec une friction. A la fin de la partie on arrête d’appeler update Player, plus besoin et on arrête d’écouter les événements qui donnent ça pour le jeu, et donc là pour les crédits ça fonctionne toujours, et là je bouge mon curseur avec la flèches haut et bas du clavier directionnel, tout simplement. Il y a des sécurités je peux pas aller plus gros, en bas je suis bloqué non plus, je peux pas sortir de l’écran, voilà vous avez appris à utiliser les touches du clavier pour gérer votre jeu JavaScript, donc vous pouvez faire un jeu de pong comme celui-là ou bien évidemment je plus évolué comme un jeu de voiture, un jeu de type Mario, un jeu de plate-forme de toute façon, vous inquiétez pas dans les prochains mois, je vous apprendrai sur développement facile comment créer votre jeu de plate-forme, très simplement.

Maintenant comme d’habitude vous allez retrouver sous cette vidéo le code source complet du jeu en téléchargement comme ça vous pourrez vous en inspirer, voir comment ça fonctionne, comment l’intégrer dans vos applications, si vous avez des questions posez les directement sous ce cours l’équipe développement facile sera ravie de vous répondre et maintenant je vous invite à consulter la deuxième vidéo, au-dessus de cette vidéo il y a une image, cliquez ici pour lancer la vidéo deux, cliquer ici pour lancer la vidéo deux et dans la deuxième vidéo, vous allez aller beaucoup plus loin avec JavaScript avec l’API canvas, les Framework JavaScript très utiles pour créer des jeux et des applications très performantes, à travailler en équipe, à développer deux à trois fois plus rapidement vos applications ou vos jeux, vous aurez bien évidemment des exemples de code source de jeux commentés, l’équipe développement facile vos questions, vos difficultés en priorité, donc tout ça je vous l’explique en détail dans la deuxième vidéo, cliquez simplement sur l’image là juste au-dessus de ce cours vidéo lancer la vidéo deux, sur le lien qui apparaît et je vous retrouve tout de suite dans la deuxième vidéo pour tout vous expliquer, à tout de suite.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source complet du jeux Pong

Retrouvez le code source commenté du jeux Pong avec l’utilisation du clavier

Montrez nous les jeux que vous avez développé

Utilisez la zone commentaire pour poster le code source de la gestion clavier de vos jeux