Question

有一个带有处理程序的类，用于计算方向 - InputManager。

每次在InputManager中处理事件时，如何更改主Game类中的变量值？

上

class Game {
  constructor() {
    this.size = 4;
    this.score = 0;

    this.inputManager = new InputManager;
  }

}

class InputManager {
  constructor() {
    this.mouseDown_position = {};
    this.events = {};
    this.listen();
  }

  listen() {
    document.addEventListener("mousedown", () => {
      this.mouseDown_position = {
        x : event.clientX,
        y : event.clientY
      };
    });

    document.addEventListener("mouseup", () => {
      let mouseUp_position = {
        x : event.clientX,
        y : event.clientY
      };
      let deltaX = this.mouseDown_position.x - mouseUp_position.x,
          deltaY = this.mouseDown_position.y - mouseUp_position.y;

      // MOVE DIRECTION:
      // LEFT
      if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
        console.log('left');
      }
      // RIGHT
      if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
        console.log('right');
      }
    });

  }
}

Answer 1

class Game {
  constructor() {
    this.size = 4;
    this.score = 0;
    this.changesize = (size) => {
      this.size = size;
    }

    this.inputManager = new InputManager(changesize);
  }

 class InputManager(){
     constructor(changesize){
       [...]
       this.changeSize = changesize;
       this.changeSize(300);
       [...]
     }

 }

Answer 2

一个选项可能是提供对引用回InputManager实例的Game的引用。例如，假设InputManager在其构造函数上需要此引用：

class InputManager {
  constructor(game) {
    this.game = game; // <-- store it locally here
    this.mouseDown_position = {};
    this.events = {};
    this.listen();
  }

  //...

然后在创建InputManager的实例时，您的Game类可以传递对自身的引用：

this.inputManager = new InputManager(this);

使用该引用，InputManager中的任何位置都可以修改该实例上的值。简单的事情：

this.game.score++;

从这里你可以进一步重构来调用对象中的操作而不是直接修改值，你可以传递闭包来包装对值的访问等等。但重点是你只需要一些参考回到什么你想修改。

Answer 3

我的建议是将游戏上下文传递给InputManager，然后从那里操作变量。

这不是正确的封装。

理论上游戏应该具有更新分数的功能，并且InputManager应该调用该功能来更新分数（或者对其他变量使用类似的方法）。

＆＃13;

class Game {
  constructor() {
    this.size = 4;
    this.score = 10;
    this.inputManager = new InputManager(this);
    this.direction = this.inputManager.direction;
    console.log(this.direction);
  }
}

class InputManager {
  constructor(gC) {
    console.log(gC.score);
    this.gC = gC;
    this.mouseDown_position = {};
    this.events = {};
    this.direction = null;
    this.listen();
  }

  listen() {
    document.addEventListener("mousedown", () => {
      this.mouseDown_position = {
        x : event.clientX,
        y : event.clientY
      };
    });

    document.addEventListener("mouseup", () => { 
    
      this.gC.score++;
      console.log(this.gC.score);
      
      let mouseUp_position = {
        x : event.clientX,
        y : event.clientY
      };
      let deltaX = this.mouseDown_position.x - mouseUp_position.x,
          deltaY = this.mouseDown_position.y - mouseUp_position.y;

      // MOVE DIRECTION:
      // LEFT
      if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
        console.log('left');
        this.direction = 'left';
      }
      // RIGHT
      if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
        console.log('right');
        this.direction = 'right';
      }
      // UP
      if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
        console.log('up');
        this.direction = 'up';
      }
      // DOWN
      if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
        console.log('down');
        this.direction = 'down';
      }
    });

  }
}

var game = new Game();

＆＃13;

如何在处理来自另一个类的事件时更改变量的值？javascript

3 个答案: