在圓形路徑上移動畫布圖像

Question

我目前正在研究2D JavaScript遊戲，現在正在做移動機制。我希望球員能夠前後移動，朝向或遠離老鼠，同時還能夠揮杆。

我得到了鼠標下面相當不錯，但我堅持如何實施strafing。我需要我的播放器沿着動態的圓形路徑移動，該路徑根據播放器與鼠標的距離而改變大小。例如：如果鼠標是紅色的X，我想沿着綠色的圓形路徑移動玩家。 這條路當然會根據玩家距離鼠標的距離而改變大小。

我感到每當移動鍵被按下，所以我真的很想找一個公式來移動玩家可在「位置更新一次實現正確的循環路徑移動更新球員位置第二「的方式。

我知道，對於一個圓形軌跡，座標可以通過發現：

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; 

因此，你可以如下

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