Question

我正在尝试创建一个类，该类为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);
}
}

Answer 1

在模块中创建包含属性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;

Answer 2

您确实非常接近-但是在您的keyHandler函数中，您拥有以下功能：

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

没有全局变量rightPressed-它仅存在于类Paddle中。将您的密钥处理程序更改为此：

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()中的Paddle函数：

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

并像这样创建您的类的实例：

var player = new Paddle(world);

并且您需要将所有函数放入构造函数中才能起作用。

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

2 个答案: