Сброс параметра класса в новом экземпляре этого класса: JS ES6

Question

Я работаю над созданием игры, которая перерисовывает холст каждый раз, когда игрок переходит в новую «комнату». В то время как большая часть функциональности есть, у меня возникают некоторые проблемы с игроком ... хотя остальная часть моего класса рисования комнаты Room сбрасывается и повторно инициализируется без ссылки на предыдущую комнату, квадрат игрока переносится на следующий экран и остается в том же месте.

Мой класс Пользователь:

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 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 
} 

Initializer:

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 и очень новая для элемента холста, так что я уверен, что я делаю новобранец ошибку где-то здесь, но я не могу это описать.

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)); 
};