Discussion :

[Supertoaster]

Bonjour à tous,

Je suis en train de développer une petite application JS, dans un canvas ; c'est un jeu dans lequel un personnage est contrôlé par les touches directionnelles du clavier.
Seulement voilà, la page étant trop grande pour être affichée dans son intégralité, un appui sur les touches haut ou bas provoque en même temps le défilement de la page, ce qui devient agaçant à la longue. Auriez-vous une idée de la façon dont je pourrais m'y prendre, pour empêcher ces touches d'avoir un autre effet que de diriger le personnage ?

Je vous remercie à l'avance pour vos précieuses réponses !

[supersnail]

Bonjour,

Tu peux rajouter un

Code :

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

return false;

à la fin de ta fonction qui gère l'évènement clavier.

[Supertoaster]

Merci ! Je l'ajoute comme ceci ?

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
function Personnage(...) {...
 
this.keyPress = function (_this,e) {
        switch(e.keyCode){
            case left:
                _this.setDirection(1);
                break;
            case up:
                _this.setDirection(2);
                break;
            case right:
                _this.setDirection(3);
                break;
            case down:
                _this.setDirection(4);
                break;
            default:
                break;
        }
        return false;
    }
 
    var This = this;
    addListener(document, "keydown", function(e) { This.keyPress(This,e);});
 
}

J'ai une sous-classe Personnage, dans laquelle j'ai rajouté un listener que va décortiquer la fonction "keypress".

J'ai rajouté cette ligne, mais la page s'agite toujours... Une idée ?

[supersnail]

Avec

Code :

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

addListener(document, "keydown", function(e) { This.keyPress(This,e);return false;});

, ça donne quoi?

[Supertoaster]

Flûte... Ça défile toujours. Que ce soit dans la fonction à l'intérieur du addListener, dans la fonction addListener elle-même ou dans la fonction keypress, l'ajout de "return false" à la fin ne change rien.
A quel niveau les touches directionnelles sont-elles interprétées par le navigateur, pour le défilement ? Avant ou après l'event ?

[NoSmoking]

Bonjour,
il faut éviter que l'événement ne se propage
donc ajouter en fin de fonction un truc du style

Code :

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

1
2
3
4
5
6
7
8
 if( event.preventDefault){
    event.preventDefault();
    event.stopPropagation();
  }
  else{
    event.returnValue = false;
    event.cancelBubble = true;
  }

[edit]
perso j'utiliserai keypress avec event.keyCode
[/edit]