var box = document.getElementById('box'), fpsDisplay = document.getElementById('fpsDisplay'), boxPos = 10, lastBoxPos = 10, boxVelocity = 0.08, limit = 300, lastFrameTimeMs = 0, maxFPS = 60, delta = 0, timestep = 1000 / 60, fps = 60, framesThisSecond = 0, lastFpsUpdate = 0; function update(delta) { boxLastPos = boxPos; boxPos += boxVelocity * delta; // Switch directions if we go too far if (boxPos >= limit || boxPos <= 0) boxVelocity = -boxVelocity; } function draw(interp) { box.style.left = (boxLastPos + (boxPos - boxLastPos) * interp) + 'px'; fpsDisplay.textContent = Math.round(fps) + ' FPS'; } function panic() { delta = 0; } function begin() { } function end(fps) { if (fps < 25) { box.style.backgroundColor = 'black'; } else if (fps > 30) { box.style.backgroundColor = 'red'; } } function mainLoop(timestamp) { // Throttle the frame rate. if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) { requestAnimationFrame(mainLoop); return; } delta += timestamp - lastFrameTimeMs; lastFrameTimeMs = timestamp; begin(timestamp, delta); if (timestamp > lastFpsUpdate + 1000) { fps = 0.25 * framesThisSecond + 0.75 * fps; lastFpsUpdate = timestamp; framesThisSecond = 0; } framesThisSecond++; var numUpdateSteps = 0; while (delta >= timestep) { update(timestep); delta -= timestep; if (++numUpdateSteps >= 240) { panic(); break; } } draw(delta / timestep); end(fps); requestAnimationFrame(mainLoop); } requestAnimationFrame(mainLoop);
<div id="box" style="position: absolute; top: 10px; left: 10px; height: 50px; width: 50px; background-color: red;"></div> <div id="fpsDisplay" style="position: absolute; top: 70px; left: 10px;"></div>