|
<!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] = "
Download :  nav_yasminuroban_english.zip |
