El diario de Pepe Molina (Caricatos)

Veremos como podemos resolver un sudoku introduciendo los números por teclado.

Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

RSS de las imágenes:

La Cita

Mucha gente cree que para triunfar en la vida basta con levantarse temprano. Pero no, también es necesario levantarse de buen humor

Marcel Achard, escritor francés (1899-1974).

En esta zona están las páginas personales del autor.

Mis Enlaces

Mis clientes ahora también son mis amigos (aunque les cobre).

Mis Clientes

En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..

Mis Amigos Informáticos

En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)

Mis Amigos Artistas

Las recomendaciones que proponemos son de índole variada.

Mis recomendaciones

Aquí un cajón de sastre de enlaces.

Interés General

Nos referencian desde sitios de toda índole.

Referencias externas

Puede contribuir a mantener esta página con su donativo.

SVG interactivo: sudokus

Publicado el día 09 de febrero de 2013
id=115; categorías: Vicisitudes de un Webmaster, Mentes pensantes, Globalización, Programación

Veremos como podemos resolver un sudoku introduciendo los números por teclado. No intentaremos resolverlo con código, ya que nuestra intención es otra: la interacción.

Podemos escoger entre los sudokus en miniatura, o incluír cada número pulsando sobre cada casilla. En este caso no hacemos ninguna verificación.

Puede seleccionar una miniatura
sudoku alternativo

Algunos de los ejemplos los hemos visto ya en anteriores apuntes.

Eventos

Para responder a un evento hay que asociarlo de la misma forma que con cualquier elemento html. Hemos asignado un identificador "id" a cada casilla de forma que la primera tiene id="casilla_0_0" y la última : id="casilla_8_8"; y dentro de cada casilla tenemos un elemento "text" (texto) con similar identificador, reemplazando "casilla_" por "txt_":

function tag(id)	{return document.getElementById(id);}
function poner_evento(elemento, evento, f)	{
	if (document.addEventListener)
		elemento.addEventListener(evento, f, true);
	else
		if (document.attachEvent)
			elemento.attachEvent("on" + evento, f);
		else
			elemento["on" + evento] = f;
}
// De la inicialización de la página, nos interesan estas pocas líneas.
for (i = 0; i < 9; i++)	for (j = 0; j < 9; j++)	{
	tag("txt_" + i + "_" + j).appendChild(document.createTextNode(""));
	poner_evento(tag("casilla_" + i + "_" + j), "click", entrada);
}

Podemos resumir en estas pocas líneas que a cada casilla le asociamos al evento "click" (onclick) la función "entrada()" que mostramos a continuación:

function entrada() {
	id = this.id;
	coleta = id.substr(8);
	xy = coleta.split("_");
	n_actual = tag("txt_" + coleta).firstChild.data;
	n = prompt("nuevo valor para la casilla [" + xy + "] : ", n_actual)[0];
	if ("123456789".indexOf(n) != -1)	{
		sudoku = document.forms.form_sudoku.inicio.value;
		valores = sudoku.split("");
		posi = parseInt(xy[0]) * 9 + parseInt(xy[1]);
		valores[posi] = n;
		document.forms.form_sudoku.inicio.value = valores.join("");
		tag("txt_" + coleta).replaceChild(document.createTextNode(n), tag("txt_" + coleta).firstChild);
	}
}

Sobre este último código, solo reseñaremos que tanto la lectura como escritura de nodos de texto se hace de la misma manera que hemos hecho hasta el momento.

<< primer apunte < apunte anterior apunte siguiente > último apunte >>