SergeiGeek,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body,html{background:#FC9;height:100%}
div{height:100px;width:100px;background:#006400;position:relative;left:200px;top:200px}
</style>
<script>
window.onload = function() {
function move() {
if (b.left < 0 || b.left > document.documentElement.clientWidth - 100|| b.top < 0 || b.top > document.documentElement.clientHeight-100) {alert('game over!'); return}
for (var a in c)
if (c[a]) {
var d = b[a][0];
b[d] += b[a][1];
div.style[d] = b[d] + "px"
}
window.requestAnimationFrame(move)
}
var b = {
39: ["left", 3],
37: ["left", -3],
40: ["top", 3],
38: ["top", -3],
left: 200,
top: 200
},
c = {};
move();
var div = document.getElementById("show");
document.body.onkeydown = function(a) {
a = a || window.event;
a = a.keyCode;
a in b && (c = {}, c[a] = true);
return false
};
};
</script>
</head>
<body>
<div id="show" ></div>
</body>
</html>