javascript - 以任意 Angular 移动移动物体上的 X 和 Y 起点

Question

我正在使用 HTML5 Canvas 和 JavaScript 开发一款游戏。这是一款简单的太空射击游戏，屏幕中央有一门大炮。我可以旋转大炮并以与大炮方向相同的 Angular 发射导弹。

但我有一个问题。对于导弹的 X 和 Y 起点，我使用大炮的 X 和 Y 位置。这看起来很奇怪，因为我希望导弹在大炮之外启动，比如在 Angular 方向上大约 50 像素。我该如何计算？

使用此代码我创建导弹对象:

var dX = Math.cos(this.playerRotationAngle * Math.PI / 180); 
var dY = Math.sin(this.playerRotationAngle * Math.PI / 180); 
this.activeMissilesArray.push(new Missile(cannon.posX, cannon.posY, dX, dY));

这是来自 Missile 对象的构造函数，我在其中计算方向:

this.directionX = dX * this.speed;
this.directionY = dY * this.speed;

绘制方法:

Draw: function(context)
{
    context.drawImage(this.missile, this.posX-20, this.posY-20);
}

更新方法:

    Update: function()
{
    this.posX += this.directionX;
    this.posY += this.directionY;
}

Answer 1

您是否尝试过使用值为 50 的速度公式来调整初始位置？

// inside the Missile constructor
// instead of:
//   this.posX = x;
//   this.posY = y;
// do:
this.posX = x + 50 * dX;
this.posY = y + 50 * dY;