在圆形路径上移动画布图像

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