Javascript 在循环路径上移动画布图像

我目前正在做一个2D javascript游戏，我现在正在做运动力学。我希望玩家能够向前和向后移动，接近或远离鼠标，同时也有能力扫射

我很好地跟踪了鼠标，但是我被困在如何实施扫射上了。我需要我的播放器沿着动态循环路径移动，该路径根据播放器离鼠标的距离改变大小

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

每当按下移动键时，我都会通过移动来更新玩家的位置，所以我真的在寻找一个方程式，使玩家在正确的循环路径中移动，该方程式可以以每秒更新一次的方式实现

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

x=中心x*半径*数学costheta； y=中心y*半径*数学sintheta；

但是我在执行上有困难。这是我的一些框架，但我担心我尝试过的所有解决方案都没有让我接近，所以我不会发布我已经删除的坏数学

  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]){

       }

     }

---

你几乎找到了解决办法

你需要以90度的角度前进。若要将矢量旋转90度，请交换x和y，并对新的x求反

乙二醇

因此，您可以按如下方式更新代码

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

---

你不需要增加/减少那个圆的半径吗？这是一个完美的解决方案，谢谢你的知识，先生-我现在已经在我的大脑中更加巩固了向量的概念！

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