<!DOCTYPE html>
<html>
<head>
<title>Simple Game</title>
<style>
#game {
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="game">
<div id="box"></div>
</div>
<script>
var box = document.getElementById("box");
var game = document.getElementById("game");
var x = 0;
var y = 0;
var speed = 5;
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37: // left arrow
x -= speed;
break;
case 38: // up arrow
y -= speed;
break;
case 39: // right arrow
x += speed;
break;
case 40: // down arrow
y += speed;
break;
}
box.style.left = x + "px";
box.style.top = y + "px";
}
</script>
</body>
</html>