javascript - 如何将运动物理函数缩放到每秒帧数(在游戏引擎中)？

Question

我正在使用 Javascript (HTML5 Canvas) 开发一款游戏。我实现了一个简单的算法，允许一个对象跟随另一个混合了基本物理的对象(一个力矢量以正确的方向驱动对象，速度叠加动量，但被恒定的阻力减慢)。目前，我将其设置为跟随鼠标 (x, y) 坐标的矩形。这是代码:

// rectangle x, y position
var x = 400; // starting x position
var y = 250; // starting y position
var FPS = 60; // frames per second of the screen
// physics variables:
var velX = 0; // initial velocity at 0 (not moving)
var velY = 0; // not moving
var drag = 0.92; // drag force reduces velocity by 8% per frame
var force = 0.35; // overall force applied to move the rectangle
var angle = 0; // angle in which to move

// called every frame (at 60 frames per second):
function update(){
    // calculate distance between mouse and rectangle
    var dx = mouseX - x;
    var dy = mouseY - y;
    // calculate angle between mouse and rectangle
    var angle = Math.atan(dy/dx);
    if(dx < 0)
        angle += Math.PI;
    else if(dy < 0)
        angle += 2*Math.PI;

    // calculate the force (on or off, depending on user input)
    var curForce;
    if(keys[32]) // SPACE bar
        curForce = force; // if pressed, use 0.35 as force
    else
        curForce = 0; // otherwise, force is 0

    // increment velocty by the force, and scaled by drag for x and y
    velX += curForce * Math.cos(angle);
    velX *= drag;
    velY += curForce * Math.sin(angle);
    velY *= drag;

    // update x and y by their velocities
    x += velX;
    y += velY;

在每秒 60 帧的情况下效果很好。现在，棘手的部分是:我的问题是，如果我将其更改为不同的帧速率(例如 30 FPS)，我该如何修改力和阻力值以保持运动恒定？

也就是说，现在我的矩形(其位置由 x 和 y 变量决定)以每秒大约 4 个像素的最大速度移动，并在大约 1 秒内加速到其最大速度。但是，如果我更改帧速率，它会移动得更慢(例如 30 FPS 加速到每帧仅 2 个像素)。

那么，我如何创建一个以 FPS(每秒帧数)作为输入的方程式，并吐出正确的“阻力”和“力”值，这些值将以相同的方式实时运行？

我知道这是一个沉重的问题，但也许具有游戏设计经验或编程物理知识的人可以提供帮助。感谢您的努力。

jsFiddle:http://jsfiddle.net/BadDB

Answer 1

我会介绍一个实际的时间度量。然后你应该修改你的方程式，使其成为实际耗时和所需最大速度的函数。使用实际耗时的好处是，即使在(由于负载或您有什么)不以编程的 FPS 运行的系统上，方程式也能很好地工作。

顺便说一句——您应该使用 Math.atan2(dy, dx) 而不是 Math.atan(dy/dx)。 (想想当 dx == 0 时会发生什么。)