Set Les contrôles ne fonctionnent pas pour une instance d'objet mais fonctionnent pour d'autres

Question

J'essaie de créer un jeu multijoueur en utilisant JS.

function EvilBall(player,color) 
{ 
    EvilCircle.call(this,this.size,this.velY,this.velX); 
    this.color=color; 
    this.score =0; 
    this.player=player; 

} 

EvilBall.prototype=Object.create(EvilCircle.prototype); 
EvilBall.prototype.constructor =EvilBall; 

    EvilBall.prototype.setControls=function(left,right,down,up){ 
     var _this = this; 
     window.onkeydown = function(e) { 
      console.log(e.keyCode); 
      if (e.keyCode === left) { 
       _this.x -= _this.velX; 
      } else if (e.keyCode === right) { 
       _this.x += _this.velX; 
      } else if (e.keyCode === down) { 
       _this.y -= _this.velY; 
      } else if (e.keyCode === up) { 
       _this.y += _this.velY; 
      } 
     } 
    } 

après que je crée deux instances de EvilBall et réglage, il contrôle en utilisant la fonction de setControls qui a la fonction de gestionnaire d'événements à l'intérieur.

var evilBall = new EvilBall('p1','white'); 
var evilBall2 = new EvilBall('p2','yellow'); 
evilBall2.setControls(65,68,87,83); 
evilBall.setControls(37,39,38,40); 

Seulement evilBall exemple avec la clé 37,39,38 et 40 fonctionne lorsque les touches sont enfoncées. J'ai pensé que depuis evilBall est mentionné ci-dessous evilBall2, cela fonctionne bien. Si un gestionnaire d'événements fonctionne correctement sur une instance, pourquoi ne travaille-t-il pas sur l'autre? Comment pouvons-nous développer des jeux multi-joueurs dans JS lorsque le gestionnaire d'événements sur une seule instance fonctionne? Quelqu'un peut-il m'expliquer s'il vous plaît. Est-ce que j'ai râté quelque chose?

Answer 1

fenêtre onkeydown est une propriété:

window.onkeydown =()=>alert("one"); 
window.onkeydown =()=>alert("two");//will override the first 
window.onkeydown(); 

Il faut donc utiliser window.addEventListner à la place:

window.addEventListener("keydown",function(event){ 
... 
}); 

Dans l'ensemble, il pourrait être préférable d'avoir un seul écouteur d'événement:

var keylisteners=[]; 
window.onkeydown=function(e){ 
(keylisteners.find(el=>el.key==e.keyCode)||{callback:function(){}}).callback(); 
}; 

Utilisez comme ceci:

keylisteners.push({ 
key:42, 
callback:function(){} 
}); 

Par ailleurs, votre fonction ne prend pas la forme des arguments:

Shape.call(this); //will do the job too