JSFiddle - React, Tailwind, and code Playground
JavaScript
/**
* This is example to run loop with 30fps in the browser
*
*/
var gl = {
now: new Date().getTime(),
dt: 0.0,
last: new Date().getTime(),
// physics with 0.033333 steps
step: 1 / 30
},
frames = 0,
started = new Date().getTime();
/**
* Game loop
*
*/
var gameLoop = function () {
gl.now = new Date().getTime();
gl.dt = gl.dt + Math.min(1, (gl.now - gl.last) / 1000);
while (gl.dt > gl.step) {
gl.dt = gl.dt - gl.step;
// Increase frames
frames++;
if(frames === 30) {
// How long it took to execute 30 frames in 1000 ms ?
document.body.innerHTML = "We executed 30 frames in " + (new Date().getTime() - started) + " ms.";
started = new Date().getTime();
frames = 0;
}
}
// last
gl.last = gl.now;
// next
requestAnimationFrame(gameLoop);
};
// Start the game loop
gameLoop();