javascript - 如何根据力沿弯曲路径移动元素？

Question

编辑:我在 Decker 的链接 (vector movement demo) 中深入研究了记录非常完备的源代码，我相当有信心我可以解决那里的一些代码。谢谢大家的帮助:D

我正在为一款使用 javascript 的游戏制作 Action 。左箭头键和右箭头键旋转飞船的图像，而向上箭头键使它加速。使用旋转度数和速度，我可以使用 Math.sin() 和 根据 x 和 y 计算运动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

您可以使用一个 Vector 来跟踪船只的速度和方向，并在按下向上箭头时通过检查用于跟踪船只当前 Angular 第二个 Vector 的 Angular 来更改该向量的方向。

我推荐这本书 Supercharged Javascript Graphics其中详细解释了矢量的使用等等。

您还可以在此处查看其中一本书示例的源代码 at the authors website它有一个可能对您有用的矢量处理对象。