Création d’un moteur de jeu : gestion des input

Dans cet article, nous allons continuer avec la création d’un moteur de jeu que nous avons commencé dans les leçons précédentes, en travaillant sur un objet qui gère les input de l’utilisateur.

Créons donc un nouveau fichier JavaScript “inputs.js” et définissons quelques constantes dont nous aurons besoin plus tard.

/* inputs.js
 */
// constantes des input
TOUCH_1 = 1;
MOUSE_LEFT   = 1;
MOUSE_MIDDLE = 2;
MOUSE_RIGHT  = 3;
KEY_LEFT  = 37;
KEY_RIGHT = 39;
KEY_UP    = 38;
KEY_DOWN  = 40;
KEY_ENTER = 13;
KEY_ESC   = 27;
KEY_CTRL  = 17;
KEY_SPACE = 32;

Étant donné que l’API JavaScript pour les événements de clavier associe un code numérique à chaque touche, grâce à ces “constantes”, nous pouvons éviter de nous souvenir du numéro correspondant à chaque touche. (En fait, ce sont des variables : les constantes ne sont pas encore supportées par tous les navigateurs).

Pour ajouter d’autres “constantes”, nous pouvons consulter une liste complète de keyCodes que nous trouvons ici.

Définissons donc notre objet Inputs et initialisons certaines variables/propriétés :

Propriété	Description
mouseX mouseY	indique la position du pointeur, ou dernière touche, par rapport au canevas du jeu.
mouseLeft mouseRight	indique si la touche gauche/droite est enfoncée (l’utilisateur a appuyé sur la touche et ne l’a pas encore relâchée).
mouseLeftPress mouseRightPress	indique si le bouton gauche ou droit a été enfoncé à ce moment.
mouseLeftRel mouseRightRel	ils se réfèrent au relâchement de la touche/touch.

Pour le clavier, nous définissons à la place 3 tableaux vides (key, keyPress, keyRel), qui indiquent respectivement les touches enfoncées, enfoncées et relâchées.

Les event listener

Pour détecter l’entrée de l’utilisateur, nous utiliserons element.addEventListener pour associer les fonctions que nous définissons à chaque événement, comme appuyer ou relâcher une touche.

Ajoutons donc le code suivant au fichier inputs.js :

window.addEventListener("keydown", function(e) {
	if(!Inputs.key[e.keyCode]) {
		Inputs.keyPress[e.keyCode] = true;
		Inputs.key[e.keyCode] = true;
	}
}, false);
window.addEventListener("keyup", function(e) {
	Inputs.keyRel[e.keyCode] = true;
	Inputs.key[e.keyCode] = false;
}, false);

Les événements de touche de souris renvoient un nombre de 1 à 3, indiquant quelle touche a été enfoncée/relâchée (1=gauche, 2=milieu [ou molette], 3=droite).

Nous mettons ensuite à jour les variables pour l’emplacement :

window.addEventListener("mousedown", function(e) {
	switch (e.which) {
		case 1:
			Inputs.mouseLeft = true;
			Inputs.mouseLeftPress = true;
		break;
		case 2:
			Inputs.mouseMiddle = true;
			Inputs.mouseMiddlePress = true;
		break;
		case 3:
			Inputs.mouseRight = true;
			Inputs.mouseRightPress = true;
		break;
	}
}, false);
window.addEventListener("mouseup", function(e) {
	switch (e.which) {
		case 1:
			Inputs.mouseLeft = false;
			Inputs.mouseLeftRel = true;
		break;
		case 2:
			Inputs.mouseMiddle = false;
			Inputs.mouseMiddleRel = true;
		break;
		case 3:
			Inputs.mouseRight = false;
			Inputs.mouseRightRel = true;
		break;
	}
}, false);

Grâce à l’événement mousemove, nous mettons à jour les variables mouseX et mouseY relatives au canvas (l’événement renvoie la position de la souris par rapport à toute la fenêtre du navigateur, puis nous soustrayons la position du canevas, de manière à obtenir des coordonnées relatives).

Enfin, nous définissons la variable mouseMoved sur true, ce qui peut être utile pour vérifier si la souris a été déplacée.

Ajoutons maintenant des écouteurs pour les événements tactiles :

window.addEventListener("mousemove", function(e) {
	Inputs.mouseX = Math.round(e.pageX - game.canvas.offsetLeft );
	Inputs.mouseY = Math.round(e.pageY - game.canvas.offsetTop );
	Inputs.mouseMoved = true;
}, false);

Nous utiliserons mouseLeft pour indiquer le toucher, afin que nous puissions également utiliser le même code pour les appareils à écran tactile.

Si vous le souhaitez, vous pouvez ajouter le multitouch, le double tapotement, les gestes et d’autres utilitaires liés aux appareils à écran tactile. Si vous souhaitez développer cela, vous pouvez trouver de nombreuses bibliothèques à utiliser ou simplement vous inspirer pour développer inputs.js.

Définissons maintenant la fonction Clear, qui se chargera de réinitialiser la pression/relâchement des touches.

Inputs.Clear = function() {
	Inputs.mouseLeftPress = false;
	Inputs.mouseLeftRel   = false;
	Inputs.mouseMiddlePress = false;
	Inputs.mouseMiddleRel   = false;
	Inputs.mouseRightPress = false;
	Inputs.mouseRightRel   = false;
	Inputs.mouseMoved = false;
	Inputs.keyPress = [];
	Inputs.keyRel   = [];
}

Tout ce que nous faisons ici est de définir toutes les variables de la souris sur false et d’effacer les tableaux du clavier.

Nous devrons appeler cette fonction pour chaque image après la fin de la boucle de jeu, après avoir exécuté tous les événements des autres objets. Comme vous pouvez le voir, nous ne supprimons pas, et nous n’avons pas à le faire, les variables et les tableaux liés aux entrées “pressées” (mouseLeft, mouseMiddle, mouseRight, key), mais uniquement ceux du press/release qui durent seulement le temps d’une image.

/* main.js
 */
function Game() {
	//...
	this.GameLoop = function() {
		//...
		Inputs.Clear();
	}
}

Après avoir décrit les fonctionnalités internes, passons à la définition des fonctions que nous utiliserons lors de la programmation de notre jeu.

Inputs.GetKeyDown = function(k) {
	if(typeof(k) == "string") {
		k = k.charCodeAt(0);
	}
	return (Inputs.key[k] == true);
}
Inputs.GetKeyPress = function(k) {
	if(typeof(k) == "string") {
		k = k.charCodeAt(0);
	}
	return (Inputs.keyPress[k] == true);
}
Inputs.GetKeyRelease = function(k) {
	if(typeof(k) == "string") {
		k = k.charCodeAt(0);
	}
	return (Inputs.keyRel[k] == true);
}

Ces trois fonctions prennent en paramètre une valeur qui peut être un nombre entier (keyCode) ou une chaîne (par exemple Inputs.GetKeyDown("R") convertira la chaîne ‘R’ en le keyCode correspondant 82) et vérifie si l’élément de ‘array, ayant le keyCode comme index, existe et est vrai.

Créons des fonctions similaires pour gérer Down/Press/Release pour les trois boutons de la souris également :

Inputs.GetMouseDown = function(b) {
	if(b == 1) return Inputs.mouseLeft;
	if(b == 2) return Inputs.mouseMiddle;
	if(b == 3) return Inputs.mouseRight;
}
Inputs.GetMousePress = function(b) {
	if(b == 1) return Inputs.mouseLeftPress;
	if(b == 2) return Inputs.mouseMiddlePress;
	if(b == 3) return Inputs.mouseRightPress;
}
Inputs.GetMouseRelease = function(b) {
	if(b == 1) return Inputs.mouseLeftRel;
	if(b == 2) return Inputs.mouseMiddleRel;
	if(b == 3) return Inputs.mouseRightRel;
}

Enfin, nous ajoutons deux fonctions pour vérifier si la souris est à l’intérieur d’un rectangle ou d’un cercle :

Inputs.MouseInsideRect = function(x,y,w,h) {
	return (Inputs.mouseX >= x && Inputs.mouseY &gt;= y && Inputs.mouseX <= x+w && Inputs.mouseY <= y+h);
}
Inputs.MouseInsideCircle = function(x,y,r) {
	var dx = Inputs.mouseX - x;
	var dy = Inputs.mouseY - y;
	return dx*dx+dy*dy <= r*r;
}

➡️ Créer des jeux HTML5, le guide

---

Formations de Develop4fun

• Formation WordPress : le cours complet
• Parcours pour devenir un programmeur web
• Créez vos jeux avec UNITY3D
• Parcours pour devenir un programmeur de jeux vidéo
• Apprenez à créer des jeux 2D facilement avec LUA et LÖVE 2D
• Parcours pour devenir un programmeur de jeux vidéo
• Apprenez à programmer en C#
• Apprenez à programmer en C++