Question

If a game is running at 177FPS or 22FPS, how is the player movements calculated? I’m trying to do this in Javascript:

setInterval(update, 0);

function update() {
     player_x++;
}

Problem is if the player will be move faster/slower according to the frame rate. How would I solve this?

Answer 1

I highly recommend using requestAnimationFrame when available (which will get you the best frame rate possible in modern browsers) and setTimeout when not. Then base your players position on the time since the animation started:

// Anonymous function used to make variables declared inside it not global
// This avoids conflicts in case variables with the same names are used
// in other scripts
(function(){

    // This checks for the requestAnimationFrame in each browser and store the first
    // it finds into requestAnimationFrame. If none are found it uses setTimeout
    // Attempting 60 frames per second.
    // It's taken from Paul Irish's blog: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    // and you can use it as is
    var requestAnimationFrame = (function(){
        return window.requestAnimationFrame    || 
               window.webkitRequestAnimationFrame || 
               window.mozRequestAnimationFrame    || 
               window.oRequestAnimationFrame      || 
               window.msRequestAnimationFrame     || 
               function(callback){
                   setTimeout(function(){ callback((new Date).getTime()); }, 1000/60);
               };
    })();

    var speed = 60; // pixels per second

    // This is used so that we only divide by 1000 once instead of every frame
    var calc = speed/1000;

    // Store the current time in start_time
    var start_time = (new Date).getTime();

    // This function is self invoking. It is wrapped in parenthesis and called immediately
    // time is passed in by requestAnimationFrame
    (function draw(time){
        // Calculate the new x position based on the current time
        var pos = (time - start_time)*calc;

        // Update the player's position
        // In my JSFiddle I update the style.left of a div
        player_x = pos;

        // Now that this frame is done request another frame.
        // draw will be called again before that frame is rendered
        requestAnimationFrame(draw);
    })();

})();

JSFiddle