Arkanoid con dhtml

pedakitu · #1 (**permalink**) 02/04/2008, 02:58

Tengo que crear una especie de arkanoid (el mitico juego) con dhtml, para ello tengo que tener una imagen que rebote dentro de una capa por la parte izquierda, derecha y superior.

Mientras que por la parte inferior rebote con una barra la cual se mueva mediante las tecla z (izquierda) y x (derecha).

Si la imagen no rebota contra la barra, se vera un alert que diga game over.

Hasta ahora el codigo que llevo es el siguiente:

Código:

<html>
<head>

</head>
<body onLoad="ejecutar()">
<div id="azul" style="position:absolute;width:550;height:385;background-color:lightblue">

<div id="moviendose" style="position:absolute;">
<img src="carita.gif" alt="moviendose" />
</div>
<div id="barra" style='position:absolute;width:50;height:10;background-color:#f0f0f0;'></div>
</div>
<script type="text/javascript">
inicio = 0;
orden = 0;
nx = 1;
ny = 1;
velocidad = 1;

	document.onkeydown=teclado;
	document.onkeyup=teclado;


function ejecutar()
{
document.getElementById("moviendose").style.left = inicio;
document.getElementById("moviendose").style.top = orden;

ancho = document.getElementById('azul').offsetWidth;
alto = document.getElementById('azul').offsetHeight;
bajo = document.getElementById('moviendose').offsetHeight;
derecha = document.getElementById('moviendose').offsetWidth;

if ((orden + bajo) >= alto) ny = -1;
if ((inicio + derecha) >= ancho) nx = -1;
if (orden <= 0) ny = 1;
if (inicio <= 0) nx = 1;
inicio += nx;
orden += ny;

	// Mover barra
	barraAlto = barra.offsetHeight;
	barraAncho = barra.offsetWidth;
	barra.style.top=alto-barraAlto;
	barra.style.left=barraLeft;

	if (IZQDA) {barraLeft -= velocidad;}
	if (DRCHA) {barraLeft += velocidad;}
	if (barraLeft<1) {barraLeft = 1;}
	if (barraLeft+barraAncho)>ancho) {barraLeft = ancho-barraAncho-1;}


	setTimeout('ejecutar()',velocidad);
}


function teclado()
{
	KC = event.keyCode;
	IZQDA=false;
	DRCHA=false;
	switch (KC)
	{
		case 122: // Tecla Z
			IZQDA = true;
			break;
		case 120: // Tecla X
			DRCHA = true;
			break;
	}
}
</script>
</body> 
</html>

Y no consigo que funcione nada, me podeis echar una mano? gracias por adelantado.