任意の角度で動くオブジェクトのXとYの開始点を移動する

Question

私はHTML5 CanvasとJavaScriptを使ってゲームをしています。スクリーンの中央に大砲を置いたシンプルな宇宙シューティングゲームです。私は、大砲の方向と同じ角度で大砲と射撃ミサイルを回転させることができます。

しかし、私には問題があります。ミサイルのXとYの出発点については、大砲のXとYの位置を使用しています。これは奇妙に見えます。なぜなら、ミサイルを大砲の外で、角度の方向におそらく50ピクセルのように開始したいからです。それをどのように計算するのですか？このコードで

Iはミサイルオブジェクト作成：

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)); 

が、これは私が方向を計算ミサイルオブジェクトのコンストラクタ関数である：

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;