Ranisima english
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>La Ranísima © (by Joan Alba Maldonado)</title>
<!-- (c) La Ranisima - Programa realizado por Joan Alba Maldonado (granvino@granvino.com). Prohibido publicar, reproducir o modificar sin citar expresamente al autor original. -->
<script language="JavaScript1.2" type="text/javascript">
<!--
//(c) La Ranisima - Programa realizado por Joan Alba Maldonado (granvino@granvino.com). Prohibido publicar, reproducir o modificar sin citar expresamente al autor original.
//Se crean las imagenes de la animacion del personaje y de los enemigos, de forma global:
if (document.images)
{
//Se crean los objetos:
var personaje_imagen1 = new Image(40, 40);
var personaje_imagen2 = new Image(40, 40);
var enemigo1_imagen1 = new Image(40, 40);
var enemigo1_imagen2 = new Image(40, 40);
var enemigo2_imagen1 = new Image(40, 40);
var enemigo2_imagen2 = new Image(40, 40);
var enemigo3_imagen1 = new Image(40, 40);
var enemigo3_imagen2 = new Image(40, 40);
var enemigo4_imagen1 = new Image(40, 40);
var enemigo4_imagen2 = new Image(40, 40);
var enemigo5_imagen1 = new Image(40, 40);
var enemigo5_imagen2 = new Image(40, 40);
var enemigo6_imagen1 = new Image(40, 40);
var enemigo6_imagen2 = new Image(40, 40);
var explosion_imagen = new Image(40, 40);
//Se les asigna una imagen:
personaje_imagen1.src = "imagenes/rana1.gif";
personaje_imagen2.src = "imagenes/rana2.gif";
enemigo1_imagen1.src = "imagenes/mosca1.gif";
enemigo1_imagen2.src = "imagenes/mosca2.gif";
enemigo2_imagen1.src = "imagenes/mosca1.gif";
enemigo2_imagen2.src = "imagenes/mosca2.gif";
enemigo3_imagen1.src = "imagenes/mosca1.gif";
enemigo3_imagen2.src = "imagenes/mosca2.gif";
enemigo4_imagen1.src = "imagenes/mosca1.gif";
enemigo4_imagen2.src = "imagenes/mosca2.gif";
enemigo5_imagen1.src = "imagenes/mosca1.gif";
enemigo5_imagen2.src = "imagenes/mosca2.gif";
enemigo6_imagen1.src = "imagenes/mosca1.gif";
enemigo6_imagen2.src = "imagenes/mosca2.gif";
explosion_imagen.src = "imagenes/boom.gif";
}
//Se define la variable para que no se cambie la imagen del personaje, a no ser que se ejecute movimiento:
var cambiar_imagen = false;
//Se define la variable que guardara el primer evento que se ejecute (para que no se ejecute onKeyDown y onKeyPress a la vez en Firefox, ya que causaria demasiada velocidad de movimiento):
var primer_evento = "";
//Variable que setea el modo Dios (invencible), para el periodo que transcurre desde una colision hasta el reposicionamiento (para que solo reste una vida):
var modo_dios = false;
//Variable que setea el numero de disparos que se han ejecutado y siguen en pantalla:
var numero_disparos = 0;
//Variable que setea el numero maximo de disparos permitido mientras esten en pantalla:
var numero_disparos_tope = 5;
//El numero de milisegundos que deben pasar entre disparo y disparo:
var milisegundos_repeticion_disparo = 200;
//La velocidad de los disparos:
var velocidad_disparos = 30;
//Variable que setea el bloqueo del disparo (para que no se dispare mas de lo debido, cuando el numero de disparos llega al tope o para que no se dispare muy deprisa):
var bloquear_disparo = false;
//Se define la direccion de inicio de los enemigos (tanto horizontal como vertical):
var direccion_enemigos_x = "derecha"; //Direccion horizontal de inicio.
var direccion_enemigos_y = "abajo"; //Direccion vertical de inicio.
//Se define la velocidad inicial de los enemigos:
var velocidad_enemigos_inicial = 1050; //Esta es constante
var velocidad_enemigos = velocidad_enemigos_inicial; //Esta se ira decrementando cada vez que se pase de nivel (entre mas baja mas rapido).
//Se define el desplazamiento inicial de los enemigos (cuantos pixels se desplazan por cada movimiento):
var desplazamiento_enemigos_inicial = 25; //Esta es una constante.
var desplazamiento_enemigos = desplazamiento_enemigos_inicial; //Esta se ira incrementando cada vez que se pase de nivel.
//Define la variable de enemigos existentes, para los distintos niveles (cuantos tipos distintos hay):
var enemigos_existentes = 7;
//Define la variable para saber que enemigos utilizar al principio (al cambiar de nivel se va incrementando, hasta alcanzar el numero de enemigos existentes y se pone otra vez a 1):
var enemigos_nivel = 1;
//Se define el numero de vidas inicial, para el personaje:
var vidas_iniciales = 3; //Esta es constante
var vidas = vidas_iniciales; //Esta ira restando cada vez que se pierda una vida.
//Se define el numero de nivel inicial (numero de pantalla):
var nivel = 1;
//Se define la variable que contendra la puntuacion:
var puntuacion = 0;
//Se define el contador de enemigos matados (en cada nivel se pondra a cero):
var enemigos_matados = 0;
//Se definen las variables para hacer los setInterval y setTimeout, para que no den error al ejecutar clearInterval y clearTimeout la primera vez:
var animacion_enemigo1 = "";
var animacion_enemigo2 = "";
var animacion_enemigo3 = "";
var animacion_enemigo4 = "";
var animacion_enemigo5 = "";
var animacion_enemigo6 = "";
var movimiento_enemigo1 = "";
var movimiento_enemigo2 = "";
var movimiento_enemigo3 = "";
var movimiento_enemigo4 = "";
var movimiento_enemigo5 = "";
var movimiento_enemigo6 = "";
var movimiento_alas1 = "";
var movimiento_alas2 = "";
var balanceo_horizontal1 = "";
var balanceo_horizontal2 = "";
var balanceo_vertical1 = "";
var balanceo_vertical2 = "";
//Funcion que inicia el juego:
function iniciar_juego()
{
//Se setea el numero de vidas a vidas_iniciales:
vidas = vidas_iniciales;
//Se setea el numero de nivel otra vez a cero:
nivel = 1;
//Se setea la puntuacion a cero:
puntuacion = 0;
//Se setean los enemigos matados a cero:
enemigos_matados = 0;
//Se setea la velocidad de los enemigos a la inicial:
velocidad_enemigos = velocidad_enemigos_inicial;
//Se setea los pixels de desplazamiento del enemigo a su estado inicial:
desplazamiento_enemigos = desplazamiento_enemigos_inicial;
//Se indica el numero de vidas en el panel de estado:
actualizar_barra_estado();
//Se setea la variable que indica que enemigos mostrar, para que se muestre el primer enemigo:
enemigos_nivel = 1;
//Se setean las imagenes de los enemigos a los primeros:
enemigo1_imagen1.src = "imagenes/mosca1.gif";
enemigo1_imagen2.src = "imagenes/mosca2.gif";
enemigo2_imagen1.src = "imagenes/mosca1.gif";
enemigo2_imagen2.src = "imagenes/mosca2.gif";
enemigo3_imagen1.src = "imagenes/mosca1.gif";
enemigo3_imagen2.src = "imagenes/mosca2.gif";
enemigo4_imagen1.src = "imagenes/mosca1.gif";
enemigo4_imagen2.src = "imagenes/mosca2.gif";
enemigo5_imagen1.src = "imagenes/mosca1.gif";
enemigo5_imagen2.src = "imagenes/mosca2.gif";
enemigo6_imagen1.src = "imagenes/mosca1.gif";
enemigo6_imagen2.src = "imagenes/mosca2.gif";
//Hacer visibles a todos los enemigos (por si acaso estuviera alguno invisible de una partida anterior):
for (x=1; x<=6; x++)
{
//Hace visible al enemigo X:
document.getElementById("enemigo"+x).style.visibility = "visible";
}
//Se oculta el texto de "tu estas aqui", si aun esta visible, en 3000 milisegundos (3 segundos) :
if (document.getElementById('tu_estas_aqui').style.visibility == "visible") { setTimeout("document.getElementById('tu_estas_aqui').style.visibility = 'hidden';", 3000); }
//Posiciona los personajes:
posicionar_personajes();
}
//Funcion que posiciona los personajes (al inicio del juego y despues de una vida):
function posicionar_personajes()
{
//Inicia los enemigos:
iniciar_enemigos();
//Inicia el personaje:
iniciar_personaje();
}
//Funcion que inicia al personaje:
function iniciar_personaje()
{
document.getElementById("personaje").style.left = "250px";
document.getElementById("personaje").style.top = "250px";
}
//Funcion que inicia a los enemigos:
function iniciar_enemigos()
{
//Posicionar enemigos en sus posiciones iniciales:
document.getElementById("enemigo1").style.left = "120px";
document.getElementById("enemigo1").style.top = "120px";
document.getElementById("enemigo2").style.left = "450px";
document.getElementById("enemigo2").style.top = "120px";
document.getElementById("enemigo3").style.left = "350px";
document.getElementById("enemigo3").style.top = "120px";
document.getElementById("enemigo4").style.left = "450px";
document.getElementById("enemigo4").style.top = "20px";
document.getElementById("enemigo5").style.left = "150px";
document.getElementById("enemigo5").style.top = "50px";
document.getElementById("enemigo6").style.left = "250px";
document.getElementById("enemigo6").style.top = "90px";
//Matar los intervalos de animacion y de posicionamiento anteriores, si existen (con clearInterval):
clearInterval(animacion_enemigo1, 30);
clearInterval(animacion_enemigo2, 30);
clearInterval(animacion_enemigo3, 30);
clearInterval(animacion_enemigo4, 30);
clearInterval(animacion_enemigo5, 30);
clearInterval(animacion_enemigo6, 30);
clearInterval(movimiento_enemigo1, 30);
clearInterval(movimiento_enemigo2, 30);
clearInterval(movimiento_enemigo3, 30);
clearInterval(movimiento_enemigo4, 30);
clearInterval(movimiento_enemigo5, 30);
clearInterval(movimiento_enemigo6, 30);
//Animar enemigos:
setTimeout("var animacion_enemigo1 = setInterval('animar_enemigo(1);', 1000)", 100);
setTimeout("var animacion_enemigo2 = setInterval('animar_enemigo(2);', 1000)", 100);
setTimeout("var animacion_enemigo3 = setInterval('animar_enemigo(3);', 1000)", 100);
setTimeout("var animacion_enemigo4 = setInterval('animar_enemigo(4);', 1000)", 100);
setTimeout("var animacion_enemigo5 = setInterval('animar_enemigo(5);', 1000)", 100);
setTimeout("var animacion_enemigo6 = setInterval('animar_enemigo(6);', 1000)", 100);
//Mover enemigos:
setTimeout("movimiento_enemigo1 = setInterval('mover_enemigo(1);', velocidad_enemigos);", 100);
setTimeout("movimiento_enemigo2 = setInterval('mover_enemigo(2);', velocidad_enemigos);", 100);
setTimeout("movimiento_enemigo3 = setInterval('mover_enemigo(3);', velocidad_enemigos);", 100);
setTimeout("movimiento_enemigo4 = setInterval('mover_enemigo(4);', velocidad_enemigos);", 100);
setTimeout("movimiento_enemigo5 = setInterval('mover_enemigo(5);', velocidad_enemigos);", 100);
setTimeout("movimiento_enemigo6 = setInterval('mover_enemigo(6);', velocidad_enemigos);", 100);
//Detectar colision:
setInterval("detectar_colision(1);", 1);
setInterval("detectar_colision(2);", 1);
setInterval("detectar_colision(3);", 1);
setInterval("detectar_colision(4);", 1);
setInterval("detectar_colision(5);", 1);
setInterval("detectar_colision(6);", 1);
}
//Funcion para animar un enemigo:
function animar_enemigo(numero_enemigo)
{
//Se matan todos los setTimeout anteriores, con la ayuda de clearTimeout:
clearTimeout(movimiento_alas1, 30);
clearTimeout(movimiento_alas2, 30);
clearTimeout(balanceo_horizontal1, 30);
clearTimeout(balanceo_horizontal2, 30);
clearTimeout(balanceo_vertical1, 30);
clearTimeout(balanceo_vertical2, 30);
//Se llama a la funcion que anima al enemigo en si (despues de 20 milisegundos para que no interfiera con los clearTimeout de arriba):
setTimeout("animacion_enemigo("+numero_enemigo+");", 100);
}
//Funcion que contiene la animacion del enemigo:
function animacion_enemigo(numero_enemigo)
{
//Se mueven sus alas (se alternan las imagenes):
var movimiento_alas1 = setTimeout("document.images['enemigo"+numero_enemigo+"_imagen'].src = enemigo"+numero_enemigo+"_imagen1.src;", 20);
var movimiento_alas2 = setTimeout("document.images['enemigo"+numero_enemigo+"_imagen'].src = enemigo"+numero_enemigo+"_imagen2.src;", 400);
//Se anima (mueve) horizontalmente:
var balanceo_horizontal1 = setTimeout("document.getElementById('enemigo"+numero_enemigo+"').style.left = parseInt(document.getElementById('enemigo"+numero_enemigo+"').style.left) + 5 + 'px';", 20);
var balanceo_horizontal2 = setTimeout("document.getElementById('enemigo"+numero_enemigo+"').style.left = parseInt(document.getElementById('enemigo"+numero_enemigo+"').style.left) - 5 + 'px';", 400);
//Se anima (mueve) verticalmente:
var balanceo_vertical1 = setTimeout("document.getElementById('enemigo"+numero_enemigo+"').style.top = parseInt(document.getElementById('enemigo"+numero_enemigo+"').style.top) + 5 + 'px';", 20);
var balanceo_vertical2 = setTimeout("document.getElementById('enemigo"+numero_enemigo+"').style.top = parseInt(document.getElementById('enemigo"+numero_enemigo+"').style.top) - 5 + 'px';", 400);
}
//Funcion que mueve al enemigo:
function mover_enemigo(numero_enemigo)
{
//Define la variable que calcula si se ha tocado el bode lateral (de momento, no):
var tocado_borde_lateral = false;
//Se calculan los topes (bordes) para saber si se alcanzan:
var borde_horizontal_derecho = 500 - 40 - desplazamiento_enemigos; //borde = 500 - 40 - desplazamiento_enemigos
var borde_horizontal_izquierdo = 0 + desplazamiento_enemigos; //borde = 0 + desplazamiento_enemigos
var borde_vertical_inferior = 500 - 40 - desplazamiento_enemigos; //borde = 500 - 40 - desplazamiento_enemigos
var borde_vertical_superior = 0 + desplazamiento_enemigos; //borde = 0 + desplazamiento_enemigos
//Si se ha alcanzado el borde derecho, el enemigo ira hacia la izquierda:
if (parseInt(document.getElementById("enemigo"+numero_enemigo).style.left) >= borde_horizontal_derecho)
{
//La direccion horizontal sera hacia la izquierda:
direccion_enemigos_x = "izquierda";
//Se setea la variable como que se ha tocado borde:
tocado_borde_lateral = true;
}
//...y si no, si se ha alcanzado el borde izquierdo, el enemigo ira hacia la derecha:
else if (parseInt(document.getElementById("enemigo"+numero_enemigo).style.left) <= borde_horizontal_izquierdo)
{
//La direccion horizontal sera hacia la derecha:
direccion_enemigos_x = "derecha";
//Se setea la variable como que se ha tocado borde:
tocado_borde_lateral = true;
}
//Si se ha alcanzado el borde inferior, el enemigo ira hacia arriba:
if (parseInt(document.getElementById("enemigo"+numero_enemigo).style.top) >= borde_vertical_inferior)
{
//La direccion vertical sera hacia arriba:
direccion_enemigos_y = "arriba";
}
//...y si no, si se ha alcanzado el borde izquierdo, el enemigo ira hacia la derecha:
else if (parseInt(document.getElementById("enemigo"+numero_enemigo).style.top) <= borde_vertical_superior)
{
//La direccion vertical sera hacia abajo:
direccion_enemigos_y = "abajo";
}
//Si la direccion horizontal es "izquierda":
if (direccion_enemigos_x == "izquierda")
{
//Mueve el enemigo hacia la izquierda:
document.getElementById("enemigo"+numero_enemigo).style.left = parseInt(document.getElementById("enemigo"+numero_enemigo).style.left) - desplazamiento_enemigos + "px";
}
//...y si la direccion horizontal es "derecha":
else if (direccion_enemigos_x == "derecha")
{
//Mueve el enemigo hacia la derecha:
document.getElementById("enemigo"+numero_enemigo).style.left = parseInt(document.getElementById("enemigo"+numero_enemigo).style.left) + desplazamiento_enemigos + "px";
}
//Si la direccion vertical es "arriba" y ha tocado el borde lateral:
if (direccion_enemigos_y == "arriba" && tocado_borde_lateral)
{
//Mueve el enemigo hacia arriba:
document.getElementById("enemigo"+numero_enemigo).style.top = parseInt(document.getElementById("enemigo"+numero_enemigo).style.top) - desplazamiento_enemigos + "px";
}
//...y si la direccion vertical es "abajo" y ha tocado el borde lateral:
else if (direccion_enemigos_y == "abajo" && tocado_borde_lateral)
{
//Mueve el enemigo hacia abajo:
document.getElementById("enemigo"+numero_enemigo).style.top = parseInt(document.getElementById("enemigo"+numero_enemigo).style.top) + desplazamiento_enemigos + "px";
}
}
//Funcion que detecta una colision del personaje contra un enemigo:
function detectar_colision (numero_enemigo)
{
//Si el enemigo no esta visible quiere decir que esta muerto y por lo tanto no puede matarnos, asi que salimos de la funcion:
if (document.getElementById("enemigo"+numero_enemigo).style.visibility != "visible") { return; }
//Detectar posicion del personaje:
personaje_pos_x = parseInt(document.getElementById("personaje").style.left);
personaje_pos_y = parseInt(document.getElementById("personaje").style.top);
//Detectar posicion del enemigo:
enemigo_pos_x = parseInt(document.getElementById("enemigo"+numero_enemigo).style.left);
enemigo_pos_y = parseInt(document.getElementById("enemigo"+numero_enemigo).style.top);
//Calcular si coinciden horizontalmente:
if (personaje_pos_x + 40 > enemigo_pos_x && personaje_pos_x < enemigo_pos_x || personaje_pos_x < enemigo_pos_x + 40 && personaje_pos_x > enemigo_pos_x)
{
//Calcular si tambien coinciden verticalmente:
if (personaje_pos_y < enemigo_pos_y + 40 && personaje_pos_y > enemigo_pos_y || personaje_pos_y + 40 > enemigo_pos_y && personaje_pos_y < enemigo_pos_y)
{
//Si esta el modo Dios activado, sale de la funcion (para no restar vidas):
if (modo_dios) { return; }
//Como han chocado, se quita una vida:
vidas -= 1;
//Se setea el modo Dios, para que no puedan matar al personaje durante este periodo (hasta que se posicione otra vez):
modo_dios = true;
//Se muestra en el ID del personaje una explosion a los 300 milisegundos (con z-index a 40), y a los 3000 milisegundos (2700 despues) se vuelve al personaje normal (con z-index original):
setTimeout("document.images['personaje_imagen'].src = explosion_imagen.src; document.getElementById('personaje').style.zIndex = 40;", 210);
setTimeout("document.images['personaje_imagen'].src = personaje_imagen1.src; document.getElementById('personaje').style.zIndex = 5;", 3000);
//Si las vidas es menor a 0, se presenta "Game Over" y se sale de la funcion:
if (vidas < 0)
{
//Presenta "Game Over" en el panel de estado:
actualizar_barra_estado();
//Cancelar todos los disparos:
for (x=1; x<=numero_disparos_tope; x++)
{
//Elimina de la pantalla el disparo X:
eliminar_disparo(x);
}
//Alerta de "Game Over" (despues de un tiempo, ya que si no no daria tiempo a la rana a cambiar a "explosion"):
setTimeout("alert('Game Over. Click on button to play again.');", 300);
//Se inicia el juego otra vez y se quita el modo Dios, al esperar 3000 milisegundos (3 segundos):
setTimeout("iniciar_juego(); modo_dios = false;", 3000);
//Sale de la funcion:
return;
}
//Se indican las vidas en el panel de estado:
actualizar_barra_estado();
//Se hace visible el ID "tu_estas_aqui" y se indica en el que se ha perdido una vida:
document.getElementById("tu_estas_aqui").style.visibility = "visible";
document.getElementById("tu_estas_aqui").innerHTML = "A live less";
//Se indican las vidas restantes:
if (vidas == 1) { setTimeout("document.getElementById('tu_estas_aqui').innerHTML = '"+vidas+" live left';", 800); } //Si queda una vida, la frase es en singular.
else if (vidas <= 0) { setTimeout("document.getElementById('tu_estas_aqui').innerHTML = 'Last live';", 800); } //Si quedan cero vidas, se advierte de que es la ultima vida.
else { setTimeout("document.getElementById('tu_estas_aqui').innerHTML = '"+vidas+" lives left';", 800); } //...y si no, se indica normalmente, en plural.
//Se esconde el mensaje de las vidas restantes (se hace invisible el ID "tu_estas_aqui"):
setTimeout("document.getElementById('tu_estas_aqui').style.visibility = 'hidden';", 3000);
//Se reinician posiciones tanto de personajes como de enemigos y se quita el modo Dios:
setTimeout("posicionar_personajes(); modo_dios = false;", 3000);
}
}
}
//Funcion que dispara:
function disparar()
{
//Si esta seteada la variable para que no vuelva a disparar, salir de la funcion:
if (bloquear_disparo) { return; }
//Impedir disparar si el personaje esta demasiado arriba (si no queda espacio para un disparo, que tiene un largo de 15 pixels):
if (parseInt(document.getElementById("personaje").style.top) <= 15) { return; }
//Si el numero de disparos es inferior a cero, se setea a cero (por si acaso se han eliminado mas de lo debido):
if (numero_disparos < 0) { numero_disparos = 0; }
//Calcular si ya hay en pantalla (ya se han lanzado) el numero maximo de disparos:
if (numero_disparos > numero_disparos_tope)
{
//Si el ultimo disparo en ejecutarse (que es el 5) esta hidden, se setea a cero y se sale de la funcion:
if (document.getElementById("disparo_5").style.visibility && document.getElementById("disparo_5").style.visibility == "hidden")
{
numero_disparos = 0; //Se setea el numero de disparos a cero.
bloquear_disparo = false; //Se quita el bloqueo de disparar.
return; //Sale de la funcion.
}
//Se pone el numero de disparos al limite maximo, por si a caso lo a sobrepasado:
numero_disparos = numero_disparos_tope;
numero_disparos = 0;
//Se elimina el desbloqueo automatico del disparo, por si acaso:
clearTimeout(quitar_bloqueo_disparo);
//Setear variable para que no vuelva a disparar hasta que no hayan menos disparos en pantalla (despues de mas milisegundos que el desbloqueo del disparo, por si acaso):
setTimeout("bloquear_disparo = true;", milisegundos_repeticion_disparo);
//Se sale de la funcion:
return;
}
//Incrementar la variable que cuenta el numero de disparos que hay en pantalla (que se han ejecutado):
numero_disparos++;
//Si el numero de disparos es superior al tope, se situa en el maximo posible:
if (numero_disparos > numero_disparos_tope) { numero_disparos = numero_disparos_tope; }
//Si el estado del disparo no es invisible, es que aun esta en pantalla y sale de funcion:
if (document.getElementById("disparo_"+numero_disparos).style.visibility && document.getElementById("disparo_"+numero_disparos).style.visibility == "visible") { numero_disparos--; return; }
//Situar el DIV del disparo en la posicion correcta (respecto al personaje):
document.getElementById("disparo_"+numero_disparos).style.left = parseInt(document.getElementById("personaje").style.left) + 20 + "px";
document.getElementById("disparo_"+numero_disparos).style.top = parseInt(document.getElementById("personaje").style.top) - 20 + "px";
//Hace visible el DIV que contiene el disparo:
document.getElementById("disparo_"+numero_disparos).style.visibility = "visible";
//Hacer el movimiento del disparo (selecciona segun el numero de disparo):
switch (numero_disparos)
{
case 1:
movimiento_disparo1 = setInterval("mover_disparo(1, parseInt(document.getElementById('disparo_1').style.left), parseInt(document.getElementById('disparo_1').style.top));", velocidad_disparos);
break;
case 2:
movimiento_disparo2 = setInterval("mover_disparo(2, parseInt(document.getElementById('disparo_2').style.left), parseInt(document.getElementById('disparo_2').style.top));", velocidad_disparos);
break;
case 3:
movimiento_disparo3 = setInterval("mover_disparo(3, parseInt(document.getElementById('disparo_3').style.left), parseInt(document.getElementById('disparo_3').style.top));", velocidad_disparos);
break;
case 4:
movimiento_disparo4 = setInterval("mover_disparo(4, parseInt(document.getElementById('disparo_4').style.left), parseInt(document.getElementById('disparo_4').style.top));", velocidad_disparos);
break;
case 5:
movimiento_disparo5 = setInterval("mover_disparo(5, parseInt(document.getElementById('disparo_5').style.left), parseInt(document.getElementById('disparo_5').style.top));", velocidad_disparos);
break;
default:
numero_disparos--; //Se vuelven a decrementar los disparos, por si acaso.
return;
break;
}
//Se bloquean los disparos hasta dentro de los milisegundos indicados:
bloquear_disparo = true;
quitar_bloqueo_disparo = setTimeout("bloquear_disparo = false;", milisegundos_repeticion_disparo);
}
//Funcion que elimina un disparo:
function eliminar_disparo(numero_disparo)
{
//Se setea la variable para saber si se ha eliminado un disparo:
var se_ha_eliminado_disparo = false;
//Si el disparo que se intenta eliminar ya esta eliminado, sale de la funcion:
if (document.getElementById("disparo_"+numero_disparo).style.visibility == "hidden") { return; }
//Elimina el movimiento del disparo enviado y pone invisible su DIV (selecciona segun el numero de disparo):
switch (numero_disparo)
{
case 1: //En caso de que el disparo sea el 1:
clearInterval(movimiento_disparo1); //Elimina el intervalo.
document.getElementById("disparo_1").style.visibility = "hidden"; //Esconde el DIV que contiene el disparo.
se_ha_eliminado_disparo = true; //Se setea la variable para saber que se ha eliminado el disparo.
break; //Sale del switch.
case 2:
clearInterval(movimiento_disparo2);
document.getElementById("disparo_2").style.visibility = "hidden";
se_ha_eliminado_disparo = true;
break;
case 3:
clearInterval(movimiento_disparo3);
document.getElementById("disparo_3").style.visibility = "hidden";
se_ha_eliminado_disparo = true;
break;
case 4:
clearInterval(movimiento_disparo4);
document.getElementById("disparo_4").style.visibility = "hidden";
se_ha_eliminado_disparo = true;
break;
case 5:
clearInterval(movimiento_disparo5);
document.getElementById("disparo_5").style.visibility = "hidden";
numero_disparos = 0; //Como se ha eliminado el ultimo disparo, se setea a cero el contador de disparos.
se_ha_eliminado_disparo = true;
break;
default:
se_ha_eliminado_disparo = false;
break;
}
//Calcula si se ha eliminado algun disparo en la funcion:
if (se_ha_eliminado_disparo)
{
//Resta una unidad al numero de disparos que hay en pantalla y se han ejecutado.
numero_disparos--;
//Desbloquea los disparos (para que se pueda disparar):
bloquear_disparo = false;
}
}
//Funcion que realiza el movimiento del disparo:
function mover_disparo(numero_disparo, disparo_pos_x, disparo_pos_y)
{
//Mueve el disparo 3 pixels hacia arriba y si alcanza el borde, elimina el disparo (selecciona segun el numero de disparo):
switch (numero_disparo)
{
case 1:
if (parseInt(document.getElementById("disparo_1").style.top) <= 15) { eliminar_disparo(1); return; } //Si su posicion es mas arriba de lo que debe, se elimina el disparo de la pantalla y se sale de la funcion.
document.getElementById("disparo_1").style.top = disparo_pos_y - 3 + "px"; //Si no, se mueve el disparo.
break;
case 2:
if (parseInt(document.getElementById("disparo_2").style.top) <= 15) { eliminar_disparo(2); return; }
document.getElementById("disparo_2").style.top = disparo_pos_y - 3 + "px";
break;
case 3:
if (parseInt(document.getElementById("disparo_3").style.top) <= 15) { eliminar_disparo(3); return; }
document.getElementById("disparo_3").style.top = disparo_pos_y - 3 + "px"; break;
case 4:
if (parseInt(document.getElementById("disparo_4").style.top) <= 15) { eliminar_disparo(4); return; }
document.getElementById("disparo_4").style.top = disparo_pos_y - 3 + "px"; break;
case 5:
if (parseInt(document.getElementById("disparo_5").style.top) <= 15) { eliminar_disparo(5); return; }
document.getElementById("disparo_5").style.top = disparo_pos_y - 3 + "px"; break;
default: break;
}
//Calcular si ha colisionado con un enemigo:
detectar_colision_disparo(disparo_pos_x, disparo_pos_y, numero_disparo);
}
//Funcion que calcula si un disparo choca con un enemigo:
function detectar_colision_disparo (disparo_pos_x, disparo_pos_y, numero_disparo)
{
//Variable contador de numero de enemigo:
var x = 1;
//Bucle que detecta la colision del disparo enviado a la funcion con todos los enemigos (en total 6):
while (x <= 6)
{
//Calcular si en la posicion horizontal del disparo hay el enemigo X:
if (disparo_pos_x >= parseInt(document.getElementById("enemigo"+x).style.left) && disparo_pos_x <= parseInt(document.getElementById("enemigo"+x).style.left) + 40)
{
//Calcular si en la posicion vertical del disparo hay el enemigo X:
if (disparo_pos_y >= parseInt(document.getElementById("enemigo"+x).style.top) && disparo_pos_y <= parseInt(document.getElementById("enemigo"+x).style.top) + 40)
{
//Se calcula si el enemigo este visible (si no esta visible es que ya se ha matado antes):
if (document.getElementById("enemigo"+x).style.visibility == "visible")
{
//Se incrementa el contador de enemigos matados:
enemigos_matados++;
//Restar un disparo en pantalla:
eliminar_disparo(numero_disparo);
//Como coinciden disparo y enemigo X, se mata al enemigo:
matar_enemigo(x);
//Se sale del bucle, para que solo se pueda matar a un enemigo por disparo:
break;
}
}
}
//Se incrementa el contador:
x++;
}
}
//Funcion que mata a un enemigo:
function matar_enemigo(numero_enemigo)
{
//Matar enemigo (lo esconde de la pantalla):
document.getElementById("enemigo"+numero_enemigo).style.visibility = "hidden";
//Da puntos (+25):
puntuacion += 25;
//Muestra la barra de estado con la nueva informacion:
actualizar_barra_estado();
//Si ya no quedan mas, pasar de nivel:
if (enemigos_matados >= 6) { pasar_nivel(); }
}
function pasar_nivel()
{
//Si todavia no se han matado dos los enemigos, sale de la funcion:
if (enemigos_matados < 6) { return; }
//Se setea el contador de enemigos matados a cero:
enemigos_matados = 0;
//Se incrementa el numero de nivel en una unidad:
nivel++;
//Da puntos (+100):
puntuacion += 100;
//Cancelar todos los disparos:
for (x=1; x<=numero_disparos_tope; x++)
{
//Elimina de la pantalla el disparo X:
eliminar_disparo(x);
}
//Se felicita por pasar de nivel:
//alert("Felicidades. Has pasado al nivel "+nivel);
//Se representa en la barra de estado los nuevos parametros:
actualizar_barra_estado();
//Se representa en la barra de estado el numero de nivel, durante 3000 milisegundos (3 segundos) y luego se esconde:
document.getElementById("tu_estas_aqui").style.visibility = "visible";
document.getElementById("tu_estas_aqui").innerHTML = "Level "+nivel;
setTimeout("document.getElementById('tu_estas_aqui').style.visibility = 'hidden';", 3000);
//Hacer visibles a todos los enemigos:
for (x=1; x<=6; x++)
{
//Hace visible al enemigo X:
document.getElementById("enemigo"+x).style.visibility = "visible";
}
//Incrementar velocidad de los enemigos:
velocidad_enemigos -= 5;
//Si el resto de dividir el nivel entre 5 es igual a 0 (se han pasado 5 niveles mas), incrementar tambien el espacio de desplazamiento de los enemigos:
if (nivel % 5 == 0 && nivel > 1)
{
//Ahora los enemigos se desplazaran 5 pixels mas en cada movimiento:
desplazamiento_enemigos += 5;
//Da puntos (+200):
puntuacion += 200;
}
//Incrementa la variable para saber que enemigos mostrar:
enemigos_nivel++;
//Si el contador para saber que enemigos representar es mayor a los enemigos existentes, vuelve a su estado inicial:
if (enemigos_nivel > enemigos_existentes) { enemigos_nivel = 1; }
//Si se debe representar los primeros enemigos:
if (enemigos_nivel == 1)
{
//Se representan como enemigos las moscas:
enemigo1_imagen1.src = "imagenes/mosca1.gif";
enemigo1_imagen2.src = "imagenes/mosca2.gif";
enemigo2_imagen1.src = "imagenes/mosca1.gif";
enemigo2_imagen2.src = "imagenes/mosca2.gif";
enemigo3_imagen1.src = "imagenes/mosca1.gif";
enemigo3_imagen2.src = "imagenes/mosca2.gif";
enemigo4_imagen1.src = "imagenes/mosca1.gif";
enemigo4_imagen2.src = "imagenes/mosca2.gif";
enemigo5_imagen1.src = "imagenes/mosca1.gif";
enemigo5_imagen2.src = "imagenes/mosca2.gif";
enemigo6_imagen1.src = "imagenes/mosca1.gif";
enemigo6_imagen2.src = "imagenes/mosca2.gif";
}
//...y si se deben representar los segundos enemigos:
else if (enemigos_nivel == 2)
{
//Se representan los murcielagos:
enemigo1_imagen1.src = "imagenes/murci1.gif";
enemigo1_imagen2.src = "imagenes/murci2.gif";
enemigo2_imagen1.src = "imagenes/murci1.gif";
enemigo2_imagen2.src = "imagenes/murci2.gif";
enemigo3_imagen1.src = "imagenes/murci1.gif";
enemigo3_imagen2.src = "imagenes/murci2.gif";
enemigo4_imagen1.src = "imagenes/murci1.gif";
enemigo4_imagen2.src = "imagenes/murci2.gif";
enemigo5_imagen1.src = "imagenes/murci1.gif";
enemigo5_imagen2.src = "imagenes/murci2.gif";
enemigo6_imagen1.src = "imagenes/murci1.gif";
enemigo6_imagen2.src = "imagenes/murci2.gif";
}
//...y si se deben representar los terceros enemigos:
else if (enemigos_nivel == 3)
{
//Se representan los cerdos:
enemigo1_imagen1.src = "imagenes/cerdito1.gif";
enemigo1_imagen2.src = "imagenes/cerdito2.gif";
enemigo2_imagen1.src = "imagenes/cerdito1.gif";
enemigo2_imagen2.src = "imagenes/cerdito2.gif";
enemigo3_imagen1.src = "imagenes/cerdito1.gif";
enemigo3_imagen2.src = "imagenes/cerdito2.gif";
enemigo4_imagen1.src = "imagenes/cerdito1.gif";
enemigo4_imagen2.src = "imagenes/cerdito2.gif";
enemigo5_imagen1.src = "imagenes/cerdito1.gif";
enemigo5_imagen2.src = "imagenes/cerdito2.gif";
enemigo6_imagen1.src = "imagenes/cerdito1.gif";
enemigo6_imagen2.src = "imagenes/cerdito2.gif";
}
//...y si se deben representar los cuartos enemigos:
else if (enemigos_nivel == 4)
{
//Se representan las serpientes:
enemigo1_imagen1.src = "imagenes/serpien1.gif";
enemigo1_imagen2.src = "imagenes/serpien2.gif";
enemigo2_imagen1.src = "imagenes/serpien1.gif";
enemigo2_imagen2.src = "imagenes/serpien2.gif";
enemigo3_imagen1.src = "imagenes/serpien1.gif";
enemigo3_imagen2.src = "imagenes/serpien2.gif";
enemigo4_imagen1.src = "imagenes/serpien1.gif";
enemigo4_imagen2.src = "imagenes/serpien2.gif";
enemigo5_imagen1.src = "imagenes/serpien1.gif";
enemigo5_imagen2.src = "imagenes/serpien2.gif";
enemigo6_imagen1.src = "imagenes/serpien1.gif";
enemigo6_imagen2.src = "imagenes/serpien2.gif";
}
//...y si se deben representar los quintos enemigos:
else if (enemigos_nivel == 5)
{
//Se representan las mariquitas:
enemigo1_imagen1.src = "imagenes/mariqui1.gif";
enemigo1_imagen2.src = "imagenes/mariqui2.gif";
enemigo2_imagen1.src = "imagenes/mariqui1.gif";
enemigo2_imagen2.src = "imagenes/mariqui2.gif";
enemigo3_imagen1.src = "imagenes/mariqui1.gif";
enemigo3_imagen2.src = "imagenes/mariqui2.gif";
enemigo4_imagen1.src = "imagenes/mariqui1.gif";
enemigo4_imagen2.src = "imagenes/mariqui2.gif";
enemigo5_imagen1.src = "imagenes/mariqui1.gif";
enemigo5_imagen2.src = "imagenes/mariqui2.gif";
enemigo6_imagen1.src = "imagenes/mariqui1.gif";
enemigo6_imagen2.src = "imagenes/mariqui2.gif";
}
//...y si se deben representar los sextos enemigos:
else if (enemigos_nivel == 6)
{
//Se representan los osos panda:
enemigo1_imagen1.src = "imagenes/osito1.gif";
enemigo1_imagen2.src = "imagenes/osito2.gif";
enemigo2_imagen1.src = "imagenes/osito1.gif";
enemigo2_imagen2.src = "imagenes/osito2.gif";
enemigo3_imagen1.src = "imagenes/osito1.gif";
enemigo3_imagen2.src = "imagenes/osito2.gif";
enemigo4_imagen1.src = "imagenes/osito1.gif";
enemigo4_imagen2.src = "imagenes/osito2.gif";
enemigo5_imagen1.src = "imagenes/osito1.gif";
enemigo5_imagen2.src = "imagenes/osito2.gif";
enemigo6_imagen1.src = "imagenes/osito1.gif";
enemigo6_imagen2.src = "imagenes/osito2.gif";
}
//...y si se deben representar todos los enemigos (septima opcion):
else if (enemigos_nivel == 7)
{
//Se representan todos juntos:
enemigo1_imagen1.src = "imagenes/mosca1.gif";
enemigo1_imagen2.src = "imagenes/mosca2.gif";
enemigo2_imagen1.src = "imagenes/murci1.gif";
enemigo2_imagen2.src = "imagenes/murci2.gif";
enemigo3_imagen1.src = "imagenes/cerdito1.gif";
enemigo3_imagen2.src = "imagenes/cerdito2.gif";
enemigo4_imagen1.src = "imagenes/serpien1.gif";
enemigo4_imagen2.src = "imagenes/serpien2.gif";
enemigo5_imagen1.src = "imagenes/mariqui1.gif";
enemigo5_imagen2.src = "imagenes/mariqui2.gif";
enemigo6_imagen1.src = "imagenes/osito1.gif";
enemigo6_imagen2.src = "imagenes/osito2.gif";
}
else
{
//Setear los enemigos por defecto (los primeros):
enemigo1_imagen1.src = "imagenes/mosca1.gif";
enemigo1_imagen2.src = "imagenes/mosca2.gif";
enemigo2_imagen1.src = "imagenes/mosca1.gif";
enemigo2_imagen2.src = "imagenes/mosca2.gif";
enemigo3_imagen1.src = "imagenes/mosca1.gif";
enemigo3_imagen2.src = "imagenes/mosca2.gif";
enemigo4_imagen1.src = "imagenes/mosca1.gif";
enemigo4_imagen2.src = "imagenes/mosca2.gif";
enemigo5_imagen1.src = "imagenes/mosca1.gif";
enemigo5_imagen2.src = "imagenes/mosca2.gif";
enemigo6_imagen1.src = "imagenes/mosca1.gif";
enemigo6_imagen2.src = "imagenes/mosca2.gif";
}
//Muestra la barra de estado con la nueva informacion:
actualizar_barra_estado();
//Iniciar el juego otra vez, con los nuevos parametros:
posicionar_personajes();
}
//Funcion que representa la informacion (vidas, nivel y puntuacion):
function actualizar_barra_estado()
{
//Si las vidas son 0 o menos, se representa Game Over:
if (vidas < 0) { document.getElementById("estado").innerHTML = " Game Over | Level: "+nivel+" | Score: "+puntuacion; }
//Si no se representa normalmente, con el numero de vidas:
else { document.getElementById("estado").innerHTML = " Lives: "+vidas+" | Level: "+nivel+" | Score: "+puntuacion; }
}
//Funcion que ocurre al pulsar una tecla:
function tecla_pulsada(e, evento_actual)
{
//Si el primer evento esta vacio, se le introduce como valor el evento actual (el que ha llamado a esta funcion):
if (primer_evento == "") { primer_evento = evento_actual; }
//Si el primer evento no es igual al evento actual (el que ha llamado a esta funcion), se vacia el primer evento (para que a la proxima llamada entre en la funcion) y se sale de la funcion:
if (primer_evento != evento_actual) { primer_evento = ""; return; }
//Si esta el modo Dios activado, sale de la funcion (para que no pueda moverse):
if (modo_dios) { return; }
//Capturamos la tacla pulsada, segun navegador:
if (e.keyCode) { var unicode = e.keyCode; }
else if (event.keyCode) { var unicode = event.keyCode; }
else if (window.Event && e.which) { var unicode = e.which; }
else { var unicode = 40; } //Si no existe, por defecto se utiliza la flecha hacia abajo.
//Definimos las variables de posicion (X e Y) del personaje:
var posicion_x = parseInt(document.getElementById('personaje').style.left);
var posicion_y = parseInt(document.getElementById('personaje').style.top);
//Si el codigo es 37, se pulso la fecha hacia la izquierda:
if (unicode == 37)
{
//Se mueve el personaje 10 pixels hacia la izquierda:
posicion_x -= 10;
//Se define la variable para que la imagen se cambie, ya que ha habido movimiento:
cambiar_imagen = true;
}
//Si el codigo es 39, se pulso la fecha hacia la derecha:
if (unicode == 39)
{
//Se mueve el personaje 10 pixels hacia la derecha:
posicion_x += 10;
//Se define la variable para que la imagen se cambie, ya que ha habido movimiento:
cambiar_imagen = true;
}
//Si el codigo es 38, se pulso la fecha hacia arriba:
if (unicode == 38)
{
//Se mueve el personaje 10 pixels hacia arriba:
posicion_y -= 10;
//Se define la variable para que la imagen se cambie, ya que ha habido movimiento:
cambiar_imagen = true;
}
//Si el codigo es 40, se pulso la fecha hacia abajo:
if (unicode == 40)
{
//Se mueve el personaje 10 pixels hacia abajo:
posicion_y += 10;
//Se define la variable para que la imagen se cambie, ya que ha habido movimiento:
cambiar_imagen = true;
}
//Codigos de teclas de disparo: 17 (ctrl), 16 (shift), 32 (space), 13 (return), 45 (insert), 96 (0), 190 (.).
//Si el codigo es una de las teclas de disparo, se llama a la funcion de disparar:
if (unicode == 17 || unicode == 16 || unicode == 32 || unicode == 13 || unicode == 45 || unicode == 96 || unicode == 190)
{
//Se llama a la funcion de disparar:
disparar();
}
//Se mueve el personaje:
mover_personaje(posicion_x, posicion_y);
//Se alterna la imagen del personaje:
alternar_imagen();
//Finaliza la funcion:
return true;
}
//Funcion que mueve el personaje:
function mover_personaje (posicion_x, posicion_y)
{
//Calcula que la nueva posicion de X (horizontal) no sobrepase los 460 (500 - 40) ni los 0 pixels:
if (posicion_x > 460) { document.getElementById('personaje').style.left = 460 + "px"; cambiar_imagen = false; } //La posicion sobrepasa los 460 pixels, y se situa en los 460. No se cambia la imagen (no puede haber movimiento si se encuentra en el borde).
else if (posicion_x < 0) { document.getElementById('personaje').style.left = 0 + "px"; cambiar_imagen = false; } //La posicion es menor a 0 pixels, y se situa en los 0. No se cambia la imagen (no puede haber movimiento si se encuentra en el borde).
else { document.getElementById('personaje').style.left = posicion_x + "px"; } //Se situa en la nueva posicion.
//Calcula que la nueva posicion de Y (vertical) no sobrepase los 460 (500 - 40) ni los 0 pixels:
if (posicion_y > 460) { document.getElementById('personaje').style.top = 460 + "px"; cambiar_imagen = false; } //La posicion sobrepasa los 460 pixels, y se situa en los 460. No se cambia la imagen (no puede haber movimiento si se encuentra en el borde).
else if (posicion_y < 0) { document.getElementById('personaje').style.top = 0 + "px"; cambiar_imagen = false; } //La posicion es menor a 0 pixels, y se situa en los 0. No se cambia la imagen (no puede haber movimiento si se encuentra en el borde).
else { document.getElementById('personaje').style.top = posicion_y + "px"; } //Se situa en la nueva posicion.
}
//Funcion que alterna la imagen del personaje:
function alternar_imagen ()
{
//Se cambia la imagen a mostrar:
if (document.images && cambiar_imagen)
{
//Si la imagen actual es la personaje_imagen1, se cambia a personaje_imagen2:
if (document.images["personaje_imagen"].src == personaje_imagen1.src)
{
//A los 100 milisegundos, se cambia a la personaje_imagen2:
setTimeout("document.images['personaje_imagen'].src = personaje_imagen2.src;", 100);
//A los 200 milisegundos (100 despues), se cambia a la personaje_imagen1:
setTimeout("document.images['personaje_imagen'].src = personaje_imagen1.src;", 200);
}
//...Pero si la imagen actual es la personaje_imagen2, se cambia a personaje_imagen1:
else if (document.images["personaje_imagen"].src == personaje_imagen2.src)
{
//A los 100 milisegundos, se cambia a la personaje_imagen1:
setTimeout("document.images['personaje_imagen'].src = personaje_imagen1.src;", 100);
//A los 200 milisegundos (100 despues), se cambia a la personaje_imagen2:
setTimeout("document.images['personaje_imagen'].src = personaje_imagen2.src;", 200);
}
//Se vuelve a setear la variable de cambiar imagen como estaba al inicio:
cambiar_imagen = false;
} //Fin de cambiar imagen a mostrar.
}
//-->
</script>
</head>
<body onLoad="javascript:iniciar_juego();" onKeyPress="javascript:tecla_pulsada(event, 'onkeypress');" onKeyDown="javascript:tecla_pulsada(event, 'onkeydown');" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#eeeeee">
<!-- Se representa la Zona de Juego: -->
<div style="left:20px; top:20px; width:500px; height:500px; background:#0000aa; color:#ffffff; position:absolute; border:0px; padding:0px; z-index:1;">
<!-- Se representan las Nubes: -->
<div style="left:0px; top:0px; width:500px; height:120px; background-image:url('imagenes/nubes.gif'); color:#ffffff; position:absolute; padding:0px; border:0px; z-index:2;">
<!-- Se representa el Sol: -->
<div style="left:420px; top:0px; width:40px; height:40px; position:relative; background:transparent; padding:0px; border:0px; z-index:3; filter:alpha(opacity=80); opacity:0.8; -moz-opacity:0.8;" id="sol">
<img src="imagenes/sol.gif" width="80" height="80" hspace="0" vspace="0" name="sol_imagen" style="filter:alpha(opacity=80); opacity:0.8; -moz-opacity:0.8;">
</div>
<!-- Fin del Sol. -->
</div>
<!-- Fin de las Nubes. -->
<!-- Se representa el Cesped: -->
<div style="left:0px; top:460px; width:500; height:40px; background-image:url('imagenes/cesped1.gif'); color:#ffffff; position:absolute; padding:0px; border:0px; z-index:4;" id="cesped1">
</div>
<div style="left:0px; top:480px; width:500; height:20px; background-image:url('imagenes/cesped2.gif'); color:#ffffff; position:absolute; padding:0px; border:0px; z-index:8;" id="cesped2">
</div>
<!-- Fin del Cesped. -->
<!-- Se representa la Seta: -->
<div style="left:450px; top:460px; width:40px; height:40px; background:transparent; color:#ffffff; position:absolute; padding:0px; border:0px; z-index:7;" id="seta">
<img src="imagenes/seta.gif" width="40" height="40" hspace="0" vspace="0" name="seta_imagen">
</div>
<!-- Fin de la Seta. -->
<!-- Se representan los Disparos -->
<div style="visibility:hidden; left:252px; top:245px; width:5px; height:15px; position:absolute; border:0px; padding:0px; background:transparent; z-index:13;" id="disparo_1">
<img src="imagenes/disparo.gif" width="5" height="15" hspace="0" vspace="0" name="disparo1_imagen">
</div>
<div style="visibility:hidden; left:252px; top:245px; width:5px; height:15px; position:absolute; border:0px; padding:0px; background:transparent; z-index:14;" id="disparo_2">
<img src="imagenes/disparo.gif" width="5" height="15" hspace="0" vspace="0" name="disparo2_imagen">
</div>
<div style="visibility:hidden; left:252px; top:245px; width:5px; height:15px; position:absolute; border:0px; padding:0px; background:transparent; z-index:15;" id="disparo_3">
<img src="imagenes/disparo.gif" width="5" height="15" hspace="0" vspace="0" name="disparo3_imagen">
</div>
<div style="visibility:hidden; left:252px; top:245px; width:5px; height:15px; position:absolute; border:0px; padding:0px; background:transparent; z-index:16;" id="disparo_4">
<img src="imagenes/disparo.gif" width="5" height="15" hspace="0" vspace="0" name="disparo4_imagen">
</div>
<div style="visibility:hidden; left:252px; top:245px; width:5px; height:15px; position:absolute; border:0px; padding:0px; background:transparent; z-index:17;" id="disparo_5">
<img src="imagenes/disparo.gif" width="5" height="15" hspace="0" vspace="0" name="disparo5_imagen">
</div>
<!-- Fin de los Disparos -->
<!-- Se representa el Personaje: -->
<div style="visibility:visible; left:250px; top:250px; width:40px; height:40px; position:absolute; border:0px; padding:0px; background:transparent; z-index:5;" id="personaje">
<img src="imagenes/rana1.gif" width="40" height="40" hspace="0" vspace="0" name="personaje_imagen">
</div>
<!-- Fin del Personaje. -->
<!-- Se representan los Enemigos: -->
<div style="visibility:visible; left:120px; top:120px; width:40px; height:40px; position:absolute; border:0px; padding:0px; background:transparent; z-index:6;" id="enemigo1">
<img src="imagenes/mosca1.gif" width="40" height="40" hspace="0" vspace="0" name="enemigo1_imagen">
</div>
<div style="visibility:visible; left:450px; top:120px; width:40px; height:40px; position:absolute; border:0px; padding:0px; background:transparent; z-index:8;" id="enemigo2">
<img src="imagenes/mosca1.gif" width="40" height="40" hspace="0" vspace="0" name="enemigo2_imagen">
</div>
<div style="visibility:visible; left:350px; top:120px; width:40px; height:40px; position:absolute; border:0px; padding:0px; background:transparent; z-index:9;" id="enemigo3">
<img src="imagenes/mosca1.gif" width="40" height="40" hspace="0" vspace="0" name="enemigo3_imagen">
</div>
<div style="visibility:visible; left:450px; top:20px; width:40px; height:40px; position:absolute; border:0px; padding:0px; background:transparent; z-index:10;" id="enemigo4">
<img src="imagenes/mosca1.gif" width="40" height="40" hspace="0" vspace="0" name="enemigo4_imagen">
</div>
<div style="visibility:visible; left:150px; top:50px; width:40px; height:40px; position:absolute; border:0px; padding:0px; background:transparent; z-index:11;" id="enemigo5">
<img src="imagenes/mosca1.gif" width="40" height="40" hspace="0" vspace="0" name="enemigo5_imagen">
</div>
<div style="visibility:visible; left:250px; top:90px; width:40px; height:40px; position:absolute; border:0px; padding:0px; background:transparent; z-index:12;" id="enemigo6">
<img src="imagenes/mosca1.gif" width="40" height="40" hspace="0" vspace="0" name="enemigo6_imagen">
</div>
<!-- Fin de los Enemigos. -->
<!-- Texto "tu estas aqui": -->
<div style="visibility:visible; left:310px; top:250px; width:150px; height:20px; position:absolute; border:0px; padding:0px; background:#ff0000; color:#ffffff; text-align:center; line-height:20px; text-decoration:blink; font-weight:bold; font-family:arial; font-size:12px; z-index:20;" id="tu_estas_aqui">
You are here
</div>
<!-- Fin del Texto "tu estas aqui". -->
</div>
<!-- Fin de Zona de Juego. -->
<!-- Barra de Estado: -->
<div style="visibility:visible; left:20px; top:522px; width:500px; height:20px; position:absolute; border:0px; padding:0px; background:#ff0000; color:#ffff00; text-align:left; line-height:20px; text-decoration:none; font-weight:bold; font-family:arial; font-size:14px; z-index:25;" id="estado">
Loading parameters...
</div>
<!-- Informacion del autor: -->
<div style="visibility:visible; left:250px; top:524px; width:250px; height:15px; position:absolute; border:0px; padding:0px; background:transparent; color:#ffffff; text-align:right; line-height:15px; text-decoration:none; font-weight:bold; font-family:verdana; font-size:9px; z-index:26;" id="autor">
La Ranísima© by Joan Alba Maldonado
</div>
<!-- Fin de Informacion del autor. -->
<!-- Fin de Barra de Estado. -->
<!-- Informacion: -->
<div style="left:560px; top:40px; height:0px; position:absolute; border:0px; padding:0px; background:transparent; color:#333333; text-align:left; line-height:20px; text-decoration:none; font-family:verdana; font-size:14px;">
© <b>La Ranísima</b> 0.96a
<br>
by <i>Joan Alba Maldonado</i> (<a href="mailto:granvino@granvino.com;">granvino@granvino.com</a>) <sup>(DHTML 100%)</sup>
<br>
- Prohibited to publish, reproduce or modify without maintain original
<br> author's name
<br>
<tt>* Use the keyboard arrows to move, and spacebar (also control, shift
<br>
or return) to fire. Under Opera, leave the mouse cursor over game zone.</tt>
<br>
<i>Dedicated to Yasmina Llaveria del Castillo</i>
<!-- Fin de Informacion. -->
</div>
</body>
</html>
ranisima_english.zip( 21 k)Related examples in the same category