Fijate si te sirve como orientación:
Código PHP:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
*{ margin:0; padding:0;}
#box{ width:50px; height:50px; position:absolute; background:#F00}
</style>
<script>
function cancelEvent(e){
if(e && e.preventDefault)
e.preventDefault();
else if(window.event)
window.event.returnValue=false;
}
function $(x){return document.getElementById(x);}
var keys=[];
keys['up'] = false;
keys['down'] = false;
keys['left'] = false;
keys['right'] = false;
function handleKeyDown(e) {
cancelEvent(e);
e=e || event;
var code=e.keyCode || e.which;
switch (code) {
case 38:
case 87:
keys['up'] = true;
break;
case 40:
case 83:
keys['down'] = true;
break;
case 39:
case 68:
keys['right'] = true;
break;
case 37:
case 65:
keys['left'] = true;
break;
}
}
function handleKeyUp(e) {
cancelEvent(e);
e=e || event;
var code=e.keyCode || e.which;
switch (code) {
case 38:
keys['up'] = false;
break;
case 40:
keys['down'] = false;
break;
case 39:
keys['right'] = false;
break;
case 37:
keys['left'] = false;
break;
}
}
function update(){
if (keys['left']) {
$('box').style.left=parseInt($('box').style.left ) -5+'px';
}
if (keys['right']) {
$('box').style.left=parseInt($('box').style.left) +5+'px';
}
if (keys['up']) {
$('box').style.top=parseInt($('box').style.top) -5+'px';
}
if (keys['down']) {
$('box').style.top=parseInt($('box').style.top) +5+'px';
}
setTimeout(update,80);
}
onload=function(){
document.onkeydown=handleKeyDown;
document.onkeyup=handleKeyUp;
$('box').style.left=$('box').style.top=0;
update();
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>