通过元素旋转影响X和Y移动

Question

如果您检查joshmwilliams.com/javascript/pro-am处的代码，您将看到汽车的旋转由左右箭头键控制。我想让地图移动，以创建一个更大的“玩”区域，唯一的问题是我想不出一种方式让汽车旋转，以影响地图的X和Y移动。任何帮助将是伟大的！谢谢！

Answer 1

添加一个此外按钮为“速度”，将汽车（地图）移动到汽车的当前方向！

Answer 2

那么，你想根据方向移动汽车吗？

I'm afraid you'll need to use math!

无论如何，你可以通过执行以下计算运动方向：

1. 首先，你需要让汽车的方向。如果你能够旋转它，你可能已经有了这个。请注意，大多数JavaScript函数使用弧度，而不是度数。
2. 接下来，您需要获得x速度。这是通过获得角度的余弦并将其乘以汽车的速度来计算的。
3. 最后，获得y的速度。这是通过获取角的正弦和乘法时使用的步骤2

这里以相同的速度计算是从我的游戏API几个节选的：

this.getXSpeed  = function() { 

      this.direction = Game.Util.fixDirection(this.direction); 

      return Game.Util.cos(this.direction) * this.speed; 
     } 
     this.getYSpeed  = function() { 

      this.direction = Game.Util.fixDirection(this.direction); 

      return -Game.Util.sin(this.direction) * this.speed; 
     } 



... 


getAngle  : function(point1X, point1Y, point2X, point2Y, hyp) { 


      //This function uses the arcsine to calculate the angle between 
      //the points, but only if necessary. 

      //This function includes some shortcuts for common angles. 


      if(point1Y == point2Y) { 
       if(point1X < point2X) return 0; 
       else     return 180; 
      } 

      if(point1X == point2X) { 
       if(point1Y < point2Y) return 90; 
       else     return 270; 
      } 


      var xDist = point1X - point2X; 
      var yDist = point1Y - point2Y; 


      if(xDist == yDist) { 
       if(point1X < point2X) return 45; 
       else     return 225; 
      } 
      if(-xDist == yDist) { 
       if(point1X < point2X) return 315; 
       else     return 135; 
      } 


      if(hyp==null) 
       hyp = Math.sqrt(xDist*xDist + yDist*yDist); 


      var D_TO_R = this.D_TO_R; //57. something (radian to degree conversion) 


      if(point1X<point2X) { 

       return Game.Util.fixDirection(-Math.asin((point1Y-point2Y)/hyp) * this.D_TO_R); 
      } else { 

       return Game.Util.fixDirection(Math.asin((point1Y-point2Y)/hyp)  * this.D_TO_R+180); 
      } 

     } 

Answer 3

希望这将帮助你：

1. 定义运动的初始参数，例如

   ​var speed = 10; 
   var angularStep = Math.PI/180; 
   var rotation = 0; 
   

2. 减少或转向左边或右边时angularStep增加rotation。可移动的对象（汽车或轨道）与此模式

   movableObject.x += speed * Math.cos(rotation); 
   movableObject.y += speed * Math.sin(rotation);