Set Элементы управления не работают для экземпляра одного объекта, но работают для других

Question

Я пытаюсь создать многопользовательскую игру с использованием 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; 
      } 
     } 
    } 

после этого я создаю два экземпляра EvilBall и установки там управления с помощью функции setControls, которая имеет функцию обработчика событий внутри.

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

Только экземпляр evilBall с клавишами 37,39,38 и 40 работает при нажатии клавиш. Я понял, что, поскольку evilBall упоминается ниже evilBall2, он работает нормально. Если обработчик события работает нормально на одном экземпляре, почему он не работает с другим? Как мы можем разрабатывать многопользовательские игры в JS, когда работает обработчик событий только на одном экземпляре? Может кто-нибудь объяснить это мне. Я что-то пропустил?

Answer 1

Окно OnKeyDown является свойством:

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

Так используйте window.addEventListner вместо:

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

В целом, это могло бы быть лучше просто слушатель один событие:

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

Используйте это как:

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

Кстати, ваша форма функция не принимает аргументы:

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