Foros del Web » Programando para Internet » Javascript »

Creacion de cuadricula

 Estas en el tema de Creacion de cuadricula en el foro de Javascript en Foros del Web. Buenas! Estoy trabajando en un proyecto que incluye un sudoku. Para crear el tablero, usé un script. Necesitaría, de algun modo, que se delimitaran las ...
  #1 (permalink)  
Antiguo 26/01/2008, 05:57
Avatar de Afontcu  
Fecha de Ingreso: enero-2008
Mensajes: 14
Antigüedad: 16 años, 3 meses
Puntos: 0
Sonrisa Creacion de cuadricula
Buenas!

Estoy trabajando en un proyecto que incluye un sudoku. Para crear el tablero, usé un script.

Necesitaría, de algun modo, que se delimitaran las casillas para formar las 9 cuadriculas que hay. Es decir, cambiar el grosor de algunas casillas.

Alguien sabe como hacerlo?


Muchas gracias por vuestro tiempo!
Última edición por Afontcu; 26/01/2008 a las 06:50
  #2 (permalink)  
Antiguo 26/01/2008, 11:03
Avatar de derkenuke
Colaborador
  
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
Re: Creacion de cuadricula
Hola Afontcu:

Yo trabajé en un proyecto similar, también era un sudoku. ¿Cómo tienes organizadas las casillas? ¿Es con un elemento <TABLE>? ¿Con DIVs? Yo lo hice en su día con DIVs, dejando un espacio más amplio entre los grupos de tres que entre las celdas normales.

Quizás viendo el bucle que genera las casillas te pueda aportar algo.

Saludos.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #3 (permalink)  
Antiguo 26/01/2008, 12:06
Avatar de Afontcu  
Fecha de Ingreso: enero-2008
Mensajes: 14
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: Creacion de cuadricula
Hola!

Son inputs de botón con size=1

Te pego el código, pero es una chapuza, solamente lo hice para ver como quedaba. Como podrás comprobar, el width del tablero es el numero de casillas multiplicado por 21...Es 21 porque fui probando hasta encontrar un valor que quedase bien. 100% Chapuza :-p :-p

Código HTML:
function omple(num,inici) 	
	{
	var cadena="";
	var index=0;
		for(j=0;j<num;j++)
		{
			cadena+="<div style='width:"+(num*21)+"px;' >"; 	
				for(i=0;i<num;i++)
				{
					valor=inici.substr(index,1);	 
						if(valor==0)
						{
							valor="";	
						}

                                                    cadena+="<div class='casella'><input id='box"+i+j+"' type=accesskey class='boto' value='"+valor+"' maxlength='1' size='1' /></div>

index++;
				} 
				
			cadena+="</div>";
		} 
				document.getElementById('tauler').innerHTML=cadena;
	}

Gracias, saludos!
  #4 (permalink)  
Antiguo 27/01/2008, 06:46
Avatar de Afontcu  
Fecha de Ingreso: enero-2008
Mensajes: 14
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: Creacion de cuadricula
Espero que habiendo puesto el script podáis ayudarme
  #5 (permalink)  
Antiguo 27/01/2008, 08:43
Avatar de derkenuke
Colaborador
  
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
Re: Creacion de cuadricula
Hola de nuevo Afontcu:

No sé qué valor le das a num, pero supongo que será 9 porque el sudoku es 9x9. Yo lo que hacía era bucles for anidados:
Código PHP:
for(var a=0; a<9; a++) {
  //bloques grandes enteros de 9 casillas
  for(var i=0; i<3; i++) {
    // filas dentro del bloque de 3x3
    for(var j=0; j<3; j++) {
      //columnas dentro del bloque de 3x3
    }
  }
} 
Así veía más fácil controlar los formatos del bloque de 9x9. El for de la i y de la j casi se podrían aunar en uno sólo, ya que la posición de los cuadros se controlaría con CSS.

Puedes intentar esa idea.



Respecto a diferenciar los bordes de los <input> lo veo bastante complicado... habría que identificar cada input para saber su posición, y según ésta decidir qué bordes serán gordos y cuales finos... Lo más fácil es plantearte el código HTML con el que quieres acabar, y a partir de ahí trabajar en javascript. He planteado ésto, y ajustado los valores para Firefox (en IE supongo que no cuadrará):
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
.sudoku {
    width: 303px;
}
.bloque9x9 {
    width: 96px;
    background-color:red;
    float: left;
    margin: 0 5px 5px 0;
}
.boto { 
    border: solid 1px black;
    float:left;
    width: 30px;
    padding:0;
    margin:0;
}
</style>
</head>

<body>



<div class="sudoku">

    <!-- #1 -->
    <div class="bloque9x9">
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
    </div>

    <!-- #2 -->
    <div class="bloque9x9">
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
    </div>

    <!-- #3 -->
    <div class="bloque9x9">
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
    </div>

    <!-- #4 -->
    <div class="bloque9x9">
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
    </div>

    <!-- #5 -->
    <div class="bloque9x9">
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
    </div>

    <!-- #6 -->
    <div class="bloque9x9">
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
    </div>

    <!-- #7 -->
    <div class="bloque9x9">
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
    </div>

    <!-- #8 -->
    <div class="bloque9x9">
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
    </div>

    <!-- #9 -->
    <div class="bloque9x9">
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
        <input type="text" class='boto' value='' maxlength='1' size='1' />
    </div>

</div>



</body>
</html> 

Bueno, sigue investigando, el tema no es muy complicado.


Saludos
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #6 (permalink)  
Antiguo 27/01/2008, 08:56
Avatar de Afontcu  
Fecha de Ingreso: enero-2008
Mensajes: 14
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: Creacion de cuadricula
Muchas gracias por tu respuesta!!


Lo que pasa es que yo tengo la funcion omple(9) y luego la uso en otros documentos para llamar distintos elementos de una BD. Bueno, el caso es que me gustaria poder realizar la casilla desde un javascript para no tener que eliminar la funcion que ya estoy usando. No se si se me entiende...
Porque para mostrar el sudoku yo hago lo siguiente:

Código PHP:
<script language="javascript">  
        omple(9,'<? echo $resultat['COMBINACIO'];?>');
            </script>
Siendo omple(9) la funcion javcascript. Lo demás es para obtener los numeros desde la BD


Mi duda es: con ese código HTML que me has pasado, que está muy bien, ¿Tengo alguna manera de inserirlo dentro de mi función (la anterior), eliminando eso de
cadena+="<div class='casella'><input id='box"+i+j+"' type=accesskey class='boto' value='"+valor+"' maxlength='1' size='1' /></div>
???


Gracias de nuevo!
Última edición por Afontcu; 27/01/2008 a las 09:07
  #7 (permalink)  
Antiguo 27/01/2008, 10:27
Avatar de derkenuke
Colaborador
  
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
Re: Creacion de cuadricula
Cita:
Iniciado por derkenuke Ver Mensaje
Lo más fácil es plantearte el código HTML con el que quieres acabar, y a partir de ahí trabajar en javascript.
Cita:
Iniciado por Afontcu Ver Mensaje
Lo que pasa es que yo tengo la funcion omple(9) y luego la uso en otros documentos para llamar distintos elementos de una BD. Bueno, el caso es que me gustaria poder realizar la casilla desde un javascript para no tener que eliminar la funcion que ya estoy usando. No se si se me entiende...
Lo que yo quería decir es que primero plantees lo que quieres que salga como resultado en HTML, y luego pases a traducirlo a javascript, para que tu función lo escriba por ti (y no tener que dejar plasmado todo el HTML en el documento).


El código HTML que yo te he escrito se puede hacer muy fácil con 3 bucles for: Uno para los bloques de 9x9 (de 0 a 9) y otro con cada input (de 0 a 9 también). Con eso tendríamos toda la estructura que escribiríamos en el DIV .sudoku, por ejemplo.


Espero que se me haya entendido mejor.

Saludos.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #8 (permalink)  
Antiguo 27/01/2008, 10:59
Avatar de Afontcu  
Fecha de Ingreso: enero-2008
Mensajes: 14
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: Creacion de cuadricula
Es decir, hacer un javascript con las propiedades del HTML que has puesto arriba usando la estructura de los tres bucles for.


Voy a probar, muchas gracias por tu tiempo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:22.