Javascript-为导出的类创建事件侦听器

我试图创建一个类，该类为按下左箭头键和右箭头键时要响应的html画布对象提供事件侦听器和处理程序。我的项目有2个文件：游戏的类文件和游戏的主文件

这些功能通常会进入游戏主文件。但我正试图把它们变成一个可以导出的类

// unmodified code
function keyDownHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = true;
  }
  else if (e.keyCode == 37) {
    leftPressed = true;
   }
}

 function keyUpHandler(e) {
   if (e.keyCode == 39) {
    rightPressed = false;
  }
   else if (e.keyCode == 37) {
     leftPressed = false;
   }
}
 document.addEventListener("keydown", keyDownHandler, false);
 document.addEventListener("keyup", keyUpHandler, false);

//实际答案如下

export class Paddle {
  constructor (world) {
    this.canvas = world.canvas,
    this.ctx = world.ctx,
    this.paddleHeight = 10;
    this.paddleWidth = 75;
    this.paddleX = (this.canvas.width - this.paddleWidth) / 2;
    this.rightPressed = false;
    this.leftPressed = false;
    // do i have to make a attribute for the event handlers?
    // or do i just add the listeners here?
  }

 draw()  {
    this.ctx.beginPath();
    this.ctx.rect(this.paddleX, this.canvas.height - this.paddleHeight, this.paddleWidth, this.paddleHeight);
    this.ctx.fillStyle = "#0095DD";
    this.ctx.fill();
    this.ctx.closePath();
}

keyDownHandler(e) {
    if (e.keyCode == 39) {
        rightPressed = true;
    }
    else if (e.keyCode == 37) {
        leftPressed = true;
    }
}

keyUpHandler(e) {
    if (e.keyCode == 39) {
        rightPressed = false;
    }
    else if (e.keyCode == 37) {
        leftPressed = false;
    }
}   
listener() {
    document.addEventListener("keydown", this.keyDownHandler, false);
    document.addEventListener("keyup", this.keyUpHandler, false);
}
}

---

您真的非常接近-但是在

keyHandler

函数中，您有：

if (e.keyCode == 39) {
    rightPressed = true;
}

没有全局变量

rightspressed

-它只存在于类

pable

中。将密钥处理程序更改为：

keyDownHandler(e) {
    if (e.keyCode == 39) {
        this.rightPressed = true; //Changed here
    }
    else if (e.keyCode == 37) {
        this.leftPressed = true; //Changed here
    }
}

keyUpHandler(e) {
    if (e.keyCode == 39) {
        this.rightPressed = false; //Changed here
    }
    else if (e.keyCode == 37) {
        this.leftPressed = false; //Changed here
    }
}   

现在，您需要做的就是更改

拨片

中的

listener（）

函数，如下所示：

listener() {
    document.body.addEventListener("keydown", this.keyDownHandler(e), false);
    document.body.addEventListener("keyup", this.keyUpHandler(e), false);

var player = new Paddle(world);

并按如下方式创建类的实例：

listener() {
    document.body.addEventListener("keydown", this.keyDownHandler(e), false);
    document.body.addEventListener("keyup", this.keyUpHandler(e), false);

var player = new Paddle(world);

---

您需要将所有函数放入构造函数中才能使其工作。

您真的非常接近-但是在

keyHandler

函数中，您有以下几点：

if (e.keyCode == 39) {
    rightPressed = true;
}

没有全局变量

rightspressed

-它只存在于类

pable

中。将密钥处理程序更改为：

keyDownHandler(e) {
    if (e.keyCode == 39) {
        this.rightPressed = true; //Changed here
    }
    else if (e.keyCode == 37) {
        this.leftPressed = true; //Changed here
    }
}

keyUpHandler(e) {
    if (e.keyCode == 39) {
        this.rightPressed = false; //Changed here
    }
    else if (e.keyCode == 37) {
        this.leftPressed = false; //Changed here
    }
}   

现在，您需要做的就是更改

拨片

中的

listener（）

函数，如下所示：

listener() {
    document.body.addEventListener("keydown", this.keyDownHandler(e), false);
    document.body.addEventListener("keyup", this.keyUpHandler(e), false);

var player = new Paddle(world);

并按如下方式创建类的实例：

listener() {
    document.body.addEventListener("keydown", this.keyDownHandler(e), false);
    document.body.addEventListener("keyup", this.keyUpHandler(e), false);

var player = new Paddle(world);

---

您需要将所有函数放入构造函数中，它才能工作。

在模块中创建包含属性keyDownHandler和keyUpHandler作为函数以及keyDown和KeyUp作为常量的对象

// Module my-module.js
var foo={
rightPressed:false;
leftPressed:false;
keyDownHandler:function(e) {
    if (e.keyCode == 39) {
        this.rightPressed = true;
    }
   else if (e.keyCode == 37) {
        this.leftPressed = true;
    }
}
keyUpHandler:function(e){
     if (e.keyCode == 39) {
         this.rightPressed = false;
     }
    else if (e.keyCode == 37) {
         this.leftPressed = false;
     }
  const keyDown=  document.addEventListener("keydown", this.keyDownHandler, false);
 const keyUp= document.addEventListener("keyup", this.keyUpHandler, false);
}
export {foo};

导入模块

import{foo} from 'my-module';

使用常量

foo.keyUp;
foo.keyDown;

---

在模块中创建包含属性keyDownHandler和keyUpHandler作为函数以及keyDown和KeyUp作为常量的对象

// Module my-module.js
var foo={
rightPressed:false;
leftPressed:false;
keyDownHandler:function(e) {
    if (e.keyCode == 39) {
        this.rightPressed = true;
    }
   else if (e.keyCode == 37) {
        this.leftPressed = true;
    }
}
keyUpHandler:function(e){
     if (e.keyCode == 39) {
         this.rightPressed = false;
     }
    else if (e.keyCode == 37) {
         this.leftPressed = false;
     }
  const keyDown=  document.addEventListener("keydown", this.keyDownHandler, false);
 const keyUp= document.addEventListener("keyup", this.keyUpHandler, false);
}
export {foo};

导入模块

import{foo} from 'my-module';

使用常量

foo.keyUp;
foo.keyDown;

---

---

blade.rightspressed=true

@Barmar我试图将那些处理函数和事件监听器移动到类对象中，我只是以前没有用这样的事件创建类函数。我将更新代码以使其更易于理解

paile.rightPressed=true

@Barmar我试图将那些处理函数和事件监听器移动到类对象中，我只是以前没有用这样的事件创建类函数。我会更新代码让它更容易理解我不能正确调用它我得到了这个错误“TypeError:undefined不是一个对象（评估'e.keyCode'）”，我这样调用它们

pable.keyDownHandler（）；pable.keyUpHandler（）；blade.listener（）

如果我向处理程序添加一个“e”参数，我会得到未定义e的错误。

blade

是类，而不是类的实例。是否有办法将事件侦听器也包含在类中？这个类的目的是为游戏提供一切，而主js文件只需要要求和调用函数。是的，我可以用很多方法来实现，但是对于这个项目，如果我在html中添加任何代码，它就会破坏我调用的函数

batle.listener（）batle.keyDownHandler（）；pable.keyUpHandler（），但不会产生与主文件中的函数相同的结果。我得到错误“找不到变量e”，但如果我在处理程序函数中放入“e”，则表示未定义e。不，您需要创建一个实例（
var player=new-paile（world）；
），然后用player调用它们。我不能正确调用它，我得到了这个错误“TypeError:undefined不是对象（计算'e.keyCode'）”我这样称呼他们
pable.keyDownHandler（）；pable.keyUpHandler（）；blade.listener（）
如果我向处理程序添加一个“e”参数，我会得到未定义e的错误。
blade
是类，而不是类的实例。是否有办法将事件侦听器也包含在类中？这个类的目的是为游戏提供一切，而主js文件只需要要求和调用函数。是的，我可以用很多方法来实现，但是对于这个项目，如果我在html中添加任何代码，它就会破坏我调用的函数
batle.listener（）batle.keyDownHandler（）；pable.keyUpHandler（），但不会产生与主文件中的函数相同的结果。我得到错误“找不到变量e”，但如果我在处理程序函数中放入“e”，则表示未定义e。不，您需要创建一个实例（
var player=new paile（world）；
），然后用player调用它们。您需要绑定函数：
this.keyDownHandler.bind（this）
rightPressed=true
应该是
this.rightPressed=true
。类属性不会成为JavaScript中的变量。我对这种语法感到困惑。我没有太多的经验，在我的类对象中我有一个构造函数，然后我创建函数，我应该把这些代码放在我的类对象中的什么地方？把你的类作为一个对象，它包含所有的函数作为键：值对，就像我为你写的代码一样，然后当你想使用它时，你将引用它作为paile.foo.keyDown和paile.foo.keyupohh好的，是的，这正在工作，我可以让事件触发并调用处理程序，现在只需应用移动您需要绑定函数：
this.keyDownHandler.bind（this）
rightPressed=true
应该是
this.rightPressed=true
。类属性不会成为JavaScript中的变量。我对这种语法感到困惑。我没有太多的经验，在我的类对象中我有一个构造函数，然后我创建函数，我应该把这些代码放在我的类对象中的什么地方？把你的类作为一个对象，它包含所有的函数作为键：值对，就像我为你写的代码一样，然后当你想使用它时，你将引用它作为paile.foo.keyDown和paile.foo.keyupohh好的，是的，这正在工作，我可以让事件触发并调用处理程序，现在就开始行动