设置控件不适用于一个对象实例但适用于其他对象实例

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);

只有键为 37、39、38 和 40 的 evilBall 实例在按下键时有效。我认为由于 evilBall2 下面提到了 evilBall，所以它工作正常。如果事件处理程序在一个实例上工作正常，为什么在另一个实例上不起作用？当事件处理程序仅在一个实例上工作时，我们如何在 JS 中开发多人游戏？谁能给我解释一下。我在这里遗漏了什么吗？

Answer 1

Window 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

设置控件不适用于一个对象实例但适用于其他对象实例

Set Controls not working for one object instance but works for other

javascript

javascript-objects

keyboard-events

multiplayer

dom-events