Javascript game loop that runs at the same speed?

Question

I have a javascript game that will run really fast on some computers and really slow on others. I've been doing some research and I've found that I need to update my loop based on time, but I can't seem to find any good examples of this for javascript. Can someone point me to the right direction on how to get a game to run at 30fps on any hardware?

Thanks

Answer 1

Normally games work from a Delta Time, that is, the amount of time since the last frame was rendered.

Psuedocode (roughly C#):

DateTime lastFrameTimeStamp = DateTime.Now;
void Draw()
{
    TimeSpan timeSinceLastFrame = DateTime.Now.Subtract(lastFrameTimeStamp);
    float deltaTime = timeSinceLastFrame.TotalSeconds;

    // Do all of your movement and other time-based math based on the deltaTime, Like:
    float x = x + (MovementPerSecond * deltaTime);


    lastFrameTimeStamp = DateTime.Now;
}

Using a Delta Time prevents all dependency on CPU power or how often frames get drawn.

Answer 2

You can't force a game to run at 30fps if the hardware is unable achieve it. If what it is doing is taking more than 1/30th of a second, you're out of luck.

You can use requestAnimationFrame to let it run as fast as it can though. See here: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 3

What you are looking for is a simple implementation of delta timing in JavaScript. Implememting it in JavaScript is a relatively simple task. In fact it's so simple that it can be achieved in less than 25 lines of code (stripping out blank lines and comments):

function DeltaTimer(render, interval) {
    var timeout;
    var lastTime;

    this.start = start;
    this.stop = stop;

    function start() {
        timeout = setTimeout(loop, 0);
        lastTime = Date.now();
        return lastTime;
    }

    function stop() {
        clearTimeout(timeout);
        return lastTime;
    }

    function loop() {
        var thisTime = Date.now();
        var deltaTime = thisTime - lastTime;
        var delay = Math.max(interval - deltaTime, 0);
        timeout = setTimeout(loop, delay);
        lastTime = thisTime + delay;
        render(thisTime);
    }
}

Using it is even more simple. Let's learn by example:

var timer = new DeltaTimer(render, 1000 / 30);
var start = timer.start();
var body = document.body;
var frame = 0;

function render(time) {
    time -= start;
    body.innerHTML += (frame++) + ". " + time + " ms<br/>";

    if (time >= 1000) {
        var stop = timer.stop() - start;
        body.innerHTML += "<br/>" + stop + " ms (stopped)";
    }
}

I think the code is pretty self explanatory. For the live demo click on this link.

Answer 4

You could have a timer function which you can measure how long you are executing for, then call back to yourself at your ((required interval) - (execution time)), in pseudo code

function timer(){
    var timeStart = new Date();
    // Your stuff
    setTimeout (timer, (1000/30) - (new Date() - timeStart));
}

Answer 5

Frameworks like EaselJS often have Tickers/Timers that run every x milliseconds.

http://easeljs.com/docs/Ticker.html

A list of JavaScript game frameworks:

https://gist.github.com/768272

Answer 6

The only timing mechanisms available to you in JavaScript are setTimeout and setInterval. However, there is no guarantee on the precision of the timers. In fact, since JavaScript in browsers is single threaded there is no guarantee that your timer will fire when you want it to if there is JS running elsewhere already.

Generally speaking, if you want something to occur regularly at a specified interval, you use setInterval. You have to make sure that your callback does not take longer to run than the duration of the interval, otherwise your next interval will fire late. And if that fires late, chances are the next will as well, and you'll just get further and further behind in your executions.

Many modern browsers do support Web Workers, which is essentially a background JS execution (in addition to the primary UI blocking thread we are all familiar with). I have not used Web Workers yet, so I cannot speak to them with any authority or expertise.

If this were me, I would take the following initial approach (http://jsfiddle.net/Ce3wq/):

var GameTimer = (function () {
    var gameTimer = function (opts) {
        var self = this;
        opts = opts || {};
        opts.stepInterval = opts.stepInterval || 30;

        var callbacks = {};
        var stepInterval= opts.stepInterval; // ms

        this.domReady = function () {
            setInterval(step, stepInterval);
        };

        this.registerService = function(callback){
            callbacks[callback] = callback;
        };

        this.removeService = function(){
            delete callbacks[callback];
        };

        var step = function () {
            for(var id in callbacks){
                callbacks[id]();
            }
        };
    };

    return new gameTimer;
})();

var eachTick = function(){
    console.log(new Date().getTime());
};

GameTimer.registerService (eachTick);

jQuery(document).ready(GameTimer.domReady);

Answer 7

The only option you have with JavaScript is using setTimeout and setInterval to emulate game loops found in other languages.

You cannot force your game to run at the desired speed in each hardware (even if your game is really low on requisites, there will be always stuttering because of web browsers JavaScript engines), but you can still use Delta Timing to not waste time between each frame.

Here is a simple code I use for my JavaScript games. It's a function that gets called FPS times in a second. In the example is 30 times each second.

Answer 8

This is a very simple way of creating a game loop that will call itself 30 times a second in javascript

const fps = 30; // Change this to whatever fps you desire
function gameLoop() {

    // Do something

    setTimeout(gameLoop, 1000 / fps);
}