如何根据力沿曲线路径移动元素?

时间:2012-07-18 23:18:33

标签: javascript jquery html animation

编辑:我在Decker的链接(vector movement demo)中挖掘了极其详细记录的源代码,我相当有信心我可以解决这个问题。谢谢大家的帮助:D

我正在开发javascript游戏。左箭头键和右箭头键可旋转飞船的图像,而向上箭头键可使其加速。使用旋转度和速度,我可以使用xy计算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);
}

4 个答案:

答案 0 :(得分:3)

通过检查用于跟踪船舶当前角度的第二个矢量的角度,您可以使用一个矢量来跟踪船舶的速度和方向,并在按下向上箭头时改变该矢量的方向。

我建议您阅读本书Supercharged Javascript Graphics,其中详细介绍了向量的使用等等。

您还可以查看其中一个图书示例at the authors website的源代码,其中包含可能对您有用的矢量处理对象。

答案 1 :(得分:2)

你应该使用一种称为“矢量”的数学概念来进行运动。向量只是一个力和一个方向。在确定船舶的绘制位置时,此向量将应用于船舶的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

欢呼和快乐的编码

答案 2 :(得分:2)

基于我的低物理知识:

船具有方向的速度。这可以表示为空间中的矢量,例如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)。

答案 3 :(得分:1)

按右/左箭头后你是否使用了getXYshift?您只应在按下向上箭头时使用它。这样你的船就会旋转而不会向任何方向加速。仅在按下向上箭头键时改变速度,在不按下时减速。不要用右/左键改变速度,用它们来改变船的旋转。