Bind deux touches simultanement

**nico78200** · 08/04/2011, 18h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 08/04/2011, 18h54

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 09/04/2011, 13h11

Merci de ton aide je test ca tout de suite.

Bonne journée

**nico78200** · 09/04/2011, 13h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 10/04/2011, 22h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 11/04/2011, 11h58

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

Bonne journée

**nico78200** · 11/04/2011, 12h12

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** · 11/04/2011, 12h20

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

**nico78200** · 11/04/2011, 12h27

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** · 11/04/2011, 12h34

non je parle de data() jquery

**nico78200** · 11/04/2011, 13h18

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** · 11/04/2011, 13h27

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 11/04/2011, 14h53

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

**nico78200** · 11/04/2011, 15h42

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 11/04/2011, 22h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 11/04/2011, 23h05

@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** · 11/04/2011, 23h06

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** · 12/04/2011, 11h21

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** · 12/04/2011, 11h43

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** · 12/04/2011, 12h27

ben suffit de créer le json dynamiquement ?

Bind deux touches simultanement

jQuery

Discussions similaires

Partager

Partager