phaser-framework - 鼠标事件作为输入发送到移相器场景

Question

能否请您向我展示 dom 如何将鼠标指针移动事件作为移相器场景的输入进行通信。我已经看到如何在场景区域内跟踪鼠标移动；但是一旦鼠标离开并转到 DOM 的其他区域，该数据就不会被跟踪。我想如果也许有一种方法可以让输入从“外部世界”传递数据，那么这是可能的。非常感谢您提供的帮助和指导。

Answer 1

您需要做的就是向 DOM 对象添加一个事件监听器，您还想使用纯 JavaScript 跟踪移动。然后，将事件监听器绑定(bind)到事件触发时要执行的游戏方法。

const body = document.querySelector('body');
body.onmousemove = (pointer) => {
  updatePoint(pointer);
};

然后正常设置你的游戏:

const config = {
  type: Phaser.CANVAS,
  height: 400,
  width: 400,
  parent: 'gameContainer',
  scene: {
    create: create
  }
};

const game = new Phaser.Game(config);

let dataText;

function create() {
  this.input.on('pointermove', (pointer) => {
     updatePoint(pointer);
  });

 dataText = this.add.text (10, 10, 'x, y');
}

function updatePoint(pointer) {
  dataText.text = 'x: ' + pointer.offsetX + ', y: ' + pointer.offsetY;
}

您可能需要稍微重构代码才能使其正常工作，因为 DOM 元素上的事件监听器需要能够访问游戏方法。我创建了一个快速 codepen显示适合我的设置。