HTML:
<div class="title">60 fps:</div>
<div class="div green" id="div7"></div>
<div class="title">30 fps:</div>
<div class="div red" id="div8"></div>
<div class="title">10 fps:</div>
<div class="div blue" id="div9"></div>
body {
padding: 20px;
}
.div {
width: 30px;
height: 20px;
position: relative;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
JS:
function moveDivTimeBasedImprove(div, fps) {
var left = 0;
var current = +new Date;
var previous = +new Date;
var dt = 1000 / 60;
var acc = 0;
var param = 1;
function loop() {
var current = +new Date;
var passed = current - previous;
previous = current;
acc += passed;
while(acc >= dt) {
update(dt);
acc -= dt;
}
draw();
}
function update (dt) {
left += param * (dt * 0.12);
if (left > 300) {
left = 300;
param = -1;
} else if (left < 0) {
left = 0;
param = 1;
}
}
function draw() {
div.style.left = left + "px";
}
setInterval(loop, 1000 / fps);
}
moveDivTimeBasedImprove(document.getElementById("div7"), 60);
moveDivTimeBasedImprove(document.getElementById("div8"), 30);
moveDivTimeBasedImprove(document.getElementById("div9"), 10);