保存鼠标位置然后有第二个值更新

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

因为你是在语句中声明的，所以每次都是新命中声明，重新创建变量。

首先，您需要在语句之外创建变量。

然后，为了解决您的问题，我会使用 bool 来锁定它们。

像这样：

var unitLine;
var firstX;
var firstY;
var needToset_XY = true;

if(game.input.activePointer.isDown) {

    if(needToset_XY){
        firstX = game.input.x;
        firstY = game.input.y;
        needToset_XY = false;
    }

    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 2

问题是只要鼠标 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）

保存鼠标位置然后有第二个值更新

Save mouse location then have a second value that updates

javascript

phaser-framework