<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 100px;
height: 100px;
background-color: #6ff;
position: absolute;
left: 0;
top: 0;
}
</style>
<div class="box"></div>
<script>
var oBox = document.querySelector('.box');
var maxLeft = document.documentElement.clientWidth - oBox.offsetWidth;
var maxTop = document.documentElement.clientHeight - oBox.offsetHeight;
document.onkeydown = function (e) {
var left = oBox.offsetLeft;
var top = oBox.offsetTop;
var ev = event || e;
var keyCode = ev.keyCode || ev.which;
switch (keyCode) {
case 37: left -= 10; break;
case 39: left += 10; break;
case 38: top -= 10; break;
case 40: top += 10; break;
}
if (left <= 0) {
left = 0;
}
if (left >= maxLeft) {
left = maxLeft;
}
if (top <= 0) {
top = 0;
}
if (top >= maxTop) {
top = maxTop;
}
oBox.style.top = top + 'px';
oBox.style.left = left + 'px';
}
</script>