Problème déplacement

1 heure que je suis dessus....

Le problème exposé dans ce sujet a été résolu.

Bonjour,

je suis en train de développer un jeu HTML5 avec canvas, et je n'arrive pas à déplacer mon personnage, et je ne comprend pas la raison. : voici la partie buggé de mon 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
function Player(sourceimage, velocity) {
    this.image = new Image();
    this.image.src = sourceimage;
    this.velocity = velocity;
    this.x = 0;
    this.y = 0;
    //Le personnage ne bouge pas
     this.movetop = false;
 this.movebottom = false; 
this.moveleft = false;
this.moveright = false;
    //à l'appui d'une touche, on indique le mouvement
document.addEventListener('keydown', function(e) {
   this.key = e.keyCode;
    this.velocity = 20;
    if (this.key == 38) {
       this.movetop = true;
    } else if (this.key == 40) {
      this.movebottom = true; 
    } else if (this.key == 37) {
        this.moveleft = true; 
    } else if (this.key == 39) {
        this.moveright = true; 
    }
});
    //quand on relache, on ne bouge plus
    document.addEventListener('keyup', function(e) {
 this.movetop = false;
 this.movebottom = false; 
this.moveleft = false;
this.moveright = false;
});
    //si le mouvement est indiqué, on fais bouger le personnage
    this.getMovement = function() {
           if (this.movetop == true) {
        this.y -= this.velocity;
    } else if (this.movebottom == true) {
         this.y += this.velocity;
    } else if (this.moveleft == true) {
        this.x -= this.velocity;
    } else if (this.moveright == true) {
        this.x += this.velocity;
    }
    };
    this.drawPlayer = function(width,height) {
        entitiescontext.drawImage(this.image, this.x, this.y, width, height);
    };
}
//Déclaration du personnage
var myplayer = new Player("player.png", 3);
//rendering
requestAnimationFrame(function rendering() {
   requestAnimationFrame(rendering, 1000 / 60);
    entitiescontext.clearRect(0,0,entitiescanvas.width, entitiescanvas.height);
    //on déssine le personnage et on attend le mouvement
    myplayer.drawPlayer(32,32);
    myplayer.getMovement();
});

Je précise que si je met myplayer.moveleft = true; dans la console, il bouge… Il y a un problème avec getMovement() mais à quel endroit ? Merci d'avance pour vos réponses. Je vous avoue ne rien y comprendre

+0 -0

c'est à cause du binding du this dans le document.addEventListener, à ce moment là this renvoie vers la fonction de callback. Il faut donc que tu fasses :

 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
function Player(sourceimage, velocity) {
    this.image = new Image();
    this.image.src = sourceimage;
    this.velocity = velocity;
    this.x = 0;
    this.y = 0;
    //Le personnage ne bouge pas
    this.movetop = false;
    this.movebottom = false; 
    this.moveleft = false;
    this.moveright = false;
    //à l'appui d'une touche, on indique le mouvement
    document.addEventListener('keydown', function(e) {
        this.key = e.keyCode;
        this.velocity = 20;
        if (this.key == 38) {
            this.movetop = true;
         } else if (this.key == 40) {
            this.movebottom = true; 
         } else if (this.key == 37) {
            this.moveleft = true; 
         } else if (this.key == 39) {
            this.moveright = true; 
         }
    }.bind(this)); // /!\ ici : on met "bind" pour que dans la fonction de callback this vaille le myplayer
    //quand on relache, on ne bouge plus
    document.addEventListener('keyup', function(e) {
        this.movetop = false;
        this.movebottom = false; 
        this.moveleft = false;
        this.moveright = false;
    }.bind(this));
    //si le mouvement est indiqué, on fais bouger le personnage
    this.getMovement = function() {
        if (this.movetop == true) {
            this.y -= this.velocity;
        } else if (this.movebottom == true) {
            this.y += this.velocity;
        } else if (this.moveleft == true) {
            this.x -= this.velocity;
        } else if (this.moveright == true) {
            this.x += this.velocity;
        }
    };
    this.drawPlayer = function(width,height) {
        entitiescontext.drawImage(this.image, this.x, this.y, width, height);
    };
};

//Déclaration du personnage
var myplayer = new Player("player.png", 3);
//rendering
requestAnimationFrame(function rendering() {
   requestAnimationFrame(rendering, 1000 / 60);
    entitiescontext.clearRect(0,0,entitiescanvas.width, entitiescanvas.height);
    //on déssine le personnage et on attend le mouvement
    myplayer.drawPlayer(32,32);
    myplayer.getMovement();
});
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte