看起来您在该函数中使用的 mouseX 和 mouseY 属性是在其他地方定义的。这意味着随着该变量在此函数之外更新,您用于更新 drawX 和 drawY 的数字也将发生变化。
您需要做的是在创建时跟踪 mouseX 和 mouseY 的本地副本。我不知道您的其余代码是什么样的,但我会猜测一下。
function Bullet(x, y) {
this.srcX = x;
this.srcY = y;
// keep track of original mouse coordinates
this.mouseX = mouseX;
this.mouseY = mouseY;
}
Bullet.prototype.draw = function() {
this.drawX += (this.mouseX - this.drawX) * 0.01;
this.drawY += (this.mouseY - this.drawY) * 0.01;
ctxbullet.drawImage(
imgSprite,
this.srcX, this.srcY,
this.width, this.height,
this.drawX, this.drawY,
10, 8
);
};
这将确保子弹在创建时始终朝着鼠标坐标移动,但您很快就会遇到另一个问题。由于速度与子弹距离这些鼠标坐标的距离有关(这就是您遇到速度不一致的原因),子弹会减慢到鼠标坐标处停止。
您需要做的是以所需的速度创建一个从 src 点到鼠标点的向量。这将允许子弹跟随那个向量直到无穷大(但你知道,实际上并不是无穷大,希望你一旦超出边界就将其移除)。
function Bullet(x, y) {
var dX = mouseX - x,
dY = mouseY - y,
dist = Math.sqrt(dX * dX + dY * dY)
;
// we want our deltas to be proportions of the total distance
this.dX = dX / dist;
this.dY = dY / dist;
this.speed = 5; // arbitrary number
}
Bullet.prototype.draw = function() {
// I didn't test this, but I think it works
this.drawX += this.dX * this.speed;
this.drawY += this.dY * this.speed;
ctxbullet.drawImage(
imgSprite,
this.srcX, this.srcY,
this.width, this.height,
this.drawX, this.drawY,
10, 8
);
}