javascript - requestAnimationFrame 仅在不使用类的情况下工作，我该如何修复它？

Question

我正在尝试学习用于动画和简单游戏的javascript和canvas，我已经编写了测试游戏的2个版本，首先是函数式编程，然后是对象(使用babel)，两者都具有相同的用于动画更新的原始代码但只有第一个版本可以在浏览器中运行，即 oop 版本，它给了我错误:

ReferenceError: update is not defined

我应该如何管理 requestAnimationFrame 的更新？

我尝试将变量更改为 this.update 或 this.update() 但结果是相同的

功能:

var c = document.getElementById("game");
var ctx = c.getContext("2d");
c.width = window.innerWidth/2;
c.height = window.innerHeight/2;
ctx.scale(20,20);
var player = {
  pos: { x:0, y:0 },
  vel: 2

};

var keys = {
  left:37, up:38, right: 39, down:40
};



function update() {
  ctx.clearRect(0, 0, c.width, c.height);
  draw();
  requestAnimationFrame(update);
}

function draw() {
  ctx.fillRect(player.pos.x, player.pos.y, 1, 1);
  //ctx.clearRect(0, 0, c.width, c.height);
}

function keyboardHandler(event) {
  switch(event.keyCode) {
      case keys.left:
        player.pos.x -= 1*player.vel;
        console.log(player.pos.x);
        break;
      case keys.up:
        player.pos.y -= 1*player.vel;
        console.log(player.pos.y);
        break;
      case keys.right:
        player.pos.x += 1*player.vel;
        console.log(player.pos.x);
        break;
      case keys.down:
        player.pos.y += 1*player.vel;
        console.log(player.pos.y);
        break;
  } // switch
} // keyboardhandler

document.addEventListener('keydown', keyboardHandler, false);
update();

对象(巴别塔):

class Game {

  constructor() {
    this.c = document.getElementById("game");
    this.ctx = this.c.getContext("2d");
    this.c.width = window.innerWidth/2;
    this.c.height = window.innerHeight/2;
    this.ctx.scale(20,20);
    this.player = {
      vel: 2,
      pos: {x:0,y:0}      
    };
    this.keys = {
  left:37, up:38, right: 39, down:40
};
  } // constructor

  draw() {
    this.ctx.fillRect(this.player.pos.x, this.player.pos.y, 1, 1);
  }

  update() {
    this.ctx.clearRect(0, 0, this.c.width, this.c.height);
    this.draw();
    requestAnimationFrame(this.update);


  }
  /* keyboardHandler(event) {
    switch(event.keyCode){
      case self.keys.left:
        this.player.pos.x -= 1;
        console.log("Sinistra -> " + self.player.pos.x);
        break;
        case self.keys.up:
        self.player.pos.y -= 1;
        console.log("Su -> " + self.player.pos.y);
        break;
        case self.keys.right:
        this.player.pos.x += 1;
        console.log("Destra -> " + self.player.pos.x);
        break;
        case self.keys.down:
        this.player.pos.y += 1;
        console.log("Giù -> " + self.player.pos.y);
        break;
    } // switch
  } // keyboardHandler*/
}


// calls

let game = new Game();
game.update();
console.log(game);
document.addEventListener('keydown', (event) => {
  switch(event.keyCode){
      case game.keys.left:
        game.player.pos.x -= 1;
        console.log("Sinistra -> " + game.player.pos.x);
        break;
        case game.keys.up:
        game.player.pos.y -= 1;
        console.log("Su -> " + game.player.pos.y);
        break;
        case game.keys.right:
        game.player.pos.x += 1;
        console.log("Destra -> " + game.player.pos.x);
        break;
        case game.keys.down:
        game.player.pos.y += 1;
        console.log("Giù -> " + game.player.pos.y);
        break;
    } // switch
}, false);

Answer 1

您必须:1) bind您的方法 this 或 2) 使用 arrow function .

第一个选项:

...
update() {
    this.ctx.clearRect(0, 0, this.c.width, this.c.height);
    this.draw();
    requestAnimationFrame(this.update.bind(this));
}

第二个选项:

...
update = () => {
    this.ctx.clearRect(0, 0, this.c.width, this.c.height);
    this.draw();
    requestAnimationFrame(this.update);
}