Mine game : Game « Page Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » Page Components » Game 
Mine game


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Buscayasminas &copy; (by Joan Alba Maldonado)</title>
        <!-- (cBuscayasminas - 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) Buscayasminas - Programa realizado por Joan Alba Maldonado (granvino@granvino.com). Prohibido publicar, reproducir o modificar sin citar expresamente al autor original.

                
                //Ancho del mapa:
                var mapa_width = 9;
                var mapa_width_maximo = 30//Ancho maximo del mapa que puede ponerse.
                //Alto del mapa:
                var mapa_height = 9;
                var mapa_height_maximo = 30//Alto maximo del mapa que puede ponerse.

                //Ancho y alto de las celdas:
                var celda_width = 20;
                var celda_height = 20;

                //Numero de minas:
                var numero_minas = 10;
                //Numero de banderas:
                var numero_banderas = numero_minas;
                
                //Matriz con las minas:
                var matriz_minas = new Array(mapa_width*mapa_height);
                //Matriz con los numeros:
                var matriz_numeros = new Array(mapa_width*mapa_height);
                //Matriz del usuario (para saber que casillas ha descubierto, que banderas ha puesto, etc):
                var matriz_usuario = new Array(mapa_width*mapa_height);

                //Variable que determina la opcion seleccionada:
                var opcion_seleccionada = false;
                
                //Variable para saber si se tiene que arrastrar el menu opciones o no:
                var arrastrar_opciones = false;                
                //Variables que calcularan la diferencia entre las coordenadas del mouse y las del div de opciones:
                var diferencia_posicion_horizontal = false;
                var diferencia_posicion_vertical = false;
                //Variable para saber si se esta arrastrando en un campo seleccionable, y asi no dejar arrastrar:
                var campo_seleccionable = false;

                //Variable para saber si el juego ha finalizado (ya por haber ganado o por haber perdido):
                var se_ha_acabado_juego = false;
                
                //Variable para saber si se han cambiado las banderas despues de haber apretado la tecla alt, control o shift:
                var se_ha_modificado_bandera = false;
                
                //Variable para saber si una tecla se ha levantado o no:
                var tecla_levantada = true;
                
                //Matriz que define de que color saldra cada numero (del 0, que no se usa, al 8):
                var color_numeros = new Array("#ff0000""#00ff00""#00aaff""#ffff00""#aaffcc""#aabbff""#ffffff""#ddaaff""#ffddbb");

                //Variable que guarda el contenido del div de la cara de la yasmina, para hacer el if de no cambiarlo si esta como al principio:
                var div_cara_yasmina_inicial = false;

                //Variable para saber si se ha iniciado el contador de tiempo:
                var iniciado_temporizador = false;
                //Variable donde se guardara el setInterval del tiempo:
                var tiempo = false;
                //Variables que guardan los segundos y los minutos, respectivamente, del temporizador:
                var segundos = 0;

                //Variable que define si hay tiempo limite:
                var hay_tiempo_limite = true;
                //Variable que define cuanto tiempo limite hay:
                var tiempo_limite = 9999;
                
                
                //Funcion que muestra un mensaje en pantalla:
                function mostrar_mensaje(mensaje)
                 {
                    //Se pone el mensaje en el div:
                    document.getElementById("mensaje").innerHTML = mensaje;

                    //Si se ha enviado un mensaje:
                    if (mensaje != "")
                     {
                        //Se muestra el div:
                        document.getElementById("mensaje").style.visibility = "visible";
                     }
                    //...y si no:
                    else
                     {
                        //Se oculta el div:
                        document.getElementById("mensaje").style.visibility = "hidden";                        
                     }
                 }
                
                
                //Funcion que muestra u oculta el menu de opciones:
                function mostrar_ocultar_opciones()
                 {
                    //Se ponen las opciones pertinentes:
                    document.getElementById("numero_minas").value = numero_minas;
                    document.getElementById("mapa_width").value = mapa_width;
                    document.getElementById("mapa_height").value = mapa_height;
                    document.getElementById("tiempo_limite_input").value = tiempo_limite;
                    if (hay_tiempo_limite)
                     {
                        //Se chequea el checkbox conforme hay tiempo limite:
                        document.getElementById("hay_tiempo_limite_input").checked = true;
                        //Se desbloquea el input text con el limite de tiempo:
                        document.getElementById("tiempo_limite_input").disabled = false;
                        //Se vuelve a poner un color de fondo y de texto normal:
                        document.getElementById("tiempo_limite_input").style.color = "#333333";
                        document.getElementById("tiempo_limite_input").style.background = "#99bbff";
                     }
                    else
                     {
                        //Se deschequea el checkbox conforme no hay tiempo limite:
                        document.getElementById("hay_tiempo_limite_input").checked = false;
                        //Se desbloquea el input text con el limite de tiempo:
                        document.getElementById("tiempo_limite_input").disabled = true;
                        //Se vuelve a poner un color de fondo y de texto normal:
                        document.getElementById("tiempo_limite_input").style.color = "#3333dd";
                        document.getElementById("tiempo_limite_input").style.background = "#999999";
                     }
                    
                    //Si esta oculto, lo muestra:
                    if (document.getElementById("menu_opciones").style.visibility == "hidden") { document.getElementById("menu_opciones").style.visibility = "visible"; document.getElementById("opcion_opciones").title = "Close options"}
                    //...y si no, lo oculta:
                    else document.getElementById("menu_opciones").style.visibility = "hidden"; document.getElementById("opcion_opciones").title = "Edit options"}
                 }

                
                //Funcion que activa o desactiva el tiempo limite:
                function activar_desactivar_tiempo_limite()
                 {
                    //Si el tiempo limite esta desactivado, se activa:
                    if (document.getElementById("hay_tiempo_limite_input").checked == true)
                     {
                        //Se desbloquea el input text con el limite de tiempo:
                        document.getElementById("tiempo_limite_input").disabled = false;
                        //Se vuelve a poner un color de fondo y de texto normal:
                        document.getElementById("tiempo_limite_input").style.color = "#333333";
                        document.getElementById("tiempo_limite_input").style.background = "#99bbff";
                     }
                    //...pero si ya esta activado, se desactiva:
                    else
                     {
                        //Se desbloquea el input text con el limite de tiempo:
                        document.getElementById("tiempo_limite_input").disabled = true;
                        //Se vuelve a poner un color de fondo y de texto normal:
                        document.getElementById("tiempo_limite_input").style.color = "#3333dd";
                        document.getElementById("tiempo_limite_input").style.background = "#999999";
                     }
                 }


                //Funcion que aplica las opciones elegidas:
                function aplicar_opciones()
                 {
                    //Se guarda en variables las opciones enviadas:
                    var numero_minas_enviado = parseInt(document.getElementById("numero_minas").value);
                    var mapa_width_enviado = parseInt(document.getElementById("mapa_width").value);
                    var mapa_height_enviado = parseInt(document.getElementById("mapa_height").value);
                    var numero_minas_maximo_enviado = (mapa_width_enviado*mapa_height_enviado1;
                    var tiempo_limite_enviado = parseInt(document.getElementById("tiempo_limite_input").value);
                    
                    //Si las opciones siguen siendo iguales a las que hay actualmente, sale de la funcion:
                    if (numero_minas_enviado == numero_minas && mapa_width_enviado == mapa_width && mapa_height_enviado == mapa_height)
                     {
                        //Si se ha seteado conforme hay limite de tiempo, pero se ha enviado el mismo que ya habia, sale de la funcion:
                        if (hay_tiempo_limite && document.getElementById("hay_tiempo_limite_input").checked == true && tiempo_limite_enviado == tiempo_limite) { return}
                        //...o si no se ha enviado conforme hay limite de tiempo, tambien sale:
                        else if (!hay_tiempo_limite && document.getElementById("hay_tiempo_limite_input").checked == false) { return}
                     }
                    
                    
                    //Variable que guarda los errores, si se generan:
                    var errores = "";
                    //Variable para saber que hay que restaurar, en caso de ser erroneo:
                    var restaurar_numero_minas = false;
                    var restaurar_mapa_width = false;
                    var restaurar_mapa_height = false;
                    var restaurar_tiempo_limite = false;
                    //Calcular errores cometidos (opciones invalidas):
                    if (mapa_width_enviado == && mapa_height_enviado == 1) { errores += "\n* Map must be more than one cell (it can't be 1x1)."; restaurar_mapa_width = true; restaurar_mapa_height = true}
                    if (mapa_width_enviado > mapa_width_maximo || mapa_width_enviado < || isNaN(mapa_width_enviado)) { errores += "\n* Map width must be a number between 1 and "+mapa_width_maximo+"."; restaurar_mapa_width = true}
                    if (mapa_height_enviado > mapa_height_maximo || mapa_height_enviado < || isNaN(mapa_height_enviado)) { errores += "\n* Map height must be a number between 1 and "+mapa_height_maximo+"."; restaurar_mapa_height = true}
                    if (numero_minas_enviado > numero_minas_maximo_enviado || numero_minas_enviado < || isNaN(numero_minas_enviado)) { errores += "\n* Number of mines must be a number between 1 and result of operation: map height x map width - 1."; restaurar_numero_minas = true}
                    if (document.getElementById("hay_tiempo_limite_input").checked == true && tiempo_limite_enviado > 9999 || tiempo_limite_enviado < 10 || isNaN(tiempo_limite_enviado)) { errores += "\n* Time limit must be between 10 and 9999 seconds."; restaurar_tiempo_limite = true}
                    //Si se ha cometido algun error de opcion no valida:
                    if (errores != "")
                     {
                        //Alerta sobre el error:
                        alert("Options are wrong.\nProblems:"+errores);
                        //Vuelve a poner todo como estaba antes (siempre que se haya determinado por ser erroneo):
                        if (restaurar_numero_minas) { document.getElementById("numero_minas").value = numero_minas; }
                        if (restaurar_mapa_width) { document.getElementById("mapa_width").value = mapa_width; }
                        if (restaurar_mapa_height) { document.getElementById("mapa_height").value = mapa_height; }
                        if (restaurar_tiempo_limite) { document.getElementById("tiempo_limite_input").value = tiempo_limite; }
                        //Sale de la funcion:
                        return;
                     }
                    //...pero si no ha habido ningun error, se aplican las opciones (con confirmacion):
                    else
                     {
                        //Pide confirmacion, y si se cancela restaura los valores y sale de la funcion:
                        if (!confirm("Press ok to apply options. Actual game will be lost."))
                         {
                            //Restaura los valores anteriores:
                            document.getElementById("numero_minas").value = numero_minas;
                            document.getElementById("mapa_width").value = mapa_width;
                            document.getElementById("mapa_height").value = mapa_height;
                            //Sale de la funcion:
                            return;
                         }
                        //...y si no, aplica las opciones:
                        else
                         {
                            //Aplica las opciones:
                            numero_minas = parseInt(document.getElementById("numero_minas").value);
                            mapa_width = parseInt(document.getElementById("mapa_width").value);
                            mapa_height = parseInt(document.getElementById("mapa_height").value);
                            tiempo_limite = parseInt(document.getElementById("tiempo_limite_input").value);
                            if (document.getElementById("hay_tiempo_limite_input").checked == true) { hay_tiempo_limite = true; iniciado_temporizador = false}
                            else hay_tiempo_limite = false}

                            //Se pone el mensaje de espera:
                            mostrar_mensaje("Loading...");
                            
                            //Inicia el juego con las nuevas opciones y se quita el mensaje de espera, despues de unos milisegundos:
                            setTimeout("iniciar_juego(); mostrar_mensaje('');"10);
                         }
                     }
                    
                 }


                //Funcion que selecciona una opcion (poner bandera, etc):
                function seleccionar_opcion(opcion, nombre_div)
                 {
                    //Se pone como opcion seleccionada la enviada:
                    opcion_seleccionada = opcion;
                    //Quita el borde solido a todos los div de opciones:
                    document.getElementById("bandera").style.border = ""//Se borran primero para que el Opera 7.54 no de errores de redraw (y quiza otras versiones).
                    document.getElementById("bandera_no").style.border = ""//Se borran primero para que el Opera 7.54 no de errores de redraw (y quiza otras versiones).
                    document.getElementById("bandera").style.border = "2px #bbbbbb dotted";
                    document.getElementById("bandera_no").style.border = "2px #bbbbbb dotted";
                    //Pone un borde al div de la opcion seleccionada:
                    document.getElementById(nombre_div).style.border = "2px #ffff00 solid";
                    //Se setea conforme se han modificado las opciones de bandera:
                    se_ha_modificado_bandera = true;
                    //Se setea conforme la tecla se ha levantado:
                    tecla_levantada = true;
                 }


                //Funcion que reinicia el juego:
                function reiniciar_juego()
                 {
                    //Se pone el mensaje de espera:
                    mostrar_mensaje("Loading...");
                            
                    //Inicia el juego con las nuevas opciones y se quita el mensaje de espera, despues de unos milisegundos:
                    setTimeout("iniciar_juego(); mostrar_mensaje('');"10);
                 }

                
                //Funcion que inicia el juego por primera vez:
                function iniciar_juego_primera_vez()
                 {
                    //Muestra el mensaje de cargando:
                    mostrar_mensaje("Loading...");
                    //Pone en el input text del tiempo limite, el tiempo limite:
                    document.getElementById("tiempo_limite_input").value = tiempo_limite;
                    //Si no hay tiempo limite, desactiva la opcion de tiempo limite:
                    if (!hay_tiempo_limite)
                     {
                        //Se deschequea el checkbox de tiempo limite:
                        document.getElementById("hay_tiempo_limite_input").checked = false;
                        //Se desbloquea el input text con el limite de tiempo:
                        document.getElementById("tiempo_limite_input").disabled = true;
                        //Se vuelve a poner un color de fondo y de texto normal:
                        document.getElementById("tiempo_limite_input").style.color = "#3333dd";
                        document.getElementById("tiempo_limite_input").style.background = "#999999";
                     }
                    //...pero si hay tiempo limite, activa la opcion de tiempo limite:
                    else
                     {
                        //Se chequea el checkbox de tiempo limite:
                        document.getElementById("hay_tiempo_limite_input").checked = true;
                        //Se desbloquea el input text con el limite de tiempo:
                        document.getElementById("tiempo_limite_input").disabled = false;
                        //Se vuelve a poner un color de fondo y de texto normal:
                        document.getElementById("tiempo_limite_input").style.color = "#333333";
                        document.getElementById("tiempo_limite_input").style.background = "#99bbff";
                     
                    //Se pone la opcion de mostrar/ocultar el menu de opciones:
                    document.getElementById("menu").innerHTML += '<div id="opcion_opciones" style="left:130px; top:26px; width:60px; height:11px; position:absolute; border:0px; padding:0px; background:transparent; color:#ffffff; text-align:center; line-height:11px; text-decoration:underline; font-family:arial; font-size:11px; cursor: pointer; cursor: hand; z-index:3;" title="Edit options" onClick="javascript:mostrar_ocultar_opciones();" onMouseOver="javascript:document.getElementById(\'opcion_opciones\').style.color=\'#ffff00\';" onMouseOut="javascript:document.getElementById(\'opcion_opciones\').style.color=\'#ffffff\';">opciones</div>';
                    //Inicia el juego despues de unos milisegundos, y luego quita el mensaje de cargando:
                    setTimeout("iniciar_juego(); mostrar_mensaje('');"10);                 
                 }
                                 
                 
                //Funcion que inicia el juego:
                function iniciar_juego()
                 {
                    //Se pone conforme el juego aun no se ha cabado:
                    se_ha_acabado_juego = false;

                    //Pone como valores del input text del formulario de opciones las opciones definidas:
                    document.getElementById("numero_minas").value = numero_minas;
                    document.getElementById("mapa_width").value = mapa_width;
                    document.getElementById("mapa_height").value = mapa_height;

                    //Se ponen tantas banderas como numero de minas:
                    numero_banderas = numero_minas;
                    //Se representan en el contador:
                    document.getElementById("contador_banderas").innerHTML = numero_banderas;

                    //Se pone el contador de tiempo a cero:
                    iniciar_temporizador(false);
                    document.getElementById("tiempo").innerHTML = 0;
                    
                    //Se vuelve a poner la cara normal a la yasmina:
                    document.getElementById("yasmina").innerHTML = '<img src="img/yasmina.gif" alt="New game" title="New game" height="30" width="30" hspace="0" vspace="0" align="center">';

                    //Se guarda el contenido del div de la cara de la yasmina, siempre que no se haya hecho antes:
                    if (!div_cara_yasmina_inicial) { div_cara_yasmina_inicial = document.getElementById("yasmina").innerHTML; }

                    //Prepara el mapa:
                    preparar_mapa();
                    
                    //Representa el mapa:
                    dibujar_mapa();
                 }

                
                //Funcion que prepara el mapa:
                function preparar_mapa()
                 {
                    //Se crean o vuelven a resizear la matriz de minas con el ancho correspondiente y vaciandola:
                    matriz_minas = new Array(mapa_width*mapa_height);
                    for (x=0; x<matriz_minas.length; x++) { matriz_minas[x0}
                                        
                    //Se ponen aleatoriamente las minas en la matriz de minas (tantas como sean necesarias):
                    var minas_puestas = 0;
                    var posicion_aleatoria = 0;
                    while (minas_puestas != numero_minas)
                     {
                        //Se calcula una posicion aleatoria para la mina:
                        posicion_aleatoria = parseInt(Math.random() (mapa_width * mapa_height));
                        //Si la posicion esta desocupada, se pone la mina:
                        if (matriz_minas[posicion_aleatoria== 0) { matriz_minas[posicion_aleatoria1; minas_puestas++; }
                     }

                    //Adecua la matriz de numeros segun la matriz de minas:
                    crear_matriz_numeros();
                    
                    //Se crea la matriz del usuario:
                    matriz_usuario = new Array(mapa_width*mapa_height);
                    for (x=0; x<matriz_usuario.length; x++) { matriz_usuario[x0}
                 }
                

                //Funcion que crea la matriz de numeros:
                function crear_matriz_numeros()
                 {
                    //Se crean o vuelven a resizear la matriz de minas con el ancho correspondiente y vaciandola:
                    matriz_numeros = new Array(mapa_width*mapa_height);
                    for (x=0; x<matriz_numeros.length; x++) { matriz_numeros[x0}
                    
                    //Se adecua segun sea la matriz de minas (si hay mina = X, si no hay alrededor = 0):
                    var contador_minas = 0//Contador de minas circundantes a cada celda.
                    var numero_columna = 1//Contador de la columna en la que se esta.
                    for (x=0; x<matriz_numeros.length; x++)
                     {
                        //Si el contador de columnas es mayor a las columnas del mapa, lo vuelve a 1:
                        if (numero_columna > mapa_width) { numero_columna = 1}
                        
                        //Si hay una mina, se setea como X:
                        if (matriz_minas[x== 1) { matriz_numeros[x"X"}
                        //...y si no, calcular las minas de alrededor:
                        else
                         {
                            //Se pone a 0 el contador de minas circundantes:
                            contador_minas = 0;
                            //Si hay alguna mina en las celdas que rodean la cela, se incrementa el contador:
                            if (x-mapa_width->= && numero_columna->= && matriz_minas[x-mapa_width-1== 1) { contador_minas++; //En la casilla superior izquierda (si no esta a la izquierda del todo).
                            if (x-mapa_width >= && matriz_minas[x-mapa_width== 1) { contador_minas++; //En la casilla superior.
                            if (x-mapa_width+>= && numero_columna+<= mapa_width && matriz_minas[x-mapa_width+1== 1) { contador_minas++; //En la casilla superior derecha (si no esta al derecha del todo).
                            if (x->= && numero_columna->= && matriz_minas[x-1== 1) { contador_minas++; //En la casilla izquierda (si no esta a la izquierda del todo).
                            if (x+<= matriz_minas.length && numero_columna+<= mapa_width && matriz_minas[x+1== 1) { contador_minas++; //En la casilla derecha (si no esta a la derecha del todo).
                            if (x+mapa_width-<= matriz_minas.length && numero_columna->= && matriz_minas[x+mapa_width-1== 1) { contador_minas++; //En la casilla inferior izquierda (si no esta a la izquierda del todo).
                            if (x+mapa_width <= matriz_minas.length && matriz_minas[x+mapa_width== 1) { contador_minas++; //En la casilla inferior.
                            if (x+mapa_width+<= matriz_minas.length && numero_columna+<= mapa_width && matriz_minas[x+mapa_width+1== 1) { contador_minas++; //En la casilla inferior derecha (si no esta a la derecha del todo).
                            //Se pone el numero de minas que hay alrededor en la celda:
                            matriz_numeros[x= contador_minas;
                         }
                        //Se incrementa el contador de columnas:
                        numero_columna++;
                     }
                 }
                

                //Funcion que representa el mapa en pantalla:
                function dibujar_mapa()
                 {
                    //Pone el alto y ancho a la zona de juego:
                    document.getElementById("zona_juego").style.width = mapa_width * (celda_width + 2"px";
                    document.getElementById("zona_juego").style.height = mapa_height * (celda_height + 2"px";
                    
                    //Poner el div con informacion del autor mas abajo del mapa:
                    document.getElementById("informacion").style.top = mapa_height * (celda_height + 2+ parseInt(document.getElementById("zona_juego").style.top20 "px";
                    
                    //Variable donde se va guardando el codigo HTML para luego volcarlo en el div de la zona de juego:
                    var html "";
                    
                    //Variables que cuentan la columna y la fila:
                    var columna = 1;
                    var fila = 1;
                    
                    //Variables que diran donde posicionar la celda:
                    var celda_left = 0//Posicion horizontal.
                    var celda_top = 0//Posicion vertical.
                    
                    //Se recorre un bucle por todo el mapa:
                    for (x=0; x<mapa_width*mapa_height; x++)
                     {
                        //Si se ha alcanzado el maximo de columnas, vuelve a la primera e incrementa una fila:
                        if (columna > mapa_width) { columna = 1; fila++; }

                        //Se calcula la posicion de la celda:
                        celda_left = (columna - 1(celda_width + 22;
                        celda_top = (fila - 1(celda_height + 22;
                        
                        //Pone el codigo HTML correspondiente en la variable:
                        html += '<div id="'+x+'" style="left:'+celda_left+'px; top:'+celda_top+'px; width:'+celda_width+'px; height:'+celda_height+'px; position:absolute; border:0px; padding:0px; background:#ff0000; color:#ffffff; text-align:center; font-weight:bold; line-height:'+eval(parseInt(Math.min(celda_width, celda_height)))+'px; text-decoration:none; font-family:verdana; font-size:'+eval(parseInt(Math.min(celda_width, celda_height) / 2))+'px; cursor: pointer; cursor: hand; z-index:2; -moz-user-select:none;" title="Choose cell (right click: put/clear flag, only some browsers)" onClick="javascript:mostrar_mensaje(\'Processing...\'); setTimeout(\'destapar_celda('+x+', '+columna+'); mostrar_mensaje(\\\'\\\'); se_ha_ganado();\', 10);" onMouseDown="document.getElementById(\'yasmina\').innerHTML = \'<img src=\\\'img/yasmina_click.gif\\\' alt=\\\'New game\\\' title=\\\'New game\\\' height=\\\'30\\\' width=\\\'30\\\' hspace=\\\'0\\\' vspace=\\\'0\\\' align=\\\'center\\\'>\';" onMouseUp="document.getElementById(\'yasmina\').innerHTML = \'<img src=\\\'img/yasmina.gif\\\' alt=\\\'New game\\\' title=\\\'New game\\\' height=\\\'30\\\' width=\\\'30\\\' hspace=\\\'0\\\' vspace=\\\'0\\\' align=\\\'center\\\'>\';" onContextMenu="poner_quitar_bandera('+x+'); return false;" onSelectStart="return false;"></div>';

                        //Incrementa una columna:
                        columna++;
                     }
                     
                    //Se vuelca el contenido de la variable con el HTML en el div:
                    document.getElementById("zona_juego").innerHTML = html;
                 }

                
                //Funcion que pone o quita una bandera, segun este o no ya puesta en la celda:
                function poner_quitar_bandera(celda)
                 {
                    //Si la celda esta ya destapada, sale de la funcion:
                    if (matriz_usuario[celda== 1) { return}

                    //Si en la celda ya hay una bandera, se quita:
                    if (matriz_usuario[celda== 2)
                     {
                        //Se suma una bandera mas (ya que la hemos recogido):
                        numero_banderas++;
                        //Se vuelve a sumar la bandera al contador de estas:
                        document.getElementById("contador_banderas").innerHTML = numero_banderas;
                        //Se quita la bandera de la casilla:
                        matriz_usuario[celda0;
                        //Se vacia la celda en el mapa:
                        document.getElementById(celda).innerHTML = "";
                     }
                    //...pero si no, se pone siempre que aun queden:
                    else if (numero_banderas > 0)
                     {
                         //Se resta una bandera:
                         numero_banderas--;
                         //Se ponen las banderas que hay:
                         document.getElementById("contador_banderas").innerHTML = numero_banderas;
                         //Se pone la bandera en la matriz de usuario:
                         matriz_usuario[celda2;
                         //Se muestra la bandera en el mapa:                        
                         document.getElementById(celda).innerHTML = '<img src="img/bandera.gif" alt="B" title="Flag" width="'+celda_width+'" height="'+celda_height+'" hspace="0" vspace="0">'; document.getElementById(celda).title = "Flag";
                     }
                    //...pero si no quedan, se avisa:
                    else alert("You don't have any more flags to put. If you want, you can clear a flag on another cell to put here.")}
                 }


                //Funcion que descubre una celda:
                function destapar_celda(celda, columna)
                 {
                    //Si la celda esta ya destapada, sale de la funcion:
                    if (matriz_usuario[celda== 1) { return}
                    
                    //Si la opcion seleccionada es la de poner una bandera y la celda todavia no esta destapada, se pone y sale de la funcion:
                    if (opcion_seleccionada == "bandera" && matriz_usuario[celda== 0)
                     {
                        //Si hay banderas, se procede:
                        if (numero_banderas > 0)
                         {
                             //Se resta una bandera:
                             numero_banderas--;
                             //Se ponen las banderas que hay:
                             document.getElementById("contador_banderas").innerHTML = numero_banderas;
                             //Se pone la bandera en la matriz de usuario:
                             matriz_usuario[celda2;
                             //Se muestra la bandera en el mapa:                        
                             document.getElementById(celda).innerHTML = '<img src="img/bandera.gif" alt="B" title="Flag" width="'+celda_width+'" height="'+celda_height+'" hspace="0" vspace="0">'; document.getElementById(celda).title = "Flag";
                         }
                        //...pero si no quedan banderas, se avisa:
                        else alert("You don't have any more flags to put. If you want, you can clear a flag on another cell to put here.")}
                        //Sale de la funcion:
                        return;
                     }
                    //...pero si en la casilla elegida hay una bandera, se quita y sale de la funcion:
                    else if (matriz_usuario[celda== 2)
                     {
                        //Se suma una bandera mas (ya que la hemos recogido):
                        numero_banderas++;
                        //Se vuelve a sumar la bandera al contador de estas:
                        document.getElementById("contador_banderas").innerHTML = numero_banderas;
                        //Se quita la bandera de la casilla:
                        matriz_usuario[celda0;
                        //Se vacia la celda en el mapa:
                        document.getElementById(celda).innerHTML = "";
                        //Sale de la funcion:
                        return;
                     }

                    //Si aun no se ha iniciado el temporizador, se inicia y se setea conforme ya se ha iniciado:
                    if (!iniciado_temporizador) { iniciar_temporizador(true); iniciado_temporizador = true}

                    //Se pone el mensaje de espera:
                    mostrar_mensaje("Showing...");
                    
                    //Si la celda contiene una mina, se pinta una mina en la celda y se setea GameOver:
                    if (matriz_numeros[celda== "X") { matriz_usuario[celda3; document.getElementById(celda).innerHTML = '<img src="img/yasmina.gif" alt="X" title="Yasmina" width="'+celda_width+'" height="'+celda_height+'" hspace="0" vspace="0">'; document.getElementById(celda).title = "Yasmina"; game_over()return}
                    //...pero si la mariz contiene un numero superior a cero (hay minas alrededor), se destapa la casilla elegida y se pone en el title su contenido:
                    else if (!isNaN(matriz_numeros[celda]) && matriz_numeros[celda0) { document.getElementById(celda).onclick = function () { }; document.getElementById(celda).onmousedown = function () { }; document.getElementById(celda).onmouseup = function () { }; document.getElementById(celda).onmouseover = function () { }; document.getElementById(celda).onmouseout = function () { }; document.getElementById(celda).style.cursor = "default"; document.getElementById(celda).style.background = "#550000"; document.getElementById(celda).style.color = color_numeros[matriz_numeros[celda]]; matriz_usuario[celda1; document.getElementById(celda).innerHTML = matriz_numeros[celda]; document.getElementById(celda).title = matriz_numeros[celda]}
                    //...pero si la matriz no contiene ninguna mina alrededor:
                    else if (matriz_numeros[celda== 0)
                     {
                        //Se quitan los eventos ya no necesarios:
                        document.getElementById(celda).onclick = function () { }; document.getElementById(celda).onmousedown = function () { }; document.getElementById(celda).onmouseup = function () { }; document.getElementById(celda).onmouseover = function () { }; document.getElementById(celda).onmouseout = function () { }; document.getElementById(celda).style.cursor = "default";
                        //Se setea en la matriz de usuario para saber que ha sido descubierta:
                        matriz_usuario[celda1;
                        //Se rellena con un espacio (para que no pueda volver a pulsarse):
                        document.getElementById(celda).innerHTML = "&nbsp;";
                        //Se oscurece la celda:
                        document.getElementById(celda).style.background = "#550000";
                        //Se vacia el title de la celda:
                        document.getElementById(celda).title = "";
                        //...se destapan recursivamente las celdas de alrededor hasta encontrarse rodeado de celdas que si tengan minas circundantes:
                        destapar_celdas_recursivamente(celda, columna);
                     }
                    //Se quita el mensaje de espera:
                    mostrar_mensaje("");
                 }

                
                //Funcion que destapa las celdas que no tienen minas circundantes, recursivamente:
                function destapar_celdas_recursivamente(celda, numero_columna)
                 {
                    //Variable donde se guarda la celda que circunda:
                    var celda_actual_temp = 0;
                    //Variable para saber si se ha llamado recursivamente:
                    var se_ha_llamado_recursivamente = false;
                    //Si la celda no tiene ninguna yasmina alrededor suyo, se procede:
                    if (matriz_numeros[celda== 0)
                     {
                        //En la casilla superior izquierda (si no esta a la izquierda del todo) y si la casilla aun no ha sido descubierta:
                        if (celda-mapa_width->= && numero_columna->= && document.getElementById(celda-mapa_width-1).innerHTML == "" && matriz_usuario[celda-mapa_width-1== 0)
                         {
                            //Se define que celda es la celda circundante actual:
                            celda_actual_temp = celda-mapa_width-1;
                            //Si la matriz circundante actual es tambien un cero, se destapa esta y sus circundantes recursivamente:
                            if (matriz_numeros[celda_actual_temp== 0) { document.getElementById(celda_actual_temp).innerHTML = "&nbsp;"; document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).title = ""; destapar_celdas_recursivamente(celda_actual_temp, numero_columna-1); se_ha_llamado_recursivamente = true}
                            //...pero si la circundante actual es un numero mayor que cero (una celda con minas alrededor), se destapa:
                            else if (!isNaN(matriz_numeros[celda_actual_temp]) && matriz_numeros[celda_actual_temp&& document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).style.color = color_numeros[matriz_numeros[celda_actual_temp]]; document.getElementById(celda_actual_temp).innerHTML = matriz_numeros[celda_actual_temp]; document.getElementById(celda_actual_temp).title = matriz_numeros[celda_actual_temp]}
                            //Se setea en la matriz de usuario como si se huviera destapado:
                            matriz_usuario[celda_actual_temp1;
                            document.getElementById(celda_actual_temp).onclick = function () { }; document.getElementById(celda_actual_temp).onmousedown = function () { }; document.getElementById(celda_actual_temp).onmouseup = function () { }; document.getElementById(celda_actual_temp).onmouseover = function () { }; document.getElementById(celda_actual_temp).onmouseout = function () { }; document.getElementById(celda_actual_temp).style.cursor = "default"
                         
                        //En la casilla superior y la casilla aun no ha sido descubierta:
                        if (celda-mapa_width >= && matriz_usuario[celda-mapa_width== 0)
                         {
                            //Se define que celda es la celda circundante actual:
                            celda_actual_temp = celda-mapa_width;
                            //Si la matriz circundante actual es tambien un cero, se destapa esta y sus circundantes recursivamente:
                            if (matriz_numeros[celda_actual_temp== && document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).innerHTML = "&nbsp;"; document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).title = ""; destapar_celdas_recursivamente(celda_actual_temp, numero_columna); se_ha_llamado_recursivamente = true}
                            //...pero si la circundante actual es un numero mayor que cero (una celda con minas alrededor), se destapa:
                            else if (!isNaN(matriz_numeros[celda_actual_temp]) && matriz_numeros[celda_actual_temp&& document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).style.color = color_numeros[matriz_numeros[celda_actual_temp]]; document.getElementById(celda_actual_temp).innerHTML = matriz_numeros[celda_actual_temp]; document.getElementById(celda_actual_temp).title = matriz_numeros[celda_actual_temp]}
                            //Se setea en la matriz de usuario como si se huviera destapado:
                            matriz_usuario[celda_actual_temp1;
                            document.getElementById(celda_actual_temp).onclick = function () { }; document.getElementById(celda_actual_temp).onmousedown = function () { }; document.getElementById(celda_actual_temp).onmouseup = function () { }; document.getElementById(celda_actual_temp).onmouseover = function () { }; document.getElementById(celda_actual_temp).onmouseout = function () { }; document.getElementById(celda_actual_temp).style.cursor = "default"
                         }
                        //En la casilla superior derecha (si no esta al derecha del todo):
                        if (celda-mapa_width+>= && numero_columna+<= mapa_width && matriz_usuario[celda-mapa_width+1== 0)
                         {
                            //Se define que celda es la celda circundante actual:
                            celda_actual_temp = celda-mapa_width+1;
                            //Si la matriz circundante actual es tambien un cero, se destapa esta y sus circundantes recursivamente:
                            if (matriz_numeros[celda_actual_temp== && document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).innerHTML = "&nbsp;"; document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).title = ""; destapar_celdas_recursivamente(celda_actual_temp, numero_columna+1); se_ha_llamado_recursivamente = true}
                            //...pero si la circundante actual es un numero mayor que cero (una celda con minas alrededor), se destapa:
                            else if (!isNaN(matriz_numeros[celda_actual_temp]) && matriz_numeros[celda_actual_temp&& document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).style.color = color_numeros[matriz_numeros[celda_actual_temp]]; document.getElementById(celda_actual_temp).innerHTML = matriz_numeros[celda_actual_temp]; document.getElementById(celda_actual_temp).title = matriz_numeros[celda_actual_temp]}
                            //Se setea en la matriz de usuario como si se huviera destapado:
                            matriz_usuario[celda_actual_temp1;
                            document.getElementById(celda_actual_temp).onclick = function () { }; document.getElementById(celda_actual_temp).onmousedown = function () { }; document.getElementById(celda_actual_temp).onmouseup = function () { }; document.getElementById(celda_actual_temp).onmouseover = function () { }; document.getElementById(celda_actual_temp).onmouseout = function () { }; document.getElementById(celda_actual_temp).style.cursor = "default"
                         }
                        //En la casilla izquierda (si no esta a la izquierda del todo):
                        if (celda->= && numero_columna->= && matriz_usuario[celda-1== 0)
                         {
                            //Se define que celda es la celda circundante actual:
                            celda_actual_temp = celda-1;
                            //Si la matriz circundante actual es tambien un cero, se destapa esta y sus circundantes recursivamente:
                            if (matriz_numeros[celda_actual_temp== && document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).innerHTML = "&nbsp;"; document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).title = ""; destapar_celdas_recursivamente(celda_actual_temp, numero_columna-1); se_ha_llamado_recursivamente = true}
                            //...pero si la circundante actual es un numero mayor que cero (una celda con minas alrededor), se destapa:
                            else if (!isNaN(matriz_numeros[celda_actual_temp]) && matriz_numeros[celda_actual_temp&& document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).style.color = color_numeros[matriz_numeros[celda_actual_temp]]; document.getElementById(celda_actual_temp).innerHTML = matriz_numeros[celda_actual_temp]; document.getElementById(celda_actual_temp).title = matriz_numeros[celda_actual_temp]}
                            //Se setea en la matriz de usuario como si se huviera destapado:
                            matriz_usuario[celda_actual_temp1;
                            document.getElementById(celda_actual_temp).onclick = function () { }; document.getElementById(celda_actual_temp).onmousedown = function () { }; document.getElementById(celda_actual_temp).onmouseup = function () { }; document.getElementById(celda_actual_temp).onmouseover = function () { }; document.getElementById(celda_actual_temp).onmouseout = function () { }; document.getElementById(celda_actual_temp).style.cursor = "default"
                         }
                        //En la casilla derecha (si no esta a la derecha del todo):
                       if (celda+<= matriz_numeros.length && numero_columna+<= mapa_width && matriz_usuario[celda+1== 0)
                        {
                            //Se define que celda es la celda circundante actual:
                            celda_actual_temp = celda+1;
                            //Si la matriz circundante actual es tambien un cero, se destapa esta y sus circundantes recursivamente:
                            if (matriz_numeros[celda_actual_temp== && document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).innerHTML = "&nbsp;"; document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).title = ""; destapar_celdas_recursivamente(celda_actual_temp, numero_columna+1); se_ha_llamado_recursivamente = true}
                            //...pero si la circundante actual es un numero mayor que cero (una celda con minas alrededor), se destapa:
                            else if (!isNaN(matriz_numeros[celda_actual_temp]) && matriz_numeros[celda_actual_temp&& document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).style.color = color_numeros[matriz_numeros[celda_actual_temp]]; document.getElementById(celda_actual_temp).innerHTML = matriz_numeros[celda_actual_temp]; document.getElementById(celda_actual_temp).title = matriz_numeros[celda_actual_temp]}
                            //Se setea en la matriz de usuario como si se huviera destapado:
                            matriz_usuario[celda_actual_temp1;
                            document.getElementById(celda_actual_temp).onclick = function () { }; document.getElementById(celda_actual_temp).onmousedown = function () { }; document.getElementById(celda_actual_temp).onmouseup = function () { }; document.getElementById(celda_actual_temp).onmouseover = function () { }; document.getElementById(celda_actual_temp).onmouseout = function () { }; document.getElementById(celda_actual_temp).style.cursor = "default"
                        }
                        //En la casilla inferior izquierda (si no esta a la izquierda del todo):
                        if (celda+mapa_width-<= matriz_numeros.length && numero_columna->= && matriz_usuario[celda+mapa_width-1== 0)
                         {
                            //Se define que celda es la celda circundante actual:
                            celda_actual_temp = celda+mapa_width-1;
                            //Si la matriz circundante actual es tambien un cero, se destapa esta y sus circundantes recursivamente:
                            if (matriz_numeros[celda_actual_temp== && document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).innerHTML = "&nbsp;"; document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).title = ""; destapar_celdas_recursivamente(celda_actual_temp, numero_columna-1); se_ha_llamado_recursivamente = true}
                            //...pero si la circundante actual es un numero mayor que cero (una celda con minas alrededor), se destapa:
                            else if (!isNaN(matriz_numeros[celda_actual_temp]) && matriz_numeros[celda_actual_temp&& document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).style.color = color_numeros[matriz_numeros[celda_actual_temp]]; document.getElementById(celda_actual_temp).innerHTML = matriz_numeros[celda_actual_temp]; document.getElementById(celda_actual_temp).title = matriz_numeros[celda_actual_temp]}
                            //Se setea en la matriz de usuario como si se huviera destapado:
                            matriz_usuario[celda_actual_temp1;
                            document.getElementById(celda_actual_temp).onclick = function () { }; document.getElementById(celda_actual_temp).onmousedown = function () { }; document.getElementById(celda_actual_temp).onmouseup = function () { }; document.getElementById(celda_actual_temp).onmouseover = function () { }; document.getElementById(celda_actual_temp).onmouseout = function () { }; document.getElementById(celda_actual_temp).style.cursor = "default"
                         }
                        //En la casilla inferior:
                        if (celda+mapa_width <= matriz_numeros.length && matriz_usuario[celda+mapa_width== 0)
                         {
                            //Se define que celda es la celda circundante actual:
                            celda_actual_temp = celda+mapa_width;
                            //Si la matriz circundante actual es tambien un cero, se destapa esta y sus circundantes recursivamente:
                            if (matriz_numeros[celda_actual_temp== && document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).innerHTML = "&nbsp;"; document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).title = ""; destapar_celdas_recursivamente(celda_actual_temp, numero_columna); se_ha_llamado_recursivamente = true}
                            //...pero si la circundante actual es un numero mayor que cero (una celda con minas alrededor), se destapa:
                            else if (!isNaN(matriz_numeros[celda_actual_temp]) && matriz_numeros[celda_actual_temp&& document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).style.color = color_numeros[matriz_numeros[celda_actual_temp]]; document.getElementById(celda_actual_temp).innerHTML = matriz_numeros[celda_actual_temp]; document.getElementById(celda_actual_temp).title = matriz_numeros[celda_actual_temp]}
                            //Se setea en la matriz de usuario como si se huviera destapado:
                            matriz_usuario[celda_actual_temp1;
                            document.getElementById(celda_actual_temp).onclick = function () { }; document.getElementById(celda_actual_temp).onmousedown = function () { }; document.getElementById(celda_actual_temp).onmouseup = function () { }; document.getElementById(celda_actual_temp).onmouseover = function () { }; document.getElementById(celda_actual_temp).onmouseout = function () { }; document.getElementById(celda_actual_temp).style.cursor = "default"
                         }
                        //En la casilla inferior derecha (si no esta a la derecha del todo):
                        if (celda+mapa_width+<= matriz_numeros.length && numero_columna+<= mapa_width && matriz_usuario[celda+mapa_width+1== 0)
                         {
                            //Se define que celda es la celda circundante actual:
                            celda_actual_temp = celda+mapa_width+1;
                            //Si la matriz circundante actual es tambien un cero, se destapa esta y sus circundantes recursivamente:
                            if (matriz_numeros[celda_actual_temp== && document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).innerHTML = "&nbsp;"; document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).title = ""; destapar_celdas_recursivamente(celda_actual_temp, numero_columna+1); se_ha_llamado_recursivamente = true}
                            //...pero si la circundante actual es un numero mayor que cero (una celda con minas alrededor), se destapa:
                            else if (!isNaN(matriz_numeros[celda_actual_temp]) && matriz_numeros[celda_actual_temp&& document.getElementById(celda_actual_temp).innerHTML == "") { document.getElementById(celda_actual_temp).style.background = "#550000"; document.getElementById(celda_actual_temp).style.color = color_numeros[matriz_numeros[celda_actual_temp]]; document.getElementById(celda_actual_temp).innerHTML = matriz_numeros[celda_actual_temp]; document.getElementById(celda_actual_temp).title = matriz_numeros[celda_actual_temp]}
                            //Se setea en la matriz de usuario como si se huviera destapado:
                            matriz_usuario[celda_actual_temp1;
                            document.getElementById(celda_actual_temp).onclick = function () { }; document.getElementById(celda_actual_temp).onmousedown = function () { }; document.getElementById(celda_actual_temp).onmouseup = function () { }; document.getElementById(celda_actual_temp).onmouseover = function () { }; document.getElementById(celda_actual_temp).onmouseout = function () { }; document.getElementById(celda_actual_temp).style.cursor = "default"
                         }
                     }

                    //Si no se ha llamado recursivamente, sale de la funcion retornando false:
                    if (!se_ha_llamado_recursivamente) { return false}
                    //...y si no, sale retornando true:
                    else return true}
                 }

                
                //Funcion que calcula si se ha ganado:
                function se_ha_ganado()
                 {
                    //Se calculan las minas destapadas:
                    var banderas_puestas_bien = true;
                    var celdas_destapadas = 0;
                    for (x=0; x<matriz_usuario.length; x++)
                     {
                        //Si la celda esta destapada, cuenta como tal:
                        if (matriz_usuario[x== 1) { celdas_destapadas++; }
                        //Si en la celda hay una bandera, pero no hay una mina, se cuenta como que las banderas no estan bien puestas:
                        else if (matriz_usuario[x== && matriz_minas[x!= 1) { banderas_puestas_bien = false}
                     }
                    //Si se han destapado todas las casillas sin mina, se gana destapando el escenario, dando la enhorabuena y luego se vuelve a comenzr el juego:
                    if (banderas_puestas_bien && celdas_destapadas >= mapa_width*mapa_height-numero_minas)
                     {
                        //Destapar el escenario:
                        for (x=0; x<mapa_width*mapa_height; x++)
                         {
                            //Si hay una yasmina, se representa una bandera y se pone el title correspondiente:
                            if (matriz_numeros[x== "X") { document.getElementById(x).innerHTML = '<img src="img/bandera.gif" alt="B" title="Flag" width="'+celda_width+'" height="'+celda_height+'" hspace="0" vspace="0">'; document.getElementById(x).title = "Flag"}
                         }
                        //Se pone conforme el juego se ha acabado:
                        se_ha_acabado_juego = true;
                        //Cambia la cara a la yasmina:
                        document.getElementById("yasmina").innerHTML = '<img src="img/yasmina_win.gif" alt="New game" title="New game" height="30" width="30" hspace="0" vspace="0" align="center">';
                        //Se muestra el mensaje segun se ha ganado:
                        mostrar_mensaje("You won");
                        //Se detiene el temporizador:
                        iniciar_temporizador(false);
                        //Se setea conforme aun no se ha iniciado el temporizador:
                        iniciado_temporizador = false;
                        //Despues de unos milisegundos, da la enhorabuena e inicia el juego posteriormente:
                        setTimeout('mostrar_mensaje("You won"); alert("Congratulations! you won.\\nPress ok to start game again."); document.getElementById("tiempo").innerHTML = 0; mostrar_mensaje("Loading..."); setTimeout(\'iniciar_juego(); mostrar_mensaje(\"\");\', 10);', 10);
                     }
                 }
                 

                //Funcion que produce el fin de juego:
                function game_over()
                 {
                    //Se pone el mensaje de espera:
                    mostrar_mensaje("Loading...");

                    //Destapa toda la matriz:
                    for (x=0; x<mapa_width*mapa_height; x++)
                     {
                        //Si hay una yasmina sin bandera, se representa y se pone el title correspondiente:
                        if (matriz_numeros[x] == "X" && matriz_usuario[x] != 2) { document.getElementById(x).innerHTML = '<img src="img/yasmina.gif" alt="X" title="Yasmina" width="'+celda_width+'" height="'+celda_height+'" hspace="0" vspace="0">'; document.getElementById(x).title = "Yasmina"}
                        //Si hay una yasmina con bandera, se representa y se pone el title correspondiente:
                        else if (matriz_numeros[x== "X" && matriz_usuario[x== 2) { document.getElementById(x).innerHTML = '<img src="img/bandera.gif" alt="B" title="Flag" width="'+celda_width+'" height="'+celda_height+'" hspace="0" vspace="0">'; document.getElementById(x).title = "Flag"}
                        //Si hay una bandera pero no hay una yasmina, se representa:
                        else if (matriz_numeros[x!= "X" && matriz_usuario[x== 2) { document.getElementById(x).innerHTML = '<img src="img/bandera_no.gif" alt="B" title="Wrong flag" width="'+celda_width+'" height="'+celda_height+'" hspace="0" vspace="0">'; document.getElementById(x).title = "Wrong flag"}
                     }

                    //Se pone conforme el juego se ha acabado:
                    se_ha_acabado_juego = true;

                    //Cambia la cara a la yasmina:
                    document.getElementById("yasmina").innerHTML = '<img src="img/yasmina_lose.gif" alt="New game" title="New game" height="30" width="30" hspace="0" vspace="0" align="center">';

                    //Se pone el mensaje de fin de juego:
                    mostrar_mensaje("Came Over");

                    //Se detiene el temporizador:
                    iniciar_temporizador(false);
                    //Se setea conforme aun no se ha iniciado el temporizador:
                    iniciado_temporizador = false;
                        
                    //Despues de unos milisegundos, alerta del GameOver, vuelve los segundos a cero e inicia el juego posteriormente:
                    setTimeout('mostrar_mensaje("Came Over"); alert("Game Over."); mostrar_mensaje("Loading..."); document.getElementById("tiempo").innerHTML = 0; setTimeout(\'iniciar_juego(); mostrar_mensaje(\"\");\', 10);', 10);
                 


                //Funcion que arrastra o deja de arrastrar la ventana de opciones:
                function arrastrar_ventana(e)
                 {
                    //Si la cara de la yasmina es la de haber hecho click (porque ni se ha perdido ni se ha ganado), se cambia a la normal siempre que no este ya puesta:
                    if (!se_ha_acabado_juego && document.getElementById("yasmina").innerHTML != div_cara_yasmina_inicial) { document.getElementById("yasmina").innerHTML = '<img src="img/yasmina.gif" alt="New game" title="New game" height="30" width="30" hspace="0" vspace="0" align="center">'; }
                    
                    //Variable para saber si estamos en Internet Explorer o no:
                    var ie = document.all ? true : false;
                    //Si estamos en internet explorer, se recogen las coordenadas del raton de una forma:
                    if (ie)
                     {
                        posicion_x_raton = event.clientX + document.body.scrollLeft;
                        posicion_y_raton = event.clientY + document.body.scrollTop;
                     }
                    //...pero en otro navegador, se recogen de otra forma:
                    else
                     {
                        document.captureEvents(Event.MOUSEMOVE);
                        posicion_x_raton = e.pageX;
                        posicion_y_raton = e.pageY;
                     
                    //Si las coordenadas X o Y del raton son menores que cero, se ponen a cero:
                    if (posicion_x_raton < 0) { posicion_x_raton = 0; }
                    if (posicion_y_raton < 0) { posicion_y_raton = 0; }

                    //Si se ha enviado arrastrar y no es un campo seleccionable, se arrastra:
                    if (arrastrar_opciones && !campo_seleccionable)
                     {
                        //Si es la primera vez que se arrastra despues del click, se calcula la diferencia inicial:
                        if (!diferencia_posicion_horizontal || !diferencia_posicion_vertical)
                         {
                            //Se calcula la diferencia que hay horizontalmente entre el raton y el div de las opciones:
                            diferencia_posicion_horizontal = eval(posicion_x_raton - parseInt(document.getElementById("menu_opciones").style.left));
                            //Se calcula la diferencia que hay verticalmente entre el raton y el div de las opciones:
                            diferencia_posicion_vertical = eval(posicion_y_raton - parseInt(document.getElementById("menu_opciones").style.top));
                         }
                        //Se calculan las nuevas coordenadas del div de las opciones:
                        var posicion_left_menu = posicion_x_raton - diferencia_posicion_horizontal;
                        var posicion_top_menu = posicion_y_raton - diferencia_posicion_vertical;
                        //Si alguna d las coordenadas fuera menos que cero, se ponen a cero:
                        if (posicion_left_menu < 0) { posicion_left_menu = 0; }
                        if (posicion_top_menu < 0) { posicion_top_menu = 0; }
                        //Se aplican las coordenadas al div de las opciones:                        
                        document.getElementById("menu_opciones").style.left = posicion_left_menu + "px";
                        document.getElementById("menu_opciones").style.top = posicion_top_menu + "px";
                     }
                    //...pero si no se ha enviado arrastrar o se ha dejado de hacer, se vuelve a poner la diferencia inicial a false:
                    else
                     {
                        diferencia_posicion_horizontal = false;
                        diferencia_posicion_vertical = false;
                     }
                 }


                //Funcion que captura la tecla pulsada y alterna las opciones de bandera:
                function tecla_pulsada(e, pulsandose)
                 {
                    //Capturamos la tacla pulsada (o liberada), 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 = 17; } //Si no existe, por defecto se utiliza el Control.

                    //Si la tecla pulsada (o liberada ) no es ni Shift (16), ni Control (17) ni Alt (18), sale de la funcion:
                    if (unicode != 16 && unicode != 17 && unicode != 18) { return; }

                    //Si se ha dejado de pulsar la tecla y no se han cambiado manualmente las opcione de bandera, se vuelven a poner las opciones de bandera como antes (se alternan):
                    if (!pulsandose && !se_ha_modificado_bandera)
                     {
                         //Se alternan las opciones:
                         opcion_seleccionada = (!opcion_seleccionada) ? "bandera" : false;
                         nombre_div = (opcion_seleccionada == "bandera") ? "bandera": "bandera_no";
                         //Quita el borde a todos los div de opciones:
                         document.getElementById("bandera").style.border = ""; //Se borran primero para que el Opera 7.54 no de errores de redraw (y quiza otras versiones).
                         document.getElementById("bandera_no").style.border = ""; //Se borran primero para que el Opera 7.54 no de errores de redraw (y quiza otras versiones).
                         document.getElementById("bandera").style.border = "2px #bbbbbb dotted";
                         document.getElementById("bandera_no").style.border = "2px #bbbbbb dotted";
                         //Pone un borde al div de la opcion seleccionada:
                         document.getElementById(nombre_div).style.border = "2px #ffff00 solid";
                         //Se setea conforme la tecla se ha levantado:
                         tecla_levantada = true;
                     }
                    //...y si se esta pulsando la tecla y se ha levantado la tecla, se captura:
                    else if (tecla_levantada)
                     {
                         //Se setea como que no se han cambiado manualmente las opciones de bandera:
                         se_ha_modificado_bandera = false;
                         //Se setea conforme la tecla aun no se ha levantado:
                         tecla_levantada = false;
                         //Se alternan las opciones:
                         opcion_seleccionada = (!opcion_seleccionada) ? "bandera" : false;
                         nombre_div = (opcion_seleccionada == "bandera") ? "bandera": "bandera_no";
                         //Quita el borde a todos los div de opciones:
                         document.getElementById("bandera").style.border = ""; //Se borran primero para que el Opera 7.54 no de errores de redraw (y quiza otras versiones).
                         document.getElementById("bandera_no").style.border = ""; //Se borran primero para que el Opera 7.54 no de errores de redraw (y quiza otras versiones).
                         document.getElementById("bandera").style.border = "2px #bbbbbb dotted";
                         document.getElementById("bandera_no").style.border = "2px #bbbbbb dotted";
                         //Pone un borde al div de la opcion seleccionada:
                         document.getElementById(nombre_div).style.border = "2px #ffff00 solid";
                     }        
                 }

                
                //Funcion que inicia o detiene el temporizador:
                function iniciar_temporizador(encender)
                 {
                     //Si no hay limite de tiempo, sale de la funcion:
                     if (!hay_tiempo_limite) { return; }
                     //Si se ha enciado false, se detiene el temporizador:
                     if (!encender)
                      {
                         //Se detiene el setInterval:
                         clearInterval(tiempo);
                         //Se setea la variable que guarda el setInterval a false:
                         tiempo = false;
                         //Se ponen los segundos a cero:
                         segundos = 0;
                      }
                    //...pero si no, se inicia:
                    else
                     {
                         //Si no se ha iniciado aun el temporizador, se inicia:
                         if (!tiempo)
                          {
                             //Se pone el tiempo a cero:
                             document.getElementById("tiempo").innerHTML = "0000";
                             segundos = 0;
                             //Se crea el setInterval:
                             tiempo = setInterval("segundos++; iniciar_temporizador(true);", 1000);
                          }
                         //Se representa en el div:
                         document.getElementById("tiempo").innerHTML = segundos;
                         //Si se ha llegado al tiempo limite, siempre que haya, se acaba el juego:
                         if (hay_tiempo_limite && segundos >= tiempo_limite) { alert("Time has expired."); game_over(); }
                     }
                 }

            // -->
        </script>
    </head>
    <body onLoad="iniciar_juego_primera_vez();" onMouseMove="javascript:arrastrar_ventana(event);" onMouseUp="javascript:arrastrar_opciones=false;" onClick="campo_seleccionable=false; arrastrar_opciones=false;" onKeyDown="javascript:tecla_pulsada(event, true);" onKeyUp="javascript:tecla_pulsada(event, false);" bgcolor="#efdddd" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
        <!-- Menu: -->
        <div id="menu" style="left:10px; top:10px; width:200px; height:40px; position:absolute; border:0px; padding:0px; background:#336666; color:#333333; text-align:left; line-height:20px; text-decoration:none; font-family:verdana; font-size:10px; z-index:2;">
            <div id="bandera" style="left:10px; top:2px; width:26px; height:20px; position:absolute; border:2px #bbbbbb dotted; padding:0px; background:transparent; color:#333333; text-align:center; line-height:20px; text-decoration:none; font-family:verdana; font-size:10px; cursor: pointer; cursor: hand; z-index:3;" onClick="javascript:seleccionar_opcion('bandera', 'bandera');">
                <img src="img/bandera.gif" alt="Put flag" title="Put flag (alternate option: ALT GR + CLICK or SHIFT + CLICK or CONTROL + CLICK)" height="20" width="20" hspace="0" vspace="0" align="center">
            </div>
            <div id="bandera_no" style="left:42px; top:2px; width:26px; height:20px; position:absolute; border:2px #ffff00 solid; padding:0px; background:transparent; color:#333333; text-align:center; line-height:20px; text-decoration:none; font-family:verdana; font-size:10px; cursor: pointer; cursor: hand; z-index:3;" onClick="javascript:seleccionar_opcion(false, 'bandera_no');">
                <img src="img/bandera_no.gif" alt="Clear flag" title="Clear flag (alternate option: ALT GR + CLICK or SHIFT + CLICK or CONTROL + CLICK)" height="20" width="20" hspace="0" vspace="0" align="center">
            </div>
            <div id="contador_banderas" style="left:24px; top:27px; width:30px; height:12px; position:absolute; border:0px; padding:0px; background:#000000; color:#ffff00; text-align:center; line-height:12px; text-decoration:none; font-family:arial; font-size:11px; cursor:default; z-index:3;" title="Remaining flags">
                10
            </div>
            <div id="yasmina" style="left:85px; top:5px; width:30px; height:30px; position:absolute; border:0px; padding:0px; background:transparent; color:#333333; text-align:left; line-height:20px; text-decoration:none; font-family:verdana; font-size:10px; cursor: pointer; cursor: hand; z-index:3;" onClick="javascript:reiniciar_juego();">
                <img src="img/yasmina.gif" alt="New game" title="New game" height="30" width="30" hspace="0" vspace="0" align="center">
            </div>
            <div id="tiempo" style="left:130px; top:5px; width:60px; height:22px; position:absolute; border:0px; padding:0px; background:#000000; color:#ffff00; text-align:center; line-height:20px; text-decoration:none; font-family:verdana; font-size:18px; cursor:default; z-index:3;" title="Time count">
                0
            </div>
        </div>
        <!-- Fin de Menu. -->
        <div id="menu_opciones" style="left:150px; top:50px; width:280px; height:290px; visibility:hidden; position:absolute; border:0px; padding:0px; background:#3344dd; color:#ffffff; text-align:center; line-height:20px; text-decoration:none; font-weight:bold; font-family:arial; font-size:16px; cursor:crosshair; filter:alpha(opacity=90); opacity:0.9; -moz-opacity:0.9; z-index:4;" onMouseDown="javascript:arrastrar_opciones=true;" onMouseUp="javascript:arrastrar_opciones=false;" onSelectStart="if (!campo_seleccionable) { return false}" onClick="javascript:campo_seleccionable=false; arrastrar_opciones=false;">
            <div id="cerrar_opciones" style="left:260px; top:5px; width:12px; height:12px; position:absolute; border:0px; padding:0px; background:transparent; color:#ffffff; text-align:center; line-height:12px; text-decoration:none; font-family:arial; font-size:12px; cursor: pointer; cursor: hand; -moz-user-select:none; z-index:5;" title="Close options" onClick="javascript:mostrar_ocultar_opciones();" onMouseOver="javascript:document.getElementById('cerrar_opciones').style.color='#ffff00';" onMouseOut="javascript:document.getElementById('cerrar_opciones').style.color='#ffffff';">[x]</div>
            <br>
            &nbsp; Option menu
            <br>
            <br>
            <form style="font-family:arial; font-size:14px; display:inline;" onSubmit="javascript:aplicar_opciones(); return false;">
                <label for="numero_minas" accesskey="n" title="Number of mines" style="cursor: pointer; cursor: hand;"><b style="-moz-user-select:none;"><u>N</u>umber of mines:</b> <input type="text" name="numero_minas" value="10" id="numero_minas" accesskey="n" maxlength="3" size="3" style="text-align:center; width:40px; height:22px; font-size:14px; line-height:14px; font-family:courier; font-weight:bold; color:#333333; background-color:#99bbff;" title="Number of mines" onMouseDown="javascript:campo_seleccionable=true;" onMouseUp="javascript:campo_seleccionable=false;"></label>
                <br>
                <br>
                <label for="mapa_width" accesskey="w" title="Map width" style="cursor: pointer; cursor: hand;"><b style="-moz-user-select:none;">Map <u>w</u>idth:</b> <input type="text" name="mapa_width" value="10" id="mapa_width" accesskey="w" maxlength="3" size="3" style="text-align:center; width:40px; height:22px; font-size:14px; line-height:14px; font-family:courier; font-weight:bold; color:#333333; background-color:#99bbff;" title="Map width" onMouseDown="javascript:campo_seleccionable=true;" onMouseUp="javascript:campo_seleccionable=false;"></label>
                <br>
                <br>
                <label for="mapa_height" accesskey="h" title="Map height" style="cursor: pointer; cursor: hand;"><b style="-moz-user-select:none;">Map <u>h</u>eight:</b> <input type="text" name="mapa_height" value="10" id="mapa_height" accesskey="h" maxlength="3" size="3" style="text-align:center; width:40px; height:22px; font-size:14px; line-height:14px; font-family:courier; font-weight:bold; color:#333333; background-color:#99bbff;" title="Map height" onMouseDown="javascript:campo_seleccionable=true;" onMouseUp="javascript:campo_seleccionable=false;"></label>
                <br>
                <br>
                <label for="hay_tiempo_limite_input" accesskey="l" title="On/Off time limit" style="cursor: pointer; cursor: hand;"><input type="checkbox" name="hay_tiempo_limite_input" id="hay_tiempo_limite_input" accesskey="l" title="On/Off time limit" onMouseDown="javascript:campo_seleccionable=true;" onMouseUp="javascript:campo_seleccionable=false;" onClick="javascript:activar_desactivar_tiempo_limite();"><b style="-moz-user-select:none;">Time <u>l</u>imit</b></label>
                <br>
                <label for="tiempo_limite_input" accesskey="t" title="Time limit in seconds" style="cursor: pointer; cursor: hand;"><b style="-moz-user-select:none;"><u>T</u>ime limit (seconds):</b> <input type="text" name="tiempo_limite_input" value="9999" id="tiempo_limite_input" accesskey="t" maxlength="4" size="4" style="text-align:center; width:40px; height:22px; font-size:14px; line-height:14px; font-family:courier; font-weight:bold; color:#3333dd; background-color:#999999;" title="Time limit in seconds" onMouseDown="javascript:campo_seleccionable=true;" onMouseUp="javascript:campo_seleccionable=false;" disabled="true"></label>
                <br>
                <br>
                <input type="button" value="Apply" name="boton_aplicar" title="Apply options" style="font-size:12px; font-family:arial; background-color:#ddddff; color:#bb0000; width:50px; height:22px; cursor: pointer; cursor: hand;" onClick="javascript:aplicar_opciones();">
            </form>
            <br>
        </div>
        <!-- Opciones: -->
        <!-- Fin de Opciones.-->
        <!-- Mensaje: -->
        <div id="mensaje" style="left:220px; top:25px; width:200px; height:20px; position:absolute; visibility:visible; border:0px; padding:0px; background:#aaaadd; color:#333333; text-align:center; line-height:18px; font-family:verdana; font-size:18px; text-decoration:none; font-style:italic; font-weight:bold; filter:alpha(opacity=90); opacity:0.9; -moz-opacity:0.9; z-index:30;">Loading...</div>
        <!-- Fin de Mensaje. -->
        <!-- Zona de juego: -->
        <div id="zona_juego" style="left:10px; top:55px; width:200px; height:200px; position:absolute; border:0px; padding:0px; background:#aaaaaa; color:#333333; text-align:left; line-height:20px; text-decoration:none; font-family:verdana; font-size:10px; z-index:1;" onContextMenu="return false;">
        </div>
        <!-- Fin de Zona de juego. -->
        <!-- Imagenes puestas en un div hidden para que al ponerlas en otro div del documento no tarden en cargar: -->
        <div style="visibility:hidden; position:absolute;"><img src="img/yasmina_click.gif"></div>
        <div style="visibility:hidden; position:absolute;"><img src="img/yasmina_win.gif"></div>
        <div style="visibility:hidden; position:absolute;"><img src="img/yasmina_lose.gif"></div>
        <div style="visibility:hidden; position:absolute;"><img src="img/yasmina.gif"></div>
        <div style="visibility:hidden; position:absolute;"><img src="img/bandera.gif"></div>
        <div style="visibility:hidden; position:absolute;"><img src="img/bandera_no.gif"></div>
        <!--  Fin de Imagenes puestas en un div hidden para que al ponerlas en otro div del documento no tarden en cargar. -->
        <!-- Informacion: -->
        <div id="informacion" style="left:10px; top:560px; 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:10px; z-index:3;">
            &copy; <b>Buscayasminas</b> 0.30a by <i>Joan Alba Maldonado</i> (<a href="mailto:granvino@granvino.com;">granvino@granvino.com</a>&nbsp;<sup>(DHTML 100%)</sup>
            <br>&nbsp;&nbsp;- Prohibited to publish, reproduce or modify without maintain author's name.
            <br>
            &nbsp;&nbsp;<i>Dedicated to Yasmina Llaveria del Castillo</i>
        <!-- Fin de Informacion. -->
    </body>
</html>

           
       
buscayasminas_english.zip( 16 k)
Related examples in the same category
1. Chess: Draughts
2. Word search game
3. Ranisima english
4. Yasminuroban (by Joan Alba Maldonado)
5. Level editor for Yasminuroban by Joan Alba Maldonado
6. js mine sweeper
7. Another tictactoe
8. Marbles
9. Jigsaw
10. Game sudoku
11. Game PunkPong
12. Tetris in Javascript
13. Arrange Game
14. Guess Number
15. Tic tac toe
16. Count Game
17.  A JavaScript Hangman Game
18. Game library
19. Type Tutor
20. Game: Place It (IE only)
21. HylZee
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.