|
<!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();
&n
|
