JSFiddle - React, Tailwind, and code Playground

by digitalicarus

HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

JavaScript

//http://www.gamedev.net/topic/579738-web-javascript-game-loop/
//http://dev.opera.com/articles/view/framerate-control-system-for-javascript/
//http://jsfiddle.net/digitalicarus/4kshN/3/

var WEE = {
    FPS:           60,
    rate:          60,
    dt:            1/60,
    accrued:       0.0,
    last:          Date.now()/1000,
    fpsDisplay:    $('<div id="fpsDisplay"/>').appendTo('body')[0],
    frameCounter:  0,
    droppedFrames: 0,
    interval:      null,
    ciCallback:    function(){},
    upCallback:    function(){},
    rdCallback:    function(){},
    
    CheckInput:    function() {
        WEE.ciCallback();
    },
    Update:        function() {
        WEE.frameCounter++;
        WEE.droppedFrames++;
        WEE.upCallback();
    },
    Render:        function() {
        WEE.rate = (WEE.droppedFrames > 0) ? 
            ((WEE.rate+(WEE.FPS/(WEE.droppedFrames*2)))/2):((WEE.rate + WEE.FPS)/2);
        // just render every N frames to avoid a jarring display
        WEE.fpsDisplay.innerHTML = parseInt(WEE.rate,10)+" FPS";
        WEE.droppedFrames = -1;
        WEE.rdCallback();
    },
    GameLoop:      function() {
        var now = Date.now()/1000;
        WEE.accrued += (now-WEE.last);
        WEE.CheckInput();
        while(WEE.accrued > WEE.dt){
            WEE.Update();
            WEE.accrued -= WEE.dt;
        }
        WEE.Render();
        WEE.last = now;
    },
    setFPS:         function(fps) {
        WEE.FPS  = fps;
        WEE.rate = fps;
        WEE.dt   = 1/fps;
    },
    setCheckInput:  function(func) {
        WEE.ciCallback = func;
    },
    setUpdate:      function(func) {
        WEE.upCallback = func;
    },
    setRender:      function(func) {
        WEE.rdCallback = func;
    },
    start:          function() {
        WEE.interval = setInterval(WEE.GameLoop, 1);
    }
};


var key_W = 87;
var key_w = 119;
var key_D = 68;
var key_d = 100;
var key_S = 83;
var key_s = 115;
var key_A = 65;
var key_a = 97;
var key_pew =...