L'écouteur d'événement Javascript ne met pas à jour la valeur booléenne

Question

J'essaie de créer un jeu javascript très basique en utilisant le canevas html5. J'ai donc créé un "class" principal joueur qui est censé créer un cercle rouge sur la toile lors de l'instanciation et de l'invocation de la "méthode init". Enfin, il est également supposé être contrôlable via les touches fléchées et pour ce faire, j'ai essayé d'ajouter des écouteurs d'événements au document, en vérifiant keydown/keyup qui changerait alors les valeurs booléennes comme leftPressed = true; Sur la base de cela, la méthode de déplacement (appelée dans la fonction SetInterval dessiner) était destinée à mettre à jour l'emplacement du cercle rouge et là réside mon problème - à l'ouverture du fichier index.html, le cercle rouge est créé, mais appuyez sur les touches fléchées, je ne peux pas le faire bouger. Toute aide serait appréciée et s'il vous plaît excusez mon ignorance, j'ai commencé javascript il y a environ une semaine.

Voici le code js contenant le joueur "classe":

canvas = document.getElementById("surface"); 
ctx = canvas.getContext("2d"); 

//user controlled player class 

player = function(x,y,dx,dy,radius) { 
    this.x = x; 
    this.y = y; 
    this.speedx = dx; 
    this.speedy = dy; 
    this.radius = radius; 

    this.leftPressed = false; 
    this.rightPressed = false; 
    this.upPressed = false; 
    this.downPressed = false; 

    document.addEventListener("keydown",this.onKeyDown,false); 
    document.addEventListener("keyup",this.onKeyUp,false); 


    this.init = function() { 
     ctx.beginPath(); 
     ctx.arc(this.x,this.y,this.radius,0,Math.PI*2); 
     ctx.fillStyle = "red"; 
     ctx.fill(); 
     ctx.closePath(); 
    } 

    this.onKeyDown = function(e) { 
     if (e.keyCode == 37) { 
      this.leftPressed = true; 
     } 
     if (e.keyCode == 38) { 
      this.upPressed = true; 
     } 
     if (e.keyCode == 39) { 
      this.rightPressed = true; 
     } 
     if (e.keyCode == 40) { 
      this.downPressed = true; 
     } 
    } 
    this.onKeyUp = function(e) { 
     if (e.keyCode == 37) { 
      this.leftPressed = false; 
     } 
     if (e.keyCode == 38) { 
      this.upPressed = false; 
     } 
     if (e.keyCode == 39) { 
      this.rightPressed = false; 
     } 
     if (e.keyCode == 40) { 
      this.downPressed = false; 
     } 
    } 
    this.displace = function() { 
     if (this.leftPressed) { 
      this.x -= this.speedx; 
     } 
     if (this.rightPressed) { 
      this.x += this.speedx; 
     } 
     if (this.downPressed) { 
      this.y -= this.speedy; 
     } 
     if (this.upPressed) { 
      this.y += this.speedy; 
     } 
    } 

} 

Voici le code main.js:

canvas = document.getElementById("surface"); 
ctx = canvas.getContext("2d"); 

ctx.fillStyle = "black"; 
ctx.fillRect(0,0,canvas.width,canvas.height); 



player1 = new player(500,500,7,7,25); 


function draw() { 
    ctx.fillStyle = "black"; 
    ctx.fillRect(0,0,canvas.width,canvas.height); 

    player1.init(); 
    player1.displace(); 
} 

setInterval(draw,10); 

Answer 1

Cela ressemble à un bug Javascript classique: le mot-clé this doesn n'agissez pas comme vous pourriez vous y attendre.

Dans ce code:

function C() { 
    this.prop = true; 
    this.get = function() { 
     return this.prop; 
    } 
} 
var obj = new C(); 

obj.get() retournera true, mais var get = obj.get; get() retournera undefined. L'explication exacte de pourquoi est un peu fou-et-boulons pour entrer ici, mais en général, la réponse la plus simple est ne référence pas les fonctions membres à exécuter plus tard. Au lieu de cela, faire quelque chose comme ceci:

document.addEventListener("keydown", e => { 
    this.onKeyDown(e); 
}, false); 

Cela fonctionne parce que la syntaxe lambda ne plaisante pas avec this. Si vous voulez soutenir pré-lambda JS, vous pouvez faire cette version un peu plus laid:

var self = this; 
document.addEventListener("keydown", function(e) { 
    self.onKeyDown(e); 
}, false); 

ou utiliser bind pour y remédier.

En bref, il existe de nombreuses solutions à cela, mais pour les comprendre, vous avez besoin d'une bonne compréhension du système d'héritage protoptypique légèrement excentrique de Javascript.