Question

我试图让我的对象始终面对我的玩家，但我正在努力解决它背后的数学问题。到目前为止，我的对象在我的播放器移动的任何地方都会旋转，但它不一致。

这是我用来旋转对象的东西：

var targetX = player.x - this.width/2;
var targetY = player.y - this.height/2;

this.rotation = Math.atan2(targetY, targetX);
ctx.transform(1, 0, 0, 1, this.x, this.y);

//ART WORK
ctx.save()
    ctx.translate(15, 15);
    ctx.rotate(this.rotation);

    ctx.fillStyle = "866c4a";
    ctx.fillRect(-15, -15, this.width, this.height);
ctx.restore();

就像我说的，它不能正常工作，我相信这与我的数学有关。

由于

Answer 1

好!!

我立刻发现了问题所在。我没有考虑对象的位置：

var targetX = player.x - this.x;
var targetY = player.y - this.y;

this.rotation = Math.atan2(targetY, targetX);
ctx.transform(1, 0, 0, 1, this.x, this.y);

//ART WORK
ctx.save()
    ctx.translate(15, 15);
    ctx.rotate(this.rotation);

    ctx.fillStyle = "866c4a";
    ctx.fillRect(-15, -15, this.width, this.height);
ctx.restore();

我会离开这个QnA，因为有人遇到这个问题。：）

HTML5 JavaScript - 旋转对象到面目标

1 个答案: