Bind deux touches simultanement [Résolu]

[nico78200]

Bonjour à tous,

Je recherche un moyen de capter l'appui de deux touches simultanément via la methode keydown() de jQuery.

J'arrive à bind ctrl + <- avec ce code sans problème:

Code :

1
2
3
4
5
6
7
$('body').keydown( function(e) {
 
		console.log('left: '+sprite.offset().left+' top: '+sprite.offset().top);		
 
		if ( ( (e.keyCode == 37) && (e.ctrlKey) ) || ( (e.keyCode == 81) && (e.keyCode == 90) ) ) {
 
...

La condition dans la première parenthèse bind correctement l'appuie simultané de ctrl et de la flèche de gauche. Mon problème est que je cherche (pour un moteur de jeu) à bind l'appui simultané de la flèche de gauche et de la flèche du haut. Avec ce code par exemple:

Code :

if ( ( (e.keyCode == 37) && (e.keyCode == 40) ) || ( (e.keyCode == 81) && (e.keyCode == 90) ) ) {

Mais évidemment ça ne fonctionne pas... Et j'aimerai bien comprendre pourquoi...

Merci de votre aide

Nico

[tresorunikin]

fais des conditions imbriquées.
Soit à combiner les touches de codes respectifs c1 et c2

Code :

1
2
3
4
if ((e.keyCode == c1) || ( e.keyCode == c2) ) {
      //if also
            if ( (e.keyCode == c1) ||  (e.keyCode == c2) ){
//donc les deux touches sont appuyees simultanement

A toi de voir les codes des touches, j'ai pas fait attention...

[nico78200]

Merci de ton aide je test ca tout de suite.

Bonne journée

[nico78200]

Merci de ton aide, il me semblais avoir déjà essayé, mais par aquis de conscience je viens de re-tester avec ce code:

Code :

1
2
3
4
5
6
7
8
$('body').keydown( function(e) {
		if ( (e.keyCode == 37)  ||  (e.keyCode == 81)  ) {
			if ( (e.keyCode == 38) || (e.keyCode == 90) ) {
				alert('diagUpLeft');
			}
 
			sprite.left('keydown');	
                        ....

Et ca ne fonctionne pas. (37 = <- et 81 = 'q') (38 = ^ et 90 = 'z')

Je cherche une méthode permettant de pouvoir animer un sprite dans un jeu sur 8 axes, je dois donc être en mesure de bind l'appui simultané de deux touches.

Je pense que c'est ma méthode jQuery keydown() qui me bride... Quelqu'un aurait t'il un exemple à me fournir le cas contraire.

Merci de votre aide.

[danielhagnoul]

Bonsoir

L'événement keydown se déclenche pour chaque frappe d'une touche du clavier, donc, à mon avis, la bonne méthode est de stoker la frappe précédente si l'on veut examiner des combinaisons de deux touches.

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
	$(function(){
		/*
			flèche gauche : 37
			fèche droite : 39
			flèche haut : 38
			flèche bas : 40
 
			CTRL : 17
			SHIFT : 16
 
			< : 276
			> : 226
		*/
		var lastWhich = 0;
 
		$(document).keydown(function(e){
			if (lastWhich == 17 && e.which == 37){
				console.log("CTRL plus flèche gauche");
			} else if (lastWhich == 37 && e.which == 38){
				console.log("flèche gauche plus flèche haut");
			} else {
				console.log(e.which);
				lastWhich = e.which;
			}
		});
	});
</script>

[nico78200]

Merci infiniment de ton aide danielhagnoul, ca fonctionne à merveille.

Bonne journée

[nico78200]

Aprés test plus poussé ça ne fonctionne pas comme attendu. Je m'explique, si j'appuie une fois sur gauche, que je le relache et qu'ensuite j'appui sur haut, a ce moment là, la variable lastWhich correspond toujours à la touche gauche et donc l'action attendu n'est pas la correct.

Je vais regarder comment gameQuery (un framework pour construire des jeux basé sur jQuery) gère les évènements clavier. Si je trouve la solution je la posterai ici.

Nico

[SpaceFrog]

essaye de passer par le data
stockes le keycode dans le data sur le keydown et enlève le sur le keyup

[nico78200]

Bonjour,

Parles tu du data dans les specs HTML5 ou autres chose? Oui j'étais justement en train de refléchir à ca, remettre à zéro ma variable lors du keyup.

[SpaceFrog]

non je parle de data() jquery

[nico78200]

Ha ok, si j'ai bien compris cette méthode permet de se passer des inputs:hidden pour mettre en cache des variables afin de les réutiliser dans des fonctions.

Je ne connaissais pas, c'est pas cross-browser (ie ne le prend pas en charge pour du xml), mais je trouvais vraiment ma solution avec les input:hidden peu classe, merci pour l'info.

Pour ma problématique, qui est je le rappel dans le cadre d'un moteur de jeu 2D, je pense que je me pose un faux problème, je suis en train d'étudié comment ca fonctionne dans des frameworks ou des jeux existant.

[nico78200]

Bon je viens de faire un test, mais c'est logique, si je maintiens la touche gauche et que j'appui sur la touche haut, ca fonctionne.

Mais comme lors du keyup, je RAZ ma variable comme ceci:

Code :

1
2
3
 
		// RAZ du lastWhich
		$('body').data('lastKey', 0);

A ce moment là lors de ma seconde pression sur la touche haut (en maintenant toujours gauche) évidemment ça ne fonctionne plus.

[SpaceFrog]

ben non faut pas tout razer
perso j'aurais mis un array illtéral et testé si l'index existait

[nico78200]

Voici ma solution en utilisant la méthode data() de jQuery:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
	// les directions*
	$('body').data('left', false);	
	$('body').data('right', false);	
	$('body').data('up', false);	
	$('body').data('down', false);	
 
	$(document).keydown( function(e) {
 
		console.log('left: '+sprite.offset().left+' top: '+sprite.offset().top);
 
		//~ gameScreen.stop();
		//~ sprite.stop();
 
		if ( (e.keyCode == 37) || (e.keyCode == 81) ) {
			$('body').data('left', true);	
		} else if ( (e.keyCode == 39)  || (e.keyCode == 68)  ) {
			$('body').data('right', true);	
		} else if ( (e.keyCode == 38) || (e.keyCode == 90) ) {
			$('body').data('up', true);	
		} else if ( (e.keyCode == 40) || (e.keyCode == 83) ) {
			$('body').data('down', true);	
		}
 
		if ( $('body').data('left') ) {
			game.left('keydown');
		} 
		if ( $('body').data('down') ) {
			game.down('keydown');
		} 
		if ( ($('body').data('left')) && ($('body').data('down')) ) {
			alert('diagonale gauche bas');
		} 
 
		return false;
	});	
 
	// Bind sur les touches relachés
	$(document).keyup( function(e) {	
		if ( (e.keyCode == 37) || (e.keyCode == 81) ) {
			$('body').data('left', false);	
		} else if ( (e.keyCode == 39)  || (e.keyCode == 68)  ) {
			$('body').data('right', false);	
		} else if ( (e.keyCode == 38) || (e.keyCode == 90) ) {
			$('body').data('up', false);	
		} else if ( (e.keyCode == 40) || (e.keyCode == 83) ) {
			$('body').data('down', false);	
		}
 
		if (! $('body').data('left') ) {
			game.left('keyup');
		} 		
		if (! $('body').data('down') ) {
			game.down('keyup');
		} 		
 
		return false;
	});

Ca fonctionne parfaitement, mais il reste des optimisations comme par exemple utilisé which au lieu de keyCode pour être sure de récupérer un caractère ASCI.

Voila si ça peut aider, merci pour votre aide.

[danielhagnoul]

Bonsoir

@SpaceFrog : L'idée d'exploiter data() pour stocker les frappes est très bonne, je me demande qui a pu attirer ton attention sur data().

On ne gère toujours qu'un événement keydown ou keyup à la fois. Je préfère cette version :

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<script>
	$(function(){
		$("body").data("key", {
			key16: false, // SHIFT
			key17: false, // CTRL
			key37: false, // flèche gauche
			key38: false, // flèche haut
			key39: false, // flèche droite
			key40: false  // flèche bas
		});
 
		$(document).keydown(function(e){
			var objDataKey = $("body").data("key");
 
			switch(e.which){
				case 16:
					objDataKey.key16 = true;
					break;
				case 17:
					objDataKey.key17 = true;
					break;
				case 37:
					objDataKey.key37 = true;
					break;
				case 38:
					objDataKey.key38 = true;
					break;
				case 39:
					objDataKey.key39 = true;
					break;
				case 40:
					objDataKey.key40 = true;
					break;
			}
 
			//console.log(objDataKey.key16, objDataKey.key17, objDataKey.key37, objDataKey.key38, objDataKey.key39, objDataKey.key40);
 
 
			if (objDataKey.key17 && objDataKey.key37){
				console.log("CTRL plus flèche gauche");
			} else if (objDataKey.key37 && objDataKey.key38){
				console.log("flèche gauche plus flèche haut");
			} else {
				console.log(e.which);
			}
		});
 
		$(document).keyup(function(e){
			var objDataKey = $("body").data("key");
 
			switch(e.which){
				case 16:
					objDataKey.key16 = false;
					break;
				case 17:
					objDataKey.key17 = false;
					break;
				case 37:
					objDataKey.key37 = false;
					break;
				case 38:
					objDataKey.key38 = false;
					break;
				case 39:
					objDataKey.key39 = false;
					break;
				case 40:
					objDataKey.key40 = false;
					break;
			}
 
			//console.log(objDataKey.key16, objDataKey.key17, objDataKey.key37, objDataKey.key38, objDataKey.key39, objDataKey.key40);
		});
	});
</script>

[SpaceFrog]

@SpaceFrog : L'idée d'exploiter data() pour stocker les frappes est très bonne, je me demande qui a pu attirer ton attention sur data().

ça je ne sais pas ...
une inspiration subite ?
ou des influences d'un maitre à penser ?

[nico78200]

Très pratique cette méthode data() en effet. Sinon, oui un case break est plus adapté dans ce genre de script. Ça optimise au lieu de comparer chaque code ASCI à chaque condition.

[danielhagnoul]

Bonsoir

J'ai fait tous mes tests sous Firefox 4 !

Mais avec les trois touches CTRL+SHIFT+P rien ne va plus !

Je n'ai pas le temps de tester IE 9, mais Chrome 10 et Firefox 4 ne gèrent pas du tout les touches de la même manière !

[nico78200]

Plus d'infos ici, je l'avais lu dans une news je sais plus trop ou...

https://developer.mozilla.org/en/DOM...Event/KeyEvent

Cependant je viens de tester mon code publié plus haut sous FF4 (stable sous Linux) et ca fonctionne correctement pour un ctrl+maj+a par exemple. Je précise que j'utilise event.which au lien de event.keyCode.

[SpaceFrog]

ben suffit de créer le json dynamiquement ?