timdp/bouncy.html

## bouncy.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bouncy</title>
<style>
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: silver;
}
#content {
    margin: 0;
    padding: 0;
    border: 0;
    display: none;
}
</style>
<script>
window.onload = function() {
    var frame = document.getElementById("content");
    var velocity = 2;
    var fps = 30;
    var a = Math.PI / 6;

    //console.log(a / (2 * Math.PI) * 360);
    var minX = 0;
    var minY = 0;
    var maxX = document.body.clientWidth - frame.width;
    var maxY = document.body.clientHeight - frame.height;

    frame.style.position = "absolute";
    frame.style.left = (document.body.clientWidth - frame.width) / 2 + "px";
    frame.style.top = (document.body.clientHeight - frame.height) / 2 + "px";
    frame.style.display = "inherit";

    window.setInterval(function() {
        var x = parseInt(frame.style.left.replace("px", ""), 10);
        var y = parseInt(frame.style.top.replace("px", ""), 10);

        x += Math.cos(a) * velocity;
        y += Math.sin(a) * velocity;

        if (x < minX) {
            x = minX;
            a = (a < Math.PI)
                ? Math.PI - a
                : 3 * Math.PI - a;
            //console.log("< " + a / (2 * Math.PI) * 360);
        } else if (x > maxX) {
            x = maxX;
            a = (a < Math.PI)
                ? Math.PI - a
                : 3 * Math.PI - a;
            //console.log("> " + a / (2 * Math.PI) * 360);
        }

        if (y < minY) {
            y = minY;
            a = 2 * Math.PI - a;
            //console.log("^ " + a / (2 * Math.PI) * 360);
        } else if (y > maxY) {
            y = maxY;
            a = 2 * Math.PI - a;
            //console.log("v " + a / (2 * Math.PI) * 360);
        }

        frame.style.left = x + "px";
        frame.style.top = y + "px";
    }, 1000 / fps);
};
</script>
</head>
<body>
<iframe id="content" src="content.html"
frameborder="0" marginwidth="0" marginheight="0"
width="800" height="600"></iframe>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Bouncy</title>
	<style>
	html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: silver;
	}
	#content {
	margin: 0;
	padding: 0;
	border: 0;
	display: none;
	}
	</style>
	<script>
	window.onload = function() {
	var frame = document.getElementById("content");
	var velocity = 2;
	var fps = 30;
	var a = Math.PI / 6;

	//console.log(a / (2 * Math.PI) * 360);
	var minX = 0;
	var minY = 0;
	var maxX = document.body.clientWidth - frame.width;
	var maxY = document.body.clientHeight - frame.height;

	frame.style.position = "absolute";
	frame.style.left = (document.body.clientWidth - frame.width) / 2 + "px";
	frame.style.top = (document.body.clientHeight - frame.height) / 2 + "px";
	frame.style.display = "inherit";

	window.setInterval(function() {
	var x = parseInt(frame.style.left.replace("px", ""), 10);
	var y = parseInt(frame.style.top.replace("px", ""), 10);

	x += Math.cos(a) * velocity;
	y += Math.sin(a) * velocity;

	if (x < minX) {
	x = minX;
	a = (a < Math.PI)
	? Math.PI - a
	: 3 * Math.PI - a;
	//console.log("< " + a / (2 * Math.PI) * 360);
	} else if (x > maxX) {
	x = maxX;
	a = (a < Math.PI)
	? Math.PI - a
	: 3 * Math.PI - a;
	//console.log("> " + a / (2 * Math.PI) * 360);
	}

	if (y < minY) {
	y = minY;
	a = 2 * Math.PI - a;
	//console.log("^ " + a / (2 * Math.PI) * 360);
	} else if (y > maxY) {
	y = maxY;
	a = 2 * Math.PI - a;
	//console.log("v " + a / (2 * Math.PI) * 360);
	}

	frame.style.left = x + "px";
	frame.style.top = y + "px";
	}, 1000 / fps);
	};
	</script>
	</head>
	<body>
	<iframe id="content" src="content.html"
	frameborder="0" marginwidth="0" marginheight="0"
	width="800" height="600"></iframe>
	</body>
	</html>