Snapfit: Un script para generar puzzles

Snapfit es un script que permite generar puzzles de cualquier imagen y que puede ser utilizado en la mayoría de los navegadores de última generación.

Lo podemos incluir directamente en la plantilla o en una entrada, para eso, basta descargar el ZIP que incluye un demo y alojar el archivo snapfit.js en un servidor. Luego, lo agregamos como a cualquier otro:

<script type="text/javascript" src="URL_snapfit.js"></script>

Para utilizarla, basta que agreguemos onload="snapfit.add(this);" a la etiqueta IMG que conviene que este siempre contenida en un DIV:

<div>
<img onLoad="snapfit.add(this);" width="valor" height="valor" id="nombre" src="URL_imagen" />
</div>

Así, sin parámetros, ya podemos acceder a las distintas funciones que se manejan con el teclado o el ratón:

Mover: click y arrastrar
Rotar: con doble click gira 90º en el sentido de las agujas del reloj
Flip Horizontal: doble click + ALT o botón derecho
Flip Vertical: doble click + SHIFT o botón central
Reset: tecla ESC
Mezclar: tecla SUPR o BCKSP
Resolver: tecla ENTER

Con parámetros, podemos controlar la forma en que se mostrará la imagen:

Mezclar: snapfit.admix(ID_imagen);
Resolver: snapfit.solve(ID_imagen);
Cambiar el nivel: snapfit.reset(ID_imagen, valor); donde valor puede variar entre 0 y 6

Esto, lo podemos aplicar, por ejemplo, con un enlace:

<a href="javascript:void(0);" onclick="snapfit.solve(document.getElementById('ID_imagen'));"> Resolver </a>

Todo eso también lo podemos agregar en el el evento onload de la imagen como parámetros; por ejemplo, esto haría que se mostrara mezclado en el nivel más difícil:

onload="snapfit.add(this,{level:6,mixed:true});"

Hay más parámetros que controlan otros detalles:

mixed mezclado o no, true o false (por defecto es false)
simple mezcla solo las posicioes (por defecto es false)
level valores 0 a 6 (por defecto es 3)
nokeys si es true se deshabilita el uso del teclado (por defecto es false)
polygon si es true se usan polígonos en lugar de rectángulos (por defecto es false)
aimage si es true, el fondo es la imagen original (por defecto es false)
aborder si es true se agrega un borde (por defecto es false)
aopacity es la opacidad del fondo (por defecto es 0.33)
bopacity es la opacidad del borde de las piezas (por defecto es 0.50)
sopacity es la opacidad de la pieza activa (por defecto es 0.75)
mcolor, fcolor, acolor y bcolor controlan los colores

Hay muchos otros detalles y funciones para personalizar el script; la llamada callback la utilizamos para ejecutar funciones extras, por ejemplo, mostrar una ventana de alerta cuando el puzzle ha sido resuelto:

onload="snapfit.add(this,{callback: function() {alert('Ha resuelto el puzzle.');},level:4,mixed:true,polygon:true});"