|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Level editor for Yasminuroban © by Joan Alba Maldonado</title>
<!-- (c) Edidor de niveles para Yasminuroban - 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) Editor de niveles para Yasminuroban - Programa realizado por Joan Alba Maldonado (granvino@granvino.com). Prohibido publicar, reproducir o modificar sin citar expresamente al autor original.
//Ancho del mapa (numero de paneles):
var mapa_width = 10;
//Alto del mapa (numero de paneles):
var mapa_height = 10;
//Ancho del mapa anterior (numero de paneles):
var mapa_width_anterior = mapa_width;
//Alto del mapa anterior (numero de paneles):
var mapa_height_anterior = mapa_height;
//El ancho de la celda (pixels):
var celda_width = 40;
//El alto de la celda (pixels):
var celda_height = 40;
//Variable que guarda la opcion seleccionada:
var opcion_seleccionada = "";
//Matriz para saber si una celda esta pintada:
var celdas_pintadas = new Array();
//Variable que guarda el codigo del mapa:
var mapa_codigo = "";
//Crea las imagenes:
if (document.images)
{
//Imagenes usadas:
var personaje_imagen = new Image(celda_width, celda_height);
nombre_personaje_imagen = "img/yas_down1.gif";
personaje_imagen.src = nombre_personaje_imagen; //Imagen del personaje.
var personaje_copa_imagen = new Image(celda_width, celda_height);
nombre_personaje_copa_imagen = "img/yas_copa_editor.gif";
personaje_copa_imagen.src = nombre_personaje_copa_imagen; //Imagen del personaje encima de una copa vacia (agujero).
var pared_imagen = new Image(celda_width, celda_height);
nombre_pared_imagen = "img/piedra1.gif";
pared_imagen.src = nombre_pared_imagen; //Imagen de la pared.
var agujero_vacio_imagen = new Image(celda_width, celda_height);
nombre_agujero_vacio_imagen = "img/copa1.gif";
agujero_vacio_imagen.src = nombre_agujero_vacio_imagen; //Imagen del agujero vacio.
var agujero_lleno_imagen = new Image(celda_width, celda_height);
nombre_agujero_lleno_imagen = "img/copa2.gif"
agujero_lleno_imagen.src = nombre_agujero_lleno_imagen; //Imagen del agujero lleno.
var pieza_imagen = new Image(celda_width, celda_height);
nombre_pieza_imagen = "img/botella.gif";
pieza_imagen.src = nombre_pieza_imagen; //Imagen de la pieza.
var borrar_imagen = new Image(celda_width, celda_height);
nombre_borrar_imagen = "img/borrar.gif";
borrar_imagen.src = nombre_borrar_imagen; //Imagen de borrar.
}
//Funcion que inicia el editor:
function iniciar_editor()
{
//Se aplican las imagenes al menu:
document.getElementById("imagen_personaje").src = personaje_imagen.src;
document.getElementById("imagen_personaje_copa").src = personaje_copa_imagen.src;
document.getElementById("imagen_pared").src = pared_imagen.src;
document.getElementById("imagen_agujero_vacio").src = agujero_vacio_imagen.src;
document.getElementById("imagen_agujero_lleno").src = agujero_lleno_imagen.src;
document.getElementById("imagen_pieza").src = pieza_imagen.src;
document.getElementById("imagen_borrar").src = borrar_imagen.src;
//Se prepara el mapa con las medidas y con los divs que tiene dentro:
preparar_mapa();
}
//Funcion que marca un div:
function marcar_div(nombre_div)
{
//Si el div no esta seleccionado:
if (opcion_seleccionada != nombre_div) { document.getElementById(nombre_div).style.border = "2px dotted #000000"; } //Le pone al div el borde definido.
}
//Funcion que desmarca un div:
function desmarcar_div(nombre_div)
{
//Si el div no esta seleccionado:
if (opcion_seleccionada != nombre_div) { document.getElementById(nombre_div).style.border = ""; } //Le quita el borde al div.
}
//Funcion que selecciona un div:
function seleccionar_div(nombre_div)
{
//Se deselecciona el div anterior, si existe:
if (opcion_seleccionada != "") { document.getElementById(opcion_seleccionada).style.border = ""; }
//Se selecciona el div enviado:
document.getElementById(nombre_div).style.border = "3px dotted #ff0000"; //Le pone al div el borde definido.
//Se pone como opcion seleccionada el div enviado:
opcion_seleccionada = nombre_div;
}
//Funcion que prepara el mapa con las medidas y con los divs que tiene dentro:
function preparar_mapa()
{
//Se borra el contenido del mapa:
document.getElementById("mapa").innerHTML = "";
//Cambia las medidas del mapa:
document.getElementById("mapa").style.width = celda_width * mapa_width + 6 + "px";
document.getElementById("mapa").style.height = celda_height * mapa_height + 6 + "px";
//Pone en el formulario los nuevos valores:
document.getElementById("formulario_size").mapa_x.value = mapa_width;
document.getElementById("formulario_size").mapa_y.value = mapa_height;
//Crea los divs dentro del mapa:
var contador_columnas = 0;
var contador_filas = 0;
var celda_bg = "";
var mapa_temporal = ""; //Variable donde se guardara el mapa temporal, para ir poniendo los DIV.
for (x=0; x<mapa_width*mapa_height; x++)
{
celda_bg = (celda_bg == "#ffffff") ? "#f5f5f5" : "#ffffff";
var celda_left = contador_columnas * celda_width;
var celda_top = contador_filas * celda_height;
//Se escribe el la casilla el div que contendra la imagen al hacer click:
mapa_temporal += '<div id="celda_'+x+'" style="background:'+celda_bg+'; color:#bbbbbb; left:'+celda_left+'px; top:'+celda_top+'px; width:'+celda_width+'px; height:'+celda_height+'px; position:absolute; text-align:center; font-family:verdana; font-size:12px; line-height:20px; padding:0px; z-index:2;">'+x+'</div>';
//Se escribe en la casilla el div que contendra la imagen provisional al posicionarse el cursor encima:
mapa_temporal += '<div id="celda_'+x+'_provisional" style="background:url(\'img/blank.gif\'); color:#bbbbbb; left:'+celda_left+'px; top:'+celda_top+'px; width:'+celda_width+'px; height:'+celda_height+'px; position:absolute; text-align:center; font-family:verdana; font-size:12px; line-height:20px; padding:0px; z-index:3;"><img src="img/blank.gif" width="'+celda_width+'" height="'+celda_height+'" hspace="0" vspace="0"></div>';
//Se escribe en la casilla el div que se utilizara para llamar a los eventos de javascript (onMouseOver, onMouseOut, onMouseDown):
mapa_temporal += '<div id="celda_'+x+'_eventos" style="background:url(\'img/blank.gif\'); color:#bbbbbb; left:'+celda_left+'px; top:'+celda_top+'px; width:'+celda_width+'px; height:'+celda_height+'px; position:absolute; text-align:center; font-family:verdana; font-size:12px; line-height:20px; padding:0px; z-index:4;" onMouseDown="javascript:pintar_celda(event, \'celda_'+x+'\');" onMouseOver="javascript:posicionar_celda(\'celda_'+x+'\');" onMouseOut="javascript:desposicionar_celda(\'celda_'+x+'\');" onContextMenu="javascript:return false;"><img src="img/blank.gif" width="'+celda_width+'" height="'+celda_height+'" hspace="0" vspace="0"></div>';
contador_columnas++;
celdas_pintadas["celda_"+x] = " ";
if (contador_columnas >= mapa_width) { contador_filas++; contador_columnas = 0; celda_bg = (celda_bg == "#ffffff") ? "#dddddd" : "#ffffff"; }
}
//Se crea el mapa volcandole el mapa temporal:
document.getElementById("mapa").innerHTML = mapa_temporal;
//Se actualiza el codigo del mapa:
actualizar_mapa_codigo();
//Se deja de avisar de que se espere:
document.getElementById('mensaje_espera').style.visibility='hidden';
}
//Funcion que cambia las medidas del mapa:
function resizear_mapa()
{
//Si se presiona cancelar, esconde el mensaje de espera, restaura el ancho y alto anteriores y se sale de la funcion:
if (!confirm("Press ok if you want to change map capacity (and lost it actual map)"))
{
document.getElementById('mensaje_espera').style.visibility='hidden';
document.getElementById("formulario_size").mapa_x.value = mapa_width_anterior;
document.getElementById("formulario_size").mapa_y.value = mapa_height_anterior;
return;
}
//Si no se ha escrito un numero, se restaura el valor de ancho y alto anterior, se esconde el mensaje de espera, y sale de la funcion:
if (parseInt(document.getElementById("formulario_size").mapa_x.value) < 1 || isNaN(parseInt(document.getElementById("formulario_size").mapa_x.value)) || isNaN(parseInt(document.getElementById("formulario_size").mapa_y.value)))
{
//alert("Debes escribir un valor numerico"); //este alert da error en Firefox 1.0.3! xD
document.getElementById('mensaje_espera').style.visibility='hidden';
document.getElementById("formulario_size").mapa_x.value = mapa_width_anterior;
document.getElementById("formulario_size").mapa_y.value = mapa_height_anterior;
return;
}
//Cambia las medidas del mapa, segun los valores escritos en el formulario:
mapa_width = document.getElementById("formulario_size").mapa_x.value;
mapa_height = document.getElementById("formulario_size").mapa_y.value;
//Se define el ancho y alto anterior (para restaurarlo en caso de que se inserte un valor no numerico o erroneo):
mapa_width_anterior = mapa_width;
mapa_height_anterior = mapa_height;
//Aplica los cambios:
preparar_mapa();
}
//Funcion que pinta una celda temporalmente, al pasar el cursor:
function posicionar_celda(nombre_celda)
{
//Si no se ha seleccionado ninguna opcion a pintar, se sale de la funcion:
if (opcion_seleccionada == "") { return; }
//Se muestra provisionalmente la imagen de la opcion seleccionada en la celda:
document.getElementById(nombre_celda+"_provisional").innerHTML = document.getElementById(opcion_seleccionada).innerHTML;
}
//Funcion que borra una celda temporal, al sacar el cursor:
function desposicionar_celda(nombre_celda)
{
//Si no se ha seleccionado ninguna opcion a pintar, se sale de la funcion:
if (opcion_seleccionada == "") { return; }
//Se borra la imagen provisional de la celda:
document.getElementById(nombre_celda+"_provisional").innerHTML = '<img src="img/blank.gif" width="'+celda_width+'" height="'+celda_height+'" hspace="0" vspace="0">';
}
//Funcion que pinta una celda definitivamente:
function pintar_celda(e, nombre_celda)
{
//Se recoge el numero de boton segun el navegador:
if (e != 0)
{
//Se guarda el boton del raton segun el navegador:
var boton_raton = (e.which) ? e.which : event.button;
//Si se ha pulsado el boton derecho, borra la celda y sale de la funcion:
if (boton_raton == 2 || boton_raton == 3) { borrar_celda(nombre_celda); return; }
}
//Si no se ha seleccionado ninguna opcion a pintar, se sale de la funcion:
if (opcion_seleccionada == "") { alert("You must select an option on the menu of above for paint."); return; }
//Si no se ha seleccionado la goma de borrar, se pinta la celda:
if (opcion_seleccionada != "div_borrar") { document.getElementById(nombre_celda).innerHTML = document.getElementById(opcion_seleccionada).innerHTML; }
//...pero si se ha seleccionado la goma de borrar, se borra la celda (y se le pone su numero):
else { var numero_celda_borrar = nombre_celda.substring(6, nombre_celda.length); document.getElementById(nombre_celda).innerHTML = numero_celda_borrar; }
//Se actualiza el codigo del mapa con el caracter que corresponde a la opcion elegida:
if (opcion_seleccionada == "div_personaje") { celdas_pintadas[nombre_celda] = "@"; }
else if (opcion_seleccionada == "div_personaje_copa") { celdas_pintadas[nombre_celda] = "+"; }
else if (opcion_seleccionada == "div_pared") { celdas_pintadas[nombre_celda] = "#"; }
else if (opcion_seleccionada == "div_agujero_vacio") { celdas_pintadas[nombre_celda] = "·"; }
else if (opcion_seleccionada == "div_agujero_lleno") { celdas_pintadas[nombre_celda] = "*"; }
else if (opcion_seleccionada == "div_pieza") { celdas_pintadas[nombre_celda] = "$"; }
else { celdas_pintadas[nombre_celda] = " "; }
//Se actualiza el codigo del mapa:
actualizar_mapa_codigo();
}
//Funcion que borra una celda:
function borrar_celda(nombre_celda)
{
//Se guarda la opcion seleccionada:
var opcion_anterior = opcion_seleccionada;
//Se cambia la opcion seleccionada a la de borrar:
opcion_seleccionada = "div_borrar";
//Se borra la celda:
pintar_celda(0, nombre_celda);
//Se restaura la opcion seleccionada anteriormente:
opcion_seleccionada = opcion_anterior;
}
//Funcion que recoge el mapa pasado por url y lo representa:
function recoger_mapa_url()
{
//Se guarda en una variable el contenido de la url:
//var url = unescape(window.location.href);
var url = window.location.href;
//Si la url esta vacia, sale de la funcion:
if (url == "") { return; }
//Se extrae el contenido de la primera variable enviada por GET (puede tener cualquier nombre, pero correspondera al MAPA):
var mapa_url_sucio = url.substring(url.indexOf("?")+1, url.length);
var mapa_url = mapa_url_sucio.substring(mapa_url_sucio.indexOf("=")+1, mapa_url_sucio.indexOf("&width="));
//Se extrae el contenido de la variable "width" enviada por GET:
var mapa_width_url_sucio = mapa_url_sucio.substring(mapa_url_sucio.indexOf("&")+1, mapa_url_sucio.indexOf("&height="));
var mapa_width_url = mapa_width_url_sucio.substring(mapa_width_url_sucio.indexOf("=")+1, mapa_url_sucio.indexOf("&height="));
//Se extrae el contenido de la variable "height" enviada por GET:
var mapa_height_url_sucio = mapa_url_sucio.substring(mapa_url_sucio.indexOf("&height=")+1, mapa_url_sucio.length);
var mapa_height_url = mapa_height_url_sucio.substring(mapa_height_url_sucio.indexOf("=")+1, mapa_height_url_sucio.length);
//Si alguna de las variables esta vacia o el width o el height no son numericos, sale de la funcion:
if (mapa_url == "" || mapa_width_url == "" || mapa_height_url == "" || isNaN(mapa_width_url) || isNaN(mapa_height_url)) { return; }
//...y si no, procede:
else
{
//Se setea el ancho recogido:
mapa_width = parseInt(unescape(mapa_width_url));
//Se setea el alto recogido:
mapa_height = parseInt(unescape(mapa_height_url));
//Se quita los caracteres de escape del mapa, y se remplazan los simbolos enviados por los correctos:
var mapa_url_refinado = unescape(mapa_url);
// A => (espacio en blanco)
// B => #
// C => @
// D => $
// E => ·
// F => *
// G => +
//Si el mapa es superior o inferior a como deberia ser (no corresponde al ancho y alto enviados), se sale de la funcion:
if (mapa_url_refinado.length != mapa_width*mapa_height) { alert("Failed to load map send by url because width and height are erroneous."); mapa_width = 10; mapa_height = 10; preparar_mapa(); return; }
//Quita las posibles almohadillas de la url (aparecen al probar mapa, etc.):
for (x=0; x<=mapa_url_refinado.length; x++) { mapa_url_refinado = mapa_url_refinado.replace("#", ""); }
//Cambia el codigo:
for (x=0; x<=mapa_url_refinado.length; x++)
{
mapa_url_refinado = mapa_url_refinado.replace("A", " ");
mapa_url_refinado = mapa_url_refinado.replace("B", "#");
mapa_url_refinado = mapa_url_refinado.replace("C", "@");
mapa_url_refinado = mapa_url_refinado.replace("D", "$");
mapa_url_refinado = mapa_url_refinado.replace("E", "·");
mapa_url_refinado = mapa_url_refinado.replace("F", "*");
mapa_url_refinado = mapa_url_refinado.replace("G", "+");
}
//Se introducen dentro del mapa:
preparar_mapa();
//Se guarda el mapa en la matriz y se representa en el div:
var contador_indice = 0;
var div_actual = "";
for (y=0; y<mapa_url_refinado.length; y++)
{
if (mapa_url_refinado.substring(y,y+1) == "#") { div_actual = "div_pared"; }
else if (mapa_url_refinado.substring(y,y+1) == "@") { div_actual = "div_personaje"; }
else if (mapa_url_refinado.substring(y,y+1) == "+") { div_actual = "div_personaje_copa"; }
else if (mapa_url_refinado.substring(y,y+1) == "·") { div_actual = "div_agujero_vacio"; }
else if (mapa_url_refinado.substring(y,y+1) == "*") { div_actual = "div_agujero_lleno"; }
else if (mapa_url_refinado.substring(y,y+1) == "$") { div_actual = "div_pieza"; }
celdas_pintadas["celda_"+contador_indice] = mapa_url_refinado.substring(y,y+1);
if (div_actual != "" && mapa_url_refinado.substring(y,y+1) != " ") { document.getElementById("celda_"+contador_indice).innerHTML = document.getElementById(div_actual).innerHTML; }
actualizar_mapa_codigo();
contador_indice++;
div_actual = "";
}
}
}
//Funcion que actualiza el codigo del mapa:
function actualizar_mapa_codigo()
{
mapa_codigo = "";
var mapa_codigo_refinado = "";
for (x=0; x<mapa_width*mapa_height; x++)
{
if (celdas_pintadas["celda_"+x] == " ") { mapa_codigo += " "; mapa_codigo_refinado += "A"; }
else if (celdas_pintadas["celda_"+x] == "@") { mapa_codigo += "@"; mapa_codigo_refinado += "C"; }
else if (celdas_pintadas["celda_"+x] == "#") { mapa_codigo += "#"; mapa_codigo_refinado += "B"; }
else if (celdas_pintadas["celda_"+x] == "·") { mapa_codigo += "·"; mapa_codigo_refinado += "E"; }
else if (celdas_pintadas["celda_"+x] == "*") { mapa_codigo += "*"; mapa_codigo_refinado += "F"; }
else if (celdas_pintadas["celda_"+x] == "$") { mapa_codigo += "$"; mapa_codigo_refinado += "D"; }
else if (celdas_pintadas["celda_&
|
