Zurücksetzen eines Klassenparameters auf eine neue Instanz dieser Klasse: JS ES6

Question

Ich arbeite daran, ein Spiel zu erstellen, das die Leinwand jedes Mal neu zeichnet, wenn der Spieler in einen neuen "Raum" geht. Während der Großteil der Funktionalität vorhanden ist, habe ich einige Probleme mit dem Player ... Obwohl der Rest meines Raumzeichenklassenraums zurückgesetzt und neu initialisiert wird, ohne Bezug auf den vorherigen Raum, führt das Spielerfeld zum nächsten Bildschirm und bleibt am selben Ort.

Meine Benutzerklasse:

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

My Room Klasse:

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

Sie können diese on CodePen here sehen. Die entsprechenden Linien sind 10, 53, 185, & 232.

ich ziemlich neu bin zu JS und sehr neu auf dem Canvas-Element, also bin ich sicher, dass ich hier irgendwo ein Rookie Fehler zu machen, aber ich kann es nicht erkennen.

Answer 1

Bevor Sie die player Variable mit der neuen überschreiben, müssen Sie die Schlüsselhandler von window entfernen. Diese beziehen sich immer noch auf die Methoden des alten Spielerobjekts, das folglich jedes Mal gezeichnet wird, wenn Sie es bewegen.

können Sie verwenden

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

Ein weiterer Ansatz nur ein Rückruf registrieren wäre, dass das entsprechende Verfahren des aktuellen Objekts aufruft (so dass Sie .bind sie auch nicht brauchen):

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