JSFiddle - React, Tailwind, and code Playground

by digitalicarus

HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <div id="tehContainer">
        <div id="fpsDisplay"></div>

        <div id="canvasContainer"></div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="framerate.js"></script>
    </div>
    </body>
</html>

JavaScript

//http://www.gamedev.net/topic/579738-web-javascript-game-loop/
//http://dev.opera.com/articles/view/framerate-control-system-for-javascript/
var FPS  = 60;
var dt = 1/FPS; // synthetic delta time
var last = Date.now()/1000;
var accrued = 0.0;
var rate = 60;

var canvas, context;
var container = $('#fpsDisplay')[0];
var frameCounter = 0;
var droppedFrames = 0;

var Update = function(dt) {
    frameCounter++;
    droppedFrames ++;
};

var Render = function() {
    rate = (droppedFrames > 0) ? ((rate+(FPS/(droppedFrames*2)))/2):((rate + FPS)/2);
    // just render every N frames to avoid a jarring display
    container.innerHTML = parseInt(rate)+" FPS";
    droppedFrames = -1;

};

var GameLoop = function(){
    var now = Date.now()/1000;
    accrued += (now-last);
    //CheckInput();
    while(accrued > dt){
        Update(dt);
        accrued -= dt;
    }
    Render();

    last = now;
};

var init = function() {

    canvas = document.createElement( 'canvas' );
    canvas.width = 256;
    canvas.height = 256;

    context = canvas.getContext( '2d' );

    $('#canvasContainer')[0].appendChild( canvas );

};

init();
setInterval(GameLoop, 1);