通過元素旋轉影響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);