javascript - 保存鼠标位置，然后获得更新的第二个值

Question

我正在使用 Phaser 引擎，我希望在单击并按住事件时从初始鼠标位置绘制一条线，并使其不断更新以在鼠标移动时绘制到鼠标位置。我的问题是，当我尝试存储初始鼠标位置时，它不断变化。这似乎是一个简单的问题，但我不太擅长这些东西。这是代码:

var unitLine;
if(game.input.activePointer.isDown) {
    const firstX = game.input.x;
    const firstY = game.input.y;
    unitLine = game.add.graphics(100, 100);
    unitLine.beginFill(0xFF3300);
    unitLine.lineStyle(10, 0xffd900, 1);

    unitLine.moveTo(firstX, firstY);
    unitLine.lineTo(game.input.x, game.input.y);
}

即使我将它们声明为常量，firstX 和firstY 也会发生变化。不知道在这里做什么。

Answer 1

问题是，每当鼠标 isDown 时，您都会设置 firstX 和 firstY，因此它们基本上会被覆盖鼠标已按下。

要解决此问题，请尝试使用 Phaser 的 game.input.onDown功能:

var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'test', {
  preload: preload,
  create: create,
  update: update
});

function preload() {}

let firstX;
let firstY;

function create() {
  game.input.onDown.add(function() {
    firstX = game.input.x;
    firstY = game.input.y;
  }, this);
}
var unitLine;

function update() {
  if (game.input.activePointer.isDown) {
    unitLine = game.add.graphics(0, 0);
    unitLine.beginFill(0xFF3300);
    unitLine.lineStyle(10, 0xffd900, 1);

    unitLine.moveTo(firstX, firstY);
    unitLine.lineTo(game.input.x, game.input.y);
  }
}

<script src="https://github.com/photonstorm/phaser-ce/releases/download/v2.11.1/phaser.min.js"></script>

(另外，我必须将 100, 100 更改为 0, 0)