Bind deux touches simultanement

Version imprimable

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

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...

09/04/2011, 12h11
nico78200

Merci de ton aide je test ca tout de suite.

Bonne journée

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.

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:

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>

11/04/2011, 10h58
nico78200

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

Bonne journée
11/04/2011, 11h12
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
11/04/2011, 11h20
SpaceFrog

essaye de passer par le data
stockes le keycode dans le data sur le keydown et enlève le sur le keyup
11/04/2011, 11h27
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.
11/04/2011, 11h34
SpaceFrog

non je parle de data() jquery
11/04/2011, 12h18
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.
11/04/2011, 12h27
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.
11/04/2011, 13h53
SpaceFrog

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

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.

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:

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>

11/04/2011, 22h05
SpaceFrog

Citation:

@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 ?
;)
11/04/2011, 22h06
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.
12/04/2011, 10h21
danielhagnoul

Bonsoir

J'ai fait tous mes tests sous Firefox 4 ! :aie:

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

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 ! :aie:
12/04/2011, 10h43
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.
12/04/2011, 11h27
SpaceFrog

ben suffit de créer le json dynamiquement ?
13/04/2011, 00h56
danielhagnoul

Bonsoir

Voir : Comment puis-je intercepter les frappes multitouches ?

Beau travail, belle équipe, auto congratulations ! :mouarf: :ccool: