如何基于力沿弯曲路径移动图元



EDIT:我深入研究了Decker链接(矢量运动演示)中文档极其丰富的源代码,我很有信心在那里完成一些代码。感谢大家的帮助:D

我正在用javascript为一个游戏做动作。左右箭头键旋转宇宙飞船的图像,而向上箭头使其加速。使用旋转度和速度,我可以用Math.sin()Math.cos()计算xy的运动,但这意味着船像汽车一样操纵。鉴于它应该在太空中,我想让飞船的旋转只影响它加速时的路径,并考虑到飞船当前的运动。

我把它搞得一团糟,并试图把运动分成两种不同的力,当前的方向和速度以及想要的方向,但似乎没有什么能接近它应该有的感觉。

如果这让人困惑,很抱歉,以下是原始机芯的简化代码:

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);
}

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

我推荐这本书增压Javascript图形,它详细解释了矢量的使用等等。

您还可以在作者网站上查看其中一本书示例的源代码,该网站有一个向量处理对象,可能对您有用。

基于我的低物理知识:

这艘船有一定的速度和方向。这可以表示为空间的矢量,比如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--;
}

请注意,这使得太空船的行为真的像太空船,因为旋转可能很难停止。您可能需要允许逐步设置船只的方向,而不是使用旋转速度:-)您也可以设置旋转和加速度的限制(否则船只会爆炸),并使用最大速度(如光速,包括不同的速度添加)。

您应该使用一个称为"向量"的数学概念来进行移动。矢量只是一个力和一个方向。在确定绘制船只的位置时,该向量将应用于每帧船只的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

欢呼和快乐编码

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

最新更新