JSFiddle - React, Tailwind, and code Playground
HTML
<div id="player"></div>
CSS
#player {
width: 50px;
height: 50px;
background-color: #F00;
position: absolute;
}
JavaScript
(function(){
var requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element){
setTimeout(function(){ callback((new Date).getTime()); }, 1000/60);
};
})();
var speed = 60; // pixels per second
var calc = speed/1000;
var player = document.getElementById('player');
var d = new Date();
var start_time = 0;
var pos = 0;
(function draw(time){
if(start_time == 0) { start_time = time }
var pos = (time - start_time)*calc;
player.style.left = pos + 'px';
requestAnimationFrame(draw);
})();
})();