キャンバス画像を円形のパスで移動する

Question

現在、2Dのjavascriptゲームで作業していますが、現在は動きの仕組みをやっています。私はプレイヤーがマウスに向かって、またはマウスから離れる方向に前後に動くことができるようにしたいと思っています。

私はマウスをかなり下に下っていますが、私はどのようにストラップを実装するには固執しています。プレーヤーがマウスからどのくらい離れているかに応じてサイズを変えるダイナミックな円形のパスに沿って移動する必要があります。

例：マウスが赤いXの場合は、緑色の円形の軌跡に沿ってプレーヤーを移動します。 このパスは、プレーヤーがマウスからどのくらい離れているかに基づいてサイズが変更されます。

私は移動キーが押されたときに私は本当にすべての更新」の位置に実装することができ、正しい円形経路でプレイヤーを移動するための方程式を探しています移動することにより、プレイヤーの位置を更新しています2番目の "方法の並べ替え。

私は円形経路のために、座標はで見つけることができることを知っている：

x = centerX * radius * Math.cos(theta); y = centerY * radius * Math.sin(theta);

しかし、私はトラブルの実装を持っています。ここに私のフレームワークの一部ですが、私は私がしようとしているすべてのソリューションにも近い私をもらっていない怖いので、私はあなたがほとんどのソリューションを持って、私はすでに

Player.prototype.update = function(delta){ 

     this.playerCenter = [this.x+this.width/2, this.y+this.height/2]; 

     let dX = (GAME.mouse.position.x - this.playerCenter[0]), 
      dY = (GAME.mouse.position.y - this.playerCenter[1]); 
      radius = Math.sqrt(dX * dX + dY * dY); 


     // Movement Forward 
     if(GAME.keyDown[87] && radius >= 50){ 
     this.x += (dX/radius) * this.movementSpeed * delta; 
     this.y += (dY/radius) * this.movementSpeed * delta; 
     } 

     // Movement Backward 
     if(GAME.keyDown[83]){ 
     this.x -= (dX/radius) * this.movementSpeed * delta; 
     this.y -= (dY/radius) * this.movementSpeed * delta; 
     } 

     // Strafe left 
     if(GAME.keyDown[65]){ 


     } 

     // Strafe right 
     if(GAME.keyDown[68]){ 

     } 

    } 

Answer 1

を削除した壊れた数学を投稿しないでしょう。

フォワードベクトルに90度進む必要があります。ベクトル90cwを回転するには、xとyを入れ替えて新しいxを打ち消します。

EGしたがって

dx = ?; // forward direction 
dy = ?; 
// rotate 90 clockwise 
dx1 = -dy; 
dy1 = dx; 

あなただけのその円の/減少 `radius`を増やす必要はありません

var dX = (GAME.mouse.position.x - this.playerCenter[0]); 
    var dY = (GAME.mouse.position.y - this.playerCenter[1]); 
    var radius = Math.sqrt(dX * dX + dY * dY); 
    //normalise  
    if(radius > 0){ 
     dX = (dX/radius) * this.movementSpeed * delta; 
     dY = (dY/radius) * this.movementSpeed * delta;; 
    }else{ 
     dX = dY = 0; // too close need to set this or you will get NaN propagating through your position variables. 
    } 



    if(GAME.keyDown[87] && radius >= 50){ // Movement Forward 
    this.x += dX; 
    this.y += dY; 
    } 
    if(GAME.keyDown[83]){ // Movement Backward 
    this.x -= dX; 
    this.y -= dY; 
    } 
    if(GAME.keyDown[65]){ // Strafe left 
     this.x += -dY;  // swap x and y negate new x to rotate vector 90 
     this.y += dX; 
    }  
    if(GAME.keyDown[68]){ // Strafe right 
     this.x -= -dY;  // swap x and y negate new x to rotate vector 90 
     this.y -= dX; 
    }