Lier un objet à un déplacement clavier window

**pigeonus** · 30/12/2009, 14h00

Bonjour à vous,

Je suis en train de programmer un petit labyrinthe en javascript. Pour l'instant il se crée et s'affiche bien, j'ai mon entrée et ma sortie. Seul problème, je ne sais pas comment faire pour lier une méthode de l'objet labyrinthe à un déplacement clavier. Cette méthode servira ensuite à déplacer un petit personnage grâce aux touches fléchées du clavier.

Par la suite j'aimerais pouvoir, dans ma fonction playerMove, pouvoir faire un this.tab[x][y] pour récupérer des informations sur telle ou telle case de mon objet Laby. Dans mon objet laby, j'ai donc bien ce this.tab[x][y] qui indique toutes les portes ouvertes et fermées pour une coordonnée donnée (utile pour savoir si je peux ou non déplacer mon personnage dans telle ou telle direction). Ce qui n'est pas possible pour l'instant car j'écoute l'objet window pour les déplacements.

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
// extrait de la fonction init
function init()
{
   var monde = new Laby(hauteur,largeur);
   window.onkeydown = monde.playerMove(); // j'ai essayé cette methode
   window.addEventListener("keypress",monde.playerMove,false); // celle ci aussi
}
 
// extrait de la fonction Laby
function Laby(x,y)
{
...
// liaison de la methode de deplacement du personnage
this.playerMove = playerMove;
}
 
//extrait de playerMove
function playerMove(event)
{
  if(event)
  {
     switch(event.keyCode)
     {
     //Touche fleche haut
     case 38:
     if(this.tab[3][2].porteHaut) // exemple
     {
        //deplacement du personnage vers le haut accordé
     }
     break;
 
     //etc ...
     }
  }
}

Je pense que mon problème serait peut être que je ne passe pas d'argument quand j'appelle monde.playerMove(). C'est pourquoi j'ai rajouté dans la fonction playerMove un if (event). Mais maintenant, j'ai l'impression qu'il fait le test une seule fois et qu'il ne fait pas attention par la suite si j'appuie ou non sur une touche, comme si l'écouteur n'écoutais pas.

Si quelqu'un a une idée j'en serai très heureux, ça fait 2 jours déjà que je ne trouve pas de solution. Peut être est ce un problème de syntaxe. Mon but final est de pouvoir atteindre le this.tab de l'objet Laby au sein de la fonction playerMove().

Merci beaucoup.

**SpaceFrog** · 30/12/2009, 15h39

un petit bout de code qui trainait en stock
ici le mouvement est déclenché par des clicks sur de boutons de direction; mais il suffira de modifier pour le lancer à partir des flèches direction du clavier

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
59
60
61
62
63
64
65
66
67
68
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
<script language="Javascript">
var timer;
var position= new Array(2);
var MyWay;
 
function movearound(thisway)
{ 
position[0] = parseInt(document.getElementById('MyDiv').style.top);
position[1] = parseInt(document.getElementById('MyDiv').style.left); 
 
switch(thisway)
{
case "up":
   position[0] -= 2;
   break;
 
case "do":
   position[0] += +2;
   break;
 
case "le":
   position[1] -= 2;
   break;
case "ri":
   position[1] += +2;
   break;
}
 
 
document.getElementById('MyDiv').style.top = Number(position[0]); 
document.getElementById('MyDiv').style.left = Number(position[1]);
} 
 
</script> 
<style >
input {font-family: 'symbol';}
</style>
</head>
 
 
<body>
<div id="MyDiv" style="width: 39; height: 20; top:0; left:0; background-color: blue; position: absolute; z-index:-1;" ></div> 
 
 
  <table border="0" style="cellpadding:0; cellspacing:0; " width="90">
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="up" width=this.height value="Ý" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" ; / / / /></td>
      <td width="34%"></td>
    </tr>
    <tr>
      <td width="33%"><input type="button" name="le" width="100" value="Ü" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="33%"><input type="button" width="100" value="&#128;" onClick="clearInterval(timer);" /></td>
      <td width="34%"><input type="button" name="ri" width="100" value="Þ" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
    </tr>
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="do" width="100" value="ß" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="34%"></td>
    </tr>
  </table>
 
</html>

**pigeonus** · 30/12/2009, 16h18

Merci SpaceFrog de ta réponse,

Cependant mon problème n'est pas tout à fait ça. Je sais coder ce qu'il faut pour déplacer mon personnage mais je bute sur le fait d'appeler une variable de l'objet alors qu'on se trouve dans une fonction qui ne fait pas partie de cet objet. J'ai bien essayé d'en faire une méthode de l'objet mais je n'y arrive pas. =[

En réutilisant ton exemple, l'idéal serait qu'à l'intérieur de la fonction movearound(thisway) on puisse appeler un objet préalablement créé autre part (mon objet Laby) et qu'on récupère une de ses données. Dans mon cas, ce serait récupérer (pour l'objet Laby toujours) this.tab[x][y]['gauche'] afin de savoir si je peux, ou non, déplacer mon personnage à gauche (si il y a un mur ou non à gauche de la case donnée).

Cependant, je ne connais pas la syntaxe a utiliser pour faire cela. J'ai éssayé de faire en sorte que la fonction de déplacement du personnage fasse partie des méthodes de mon objet Laby mais je suis obligé de mettre l'écouteur sur "window" car le code doit prendre en compte les touches utilisées au sein de la fenêtre courante. Ce problème m'empêche donc d'avoir accès aux informations contenues dans mon objet Laby.

Merci de votre temps.

**SpaceFrog** · 30/12/2009, 17h06

tu as declaré ta variable en global ?

**pigeonus** · 30/12/2009, 17h37

Envoyé par SpaceFrog

tu as declaré ta variable en global ?

Non j'ai tout mis dans ma fonction init():

Code :

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

1
2
 
var monde = new Laby();

Je pensais qu'il y avait une manière plus élégante de le faire plutôt que de déclarer mon labyrinthe en global. Mais c'est vrai que ça m'éviterait bien des problèmes au final. La solution était simple en faite, j'étais tellement persuadé qu'il y avait une autre façon de faire que je me refusais de l'utiliser.

Je te remercie. Je mets le post comme résolu.

Lier un objet à un déplacement clavier window

JavaScript

Discussions similaires

Partager

Partager