bouncing box

by arcm111

HTML

<body bgcolor="blue">
    <div id="box"></div>
</body>

CSS

#box {
    width: 100px;
    height: 100px;
    background: green;
    position: absolute;
}

JavaScript

var start = null, d = document.getElementById("box");
var lb = window.innerHeight - d.offsetWidth;
var bb = window.innerWidth - d.offsetHeight;
var angle = Math.PI * Math.random() * 2;

function step(timestamp)
{
    if (start === null) start = timestamp;
    var progress = (timestamp - start) / 5;
    var left = d.offsetLeft, top = d.offsetTop;
    var x = (progress * Math.cos(angle)), px;
    var y = (progress * Math.sin(angle)), py;
    if (Math.ceil(x / lb) % 2 != 0) px = x % lb;
    else px = lb - (x % lb);
    if (Math.ceil(y / bb) % 2 != 0) py = y % bb;
    else py = bb - (y % bb);
    d.style.left = px + "px";
    d.style.top = py + "px";
    if (progress < 9000) requestAnimationFrame(step);
}

//requestAnimationFrame(step);