Ça fait quelques jours que je n’ai pas rédigé d’article sur le jeu, car je ne savais pas trop sur quelle partie avancer précisément. J’ai bricolé deux ou trois trucs sur différentes parties du jeu, comme l’ajout d’unités sur la map et le déplacement de celles-ci, et c’est cool car ça marche plutôt bien. J’ai même montré ça à un collègue de bureau et on a déliré là-dessus. Le fait d’avoir commencé à chipoter à des parties un peu plus complexes m’a fait réfléchir sur une nouvelle step Avant de pouvoir déplacer des unités sur la map, il faut pouvoir les construire, c’est-à-dire pouvoir pointer une base ou un chantier naval et actionner l’achat de ceux-ci.

Donc aujourd’hui, je vais bosser sur les commandes au clavier, dans le jargon de l’informatique, on appelle ça l’interface, parce que ça claque en soirée !

Telle est la question ! Après avoir réfléchi, j’ai choisi de développer un contrôle au clavier pour rester fidèle au jeu. Je sais que le contrôle souris peut apporter un certain confort, je vais voir si je peux l’intégrer au passage.

Une chose à laquelle je n’avais pas pensé, c’est l’ajout du curseur sur la map. Le curseur déborde énormément sur le jeu original et pour rester fidèle à celui-ci, je ne vais pas avoir le choix que de créer une nouvelle grille/map par dessus les autres. Je pourrais aussi créer une balise enfant dans la grille des unités au niveau de la classe bg, si tu te souviens de ce que j’avais fait dans la partie 1 au sein de la section débordement. Mais je me dis que créer une nouvelle grille n’est pas problématique et ça pourrait peut être même me servir pour après.

Donc au niveau du code c’est pas sorcier, je lance une nouvelle fonction qui crée une map avec l’id map_cursor. J’ai également optimisé ma fonction avec la nouvelle syntaxe ES6, et je duplique mon code SASS, en veillant à ce que cette nouvelle grille soit placée au-dessus des autres.

Malheureusement, je n’ai pas un curseur dans mon sprite, j’ai donc regardé à quoi ressemble le curseur d’AW (Advance Wars) sur mon émulateur. Le curseur est assez simple, il a 4 coins qui sont représentés par des triangles et un doigt (pour le coin inférieur droit). De plus, le curseur est animé avec un effet de « va et vient » vers le centre.

Et comme j’ai dit que je ferai 100% du job, je suis parti pour créer le curseur à la main. Je pense que la solution la plus simple est de faire un gif animé, donc c’est parti pour une petite session de photoshop. Je ne te détaille pas la création du gif, je crée juste 4 pièces et je fais une animation d’image. Pour chaque step, je décale chaque pièce vers l’extérieur de 2px et je m’arrange pour que le mouvement soit fluide.

Pour afficher le curseur, j’ai simplement placé une classe cursor sur un élément de la map cursor et je trouve que l’exemple est relativement satisfaisant, en tout cas je suis content de moi !

P.S. Tu as vu mon super tank sur l’image du dessus, il en jette hein !

Allez, un peu de code maintenant ! Je crée une fonction set_cursor() qui va se charger de placer le curseur à un endroit par défaut et qui va ajouter un événement affichant le code de la touche lorsque j’appuie sur une touche du clavier, le but étant de récupérer les 4 valeurs des touches directionnelles (les flèches sur le clavier quoi).

En console, je peux voir keydown charCode=0, keyCode=39, la valeur des touches directionnelles est donc stockée dans la méthode « KeyCode » de l’objet. Au niveau de mon code, je stocke les différentes valeurs dans un tableau et au passage je stocke aussi les valeurs de la touche y et x qui feront office de touches a et b mais j’y reviendrai plus tard.

Pour déplacer mon curseur, je détecte si la touche est bien une touche de déplacement, via un indexOf() et je vérifie aussi que la nouvelle position est bien une position valide dans la map, par exemple si le curseur est en x=0 et y=0, je ne peux pas monter ni aller à gauche, donc je passe en paramètres la taille de ma map (width et height) pour gérer les autres cas.

Pour plus de simplicité et éviter la redondance, je crée une fonction move_cursor() qui va ajouter la classe cursor uniquement à la nouvelle position (un p’tit clean juste avant pour enlever la classe cursor de tout autre élément).

Et là, je me rends compte que ça ne marche seulement que pour une seule case dans chaque direction, car j’ai oublié de récupérer la nouvelle position du curseur à chaque nouveau déplacement.

Je viens de faire quelques tests et je suis plutôt satisfait, le code m’a pris une quinzaine de minutes à faire et c’est déjà fonctionnel. Bon par contre… Un truc vraiment pas cool, c’est que lorsque j’appuie sur deux touches (bas et droite par exemple) les deux mouvements sont effectués mais si je maintiens les deux touches appuyées, l’événement onkeydown va seulement s’effectuer sur la dernière touche. C’est logique mais bon voilà, moi je veux un déplacement en diagonale quand j’appuie sur deux touches en même temps.

Après plusieurs tests et chamboulements dans mon code, j’ai trouvé un truc pas mal. Je vais stocker les touches appuyées dans un tableau et je fais un foreach sur chaque élément de ce tableau et je relance le déplacement du curseur. J’ajoute aussi un nouvel événement onkeyup, pour gérer le fait qu’une touche est relâchée. A ce moment précis, je la retire du tableau, comme ça, le mouvement peut continuer seulement avec la ou les touches présentent dans le tableau.

Lorsque j’appuie sur bas et droite et que je relâche la deuxième touche, le mouvement ne continue pas vers le bas. A l’inverse, si je relâche ma première touche, le mouvement continue à droite. En fait, ça vient du fait que lorsque que j’appuie sur la deuxième touche, c’est cette pression sur cette touche qui génère l’événement onkeydown (c’est la dernière touche qui prend la main, si je peux dire ça comme ça) et là je ne sais pas comment je peux faire pour régler ce problème, car je ne peux pas simuler la pression sur la première touche à cause des mécanismes de sécurité des navigateurs. Si tu as une solution, je suis preneur !

Quand j’appuie très rapidement sur deux touches, par exemple droite et bas, l’événement onkeydown est exécuté deux fois, lors de la première pression le déplacement va se faire d’abord à droite (un seul élément dans le tableau des touches) et lors de la seconde pression les deux déplacements vont se refaire (deux éléments dans le tableau), donc le déplacement final pour cette combinaison est de deux cases à droite et une case vers le bas, et ensuite le déplacement continue de manière diagonale. Le soucis c’est ce décalage de deux cases, pour éviter cela j’ai dû créer une nouvelle variable touche_simultane que je définis à false si il y a deux touches pressées, je ne fais rien si ce n’est mettre touche_simultane à true, dans ce cas il n’y a pas de déplacement, et juste après, l’événement onkeypress va re-exécuter le code et donc déplacer mon curseur en diagonale proprement.

Pour éviter les bugs, j’ai lancé le déplacement d’une seule touche sur l’événement onkeyup et je réinitialise touche_simultane à false à chaque appel de cet événement.

En comparant la vitesse de déplacement entre ce que j’ai fait et l’émulateur, c’est un peu plus rapide sur l’émulateur et là je me dis qu’ajouter le déplacement à la souris ce serait p’tet pas mal.

Et en fait, c’est tout con, il suffit d’utiliser l’événement hover pour changer le curseur de place…

Mais il y a quelque chose qui ne va pas ! En fait, si j’agrandis volontairement la zone du curseur, représentée ci-dessous par le bord rouge de 3px, une partie de la map ne sera pas capable de changer la position du curseur. le hover ne peut pas se faire car l’élément intérieur du curseur passe par dessus les autres éléments td de la grille. Et en plus, d’après les quelques tests que je viens de faire, je peux seulement aller sur les cases rouges foncé, c’est vraiment bizarre.

Pour régler le problème, rien de plus simple, je définis le z-index des éléments .td de #map_cusor à 2 et si jamais un de ces td a la classe cursor alors je définis sont z-index à 1, et le tour est joué.

Voici le résultat final (début au clavier et ensuite la souris).