在 class 的新实例上重置 class 参数：JS ES6

Question

我正在开发一款游戏，每当玩家进入新的 "room" 时都会重新绘制 canvas。虽然大部分功能都在那里，但我在播放器上遇到了一些麻烦......虽然我房间绘图的其余部分 class 房间在没有参考前一个房间的情况下被重置和重新初始化，但播放器方块会穿过到下一个屏幕并停留在同一个地方。

我的用户class：

class User {
   constructor(user, x, y, ctx) {
     for (let metric in user) { this[metric] = user[metric]; }
     this.initialX = x;
     this.initialY = y;
     this.ctx = ctx;
     this.move = this.move.bind(this);
     //// various other constructor things...
   }
   //// various other methods
   move(e) {
      //// motion description
      if (this.y - 5 <= 0 {
          init(theRoom.connectingRooms[0], this.x, 550) ///// should create a new box at the last player-x position and y-position 550
          }
       }
    }

我的房间class:

class Room {
    constructor(canv, room, player) {
    for (let key in canv) { this[key] = canv[key]; }
    for (let attr in room) { this[attr] = room[attr]; } 
    this.drawWalls();
    this.player = player; /// adding player to room
  } /// end of constructor
////methods, nothing that affects player
}

初始化器：

let init = function init(room, x, y) {
  canv = document.getElementById('canvas');
  canvas = new CanvasState(canv); 
  player = new User(user, x, y, canvas.ctx); //// it's remembering the last player I set instead of removing the old one & creating a new one
  theRoom = new Room(canvas, room, player);
  window.addEventListener('keydown', theRoom.player.move);
  window.addEventListener('keyup', theRoom.typeInput);
};

你可以看到这个on CodePen here。相关行是 10、53、185 和 232。

我对 JS 很陌生，对 canvas 元素非常陌生，所以我确定我在这里的某个地方犯了新手错误，但是我好像没发现。

Answer 1

在用新变量覆盖 player 变量之前，您需要从 window 中删除密钥处理程序。这些仍然引用旧播放器对象的方法，因此每次移动它时都会绘制它。

您可以使用

function init(room, x, y) {
  canv = document.getElementById('canvas');
  canvas = new CanvasState(canv);

  if (player != null)
    window.removeEventListener('keydown', player.move);
  player = new User(user, x, y, canvas.ctx);
  window.addEventListener('keydown', player.move);

  if (theRoom != null)
    window.removeEventListener('keyup', theRoom.typeInput);
  theRoom = new Room(canvas, room, player);
  window.addEventListener('keyup', theRoom.typeInput);
}

另一种方法是只注册一个调用当前对象相应方法的回调（这样您就不需要 .bind 它们）：

function init(room, x, y) {
  canv = document.getElementById('canvas');
  canvas = new CanvasState(canv);
  player = new User(user, x, y, canvas.ctx);
  theRoom = new Room(canvas, room, player);
}

window.onload = function() {
  init(castleCourtyard, 350, 100);
  window.addEventListener('keyup', e => theRoom.typeInput(e));
  window.addEventListener('keydown', e => player.move(e));
};

在 class 的新实例上重置 class 参数：JS ES6

Resetting a class parameter upon new instance of that class: JS ES6

javascript

canvas

javascript-objects

es6-class