Hay varios errores, como una etiqueta sin cerrar. Pero el principal error es que estás referenciando mal. Por ejemplo, barra=muevebarra.style. En explorer funciona, pero en otros navegadores hay que usar document.getElementById('muevebarra').style
Otro problema es la captura de teclas. Esta versión con unos pocos cambios funciona:
Código PHP:
<html>
<head>
<title>Arkanaoid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style tpe="text/css">
#fondo {width:550; height:385; background-image: url(foto1.gif); margin-left:-8px; margin-top:-15px;}
#imagen {position:absolute;}
</style>
<script language="JavaScript">
// Movimiento Balon
var fin=0;
balon = new Image();
balon.src="balon.gif";
barram = new Image();
barram.src="barra1.gif";
var x=0; //Coordenadas del balon
var y=0; //Coordenadas del balon
var direccionv=0;
var direccionh=0;
var ie = (document.all)? true:false;
function moverbalon()
{
if(fin)return;
barra=document.getElementById('muevebarra').style;
barra.xpos=parseInt(barra.left);
barra.ypos=parseInt(barra.top);
barra.activeleft=false;
barra.activeright=false;
barra.activeup=false;
barra.activedown=false;
if(x>=parseInt(document.getElementById("fondo").style.height)-balon.height)
{
direccionv=1;
}
if(y>parseInt(document.getElementById("fondo").style.width)-balon.width)
{
direccionh=1;
}
if(x<=0)
{
direccionv=0;
}
if(direccionv==0)
{
x+=5;
}
if(direccionv==1)
{
x-=5;
}
if(y<=0)
{
direccionh=0;
}
if(direccionh==0)
{
y+=5;
}
if(direccionh==1)
{
y-=5;
}
document.getElementById("imagen").style.top=x+"px" ;
document.getElementById("imagen").style.left=y+"px ";
setTimeout("moverbalon()",30);
devolverbalon()
}
// Movimiento Barra
function devolverbalon()
{
if(fin)return;
if(y>=barra.xpos && y<=(barra.xpos+100))
{
if(x>=barra.ypos-30)
{
direccionv=1;
}
}
else
{
if(x>barra.ypos)
{
fin=1;
alert("juego terminado")
x=0;
y=0;
}
}
}
function pulsartecla(event)
{
var tecla=event.keyCode || event.which;
if ((tecla==90) && !barra.activeleft)
{
barra.activeleft=true;
barra.activeright=false;
moverizquierda()
}
if ((tecla==88) && !barra.activeright)
{
barra.activeright=true;
barra.activeleft=false;
moverderecha()
}
}
function soltartecla(event)
{
var tecla=event.keyCode || event.which;
if (tecla==90)
{
barra.activeleft=false
}
if (tecla==88)
{
barra.activeright=false
}
}
function moverizquierda()
{
if (barra.xpos==5)
{
barra.activeleft=false;
}
else
{
if (barra.activeleft)
{
barra.xpos-=5
barra.left=barra.xpos
setTimeout("moverizquierda()",10)
}
}
}
function moverderecha()
{
if (barra.xpos==730)
{
barra.activeright=false;
}
else
{
if (barra.activeright)
{
barra.xpos+=5
barra.left=barra.xpos
setTimeout("moverderecha()",10)
}
}
}
onload=function(){
moverbalon();
self.focus();
document.onkeydown=pulsartecla;
document.onkeyup=soltartecla;
}
</script>
</head>
<body>
<div id="fondo" style="width: 800px; height: 850px;">
<img style="border:1px solid red" id="imagen" src="balon.gif">
<div id="muevebarra" style="position:absolute; left:350; top:750; width:70;">
<img style="border:1px solid red" src="barra1.gif" width=70 height=20>
</div>
</div>
</body>
</html>