如何在基於力的曲線路徑上移動元素？

Question

編輯：我深入Decker的鏈接（vector movement demo）非常有據可查的源代碼，我相當有信心，我可以找出它的一些代碼。謝謝大家的幫助：d

我正在運動中的JavaScript遊戲。左箭頭鍵和右箭頭鍵旋轉飛船圖像，而向上箭頭則使其加速。使用旋轉度和速度，我可以用x和y計算運動，其中Math.sin()和Math.cos()，但這意味着船隻像汽車一樣處理。看到它應該是在太空中，我想讓船隻的旋轉只在加速時影響它的路徑，並考慮到船隻當前的運動。

我與它搞砸周圍很多，並試圖將運動成兩個獨立的力量，當前方向和速度和期望的方向，但似乎沒有任何甚至接近它應該的感覺。

很抱歉，如果這是混亂的，這裏的原始運動簡化代碼：

function main() 
{ 
if(keyStates[39]) // Right arrow pressed? 
    ship.deg+=8; 
if(keyStates[37]) // Left arrow pressed? 
    ship.deg-=8; 
if(keyStates[38]) // Up arrow pressed? 
{ 
    if(ship.speed<16) 
     ship.speed+=1; 
} 
var shift=getXYshift(ship.deg,ship.speed); 
function getXYshift(deg,speed) 
{ 
    return {x:Math.round(Math.cos((90-deg)*Math.PI/180)*speed*-1), y:Math.round(Math.sin((90-deg)*Math.PI/180)*speed)}; 
} 
setTimeout(function(){ main() }, 50); 
} 

Answer 1

可以使用一個向量來跟蹤船舶的速度和方向，並且當向上箭頭是通過檢查用於跟蹤船舶當前角度的第二矢量的角度按下改變該矢量的方向。

我建議讓這本書Supercharged Javascript Graphics詳細解釋向量的使用等等。

您還可以查看源代碼，這裏的書籍例子at the authors website具有向量處理對象，可以證明對你有用的。

Answer 2

你左/右箭頭按下後使用getXYshift？您只應在按下向上箭頭時使用它。這樣你的船就會在任何方向上加速旋轉。只有在向上箭頭鍵被按下時才改變速度，當沒有時則減速。不要用右鍵/左鍵改變速度，使用它們來改變你的船的旋轉。

Answer 3

你應該使用一個稱爲「矢量」的數學概念來進行運動。矢量只是一種力量和方向。這個向量在確定船舶的繪製位置時將被應用到你的船的X，Y座標（忽略其方向）。當你加速時，你將使用船舶所面向的方向和一個分配給加速度的常量值，以形成一個可應用於運動矢量的矢量，以計算其對速度的影響。

這裏是一個快速的介紹向量：http://www.khanacademy.org/science/physics/v/introduction-to-vectors-and-scalars，看視頻後，你應該有什麼需要尋找一個好主意。從那裏谷歌應該是你的朋友。

編輯：上面當我說：「你將使用船舶的方向和恆定的值分配到加速度形成一個向量，可以應用到你的運動向量計算其對速度的影響」我是指矢量代數。如果你決定使用向量來解決你的問題，你將需要使用向量加法的概念來加速。當您按下箭頭鍵時，您將生成一個幅度爲m的向量（其中m可以是任何實數，表示您想要加速的速度）和方向d（更可能的是，該值將與船舶所面對的方向相對應）。然後，您會將這個新矢量添加到船舶當前矢量中，以在應用當前框架的加速之後獲取船舶新矢量。你可以在這裏閱讀更多：根據我低體力知識http://emweb.unl.edu/Math/mathweb/vectors/vectors.html

歡呼和快樂編碼

Answer 4

：

船上有一個方向的速度。這可以表示爲您的空間中的矢量，例如X軸上的x像素，Y軸上的y像素（也可能是更多維度）。

然後它有一個旋轉速度，如每秒逆時針旋轉α度。

爲了計算您的船隻的旅行一秒鐘，只需將速度矢量添加到座標。並將旋轉添加到當前的方向。

要根據旋轉和加速度更改速度矢量，您需要在當前方向的方向上構建一個與加速度有關的長度矢量。然後將加速度矢量添加到速度矢量。

僞代碼：

ship = { 
    coordinates: [0, 0], // space units 
    orientation: 0, // radiant 
    speed: [0, 0], // space units/time frame 
    rotation: 0 // radiant/time fram 
} 
function animatestep { 
    coordinates[0] += speed[0]; 
    coordinates[1] += speed[1]; 
    orientation += rotation; 
} 
onaccelerate = function { 
    speed[0] += cos(orientation) * acceleration; 
    speed[1] += sin(orientation) * acceleration; 
} 
onleft = function { 
    rotation++; 
} 
onright = function { 
    rotation--; 
} 

注意，這使太空飛船真的像一個太空飛船，因爲旋轉可能是難以停止。您可能需要允許設置船的方向，而不是使用旋轉速度:-)您也可以設置旋轉和加速度限制（否則船舶爆發）並使用最大速度（如光速，包括different speed addition）。