在圆形路径上移动 canvas 个图像

Question

我目前正在开发一款 2D javascript 游戏，并且我正在研究运动机制。我希望玩家能够向前和向后移动，朝向或远离鼠标，同时还具有扫射能力。

我很好地控制了鼠标的跟随，但我对如何实施扫射感到困惑。我需要我的播放器沿着动态圆形路径移动，该路径会根据播放器与鼠标的距离改变大小。

例如：如果鼠标是红色的 X，我想沿着绿色的圆形路径移动玩家。这条路径当然会根据玩家离鼠标的距离改变大小。

只要按下移动键，我就会通过移动来更新玩家的位置，所以我真的在寻找一个方程式来让玩家在正确的圆形路径上移动，可以用 "position updated every second" 某种方式来实现.

我知道对于圆形路径，可以通过以下方式找到坐标：

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

但是我在执行时遇到了问题。这是我的一些框架，但恐怕我尝试过的所有解决方案都没有让我接近所以我不会 post 我已经删除的破数学

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

在圆形路径上移动 canvas 个图像

Move canvas image across circular path

javascript

math

2d

trigonometry

canvas