Level editor for Yasminuroban by Joan Alba Maldonado : Game : Page Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Page Components » Game »

 

Level editor for Yasminuroban by Joan Alba Maldonado




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Level editor for Yasminuroban &copy; by Joan Alba Maldonado</title>
        <!-- (cEdidor 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 + "px";
                    document.getElementById("mapa").style.height = celda_height * mapa_height + "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|| 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 == || 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 : Download nav_yasminuroban_english.zip nav_yasminuroban_english.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Page Components
» Game