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实例才有效。我已经想过，因为evilBall被提到下面的evilBall2，它工作正常。如果事件处理程序在一个实例上正常工作，为什么不在另一个实例上工作？当只有一个实例的事件处理程序工作时，我们如何在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

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

1 个答案: