Snapfit: Um script para gerar quebra-cabeças

Snapfit é uma script que gera quebra-cabeças qualquer imagem que possa ser usado na maioria dos browsers de última geração.

Podemos incluir diretamente no modelo ou uma entrada para isso, basta baixar o ZIP que inclui uma demonstração e hospedar o arquivo em um snapfit.js servidor. Em seguida, adicioná-lo como qualquer outro:

 

src = "URL_snapfit.js">

 

Para usar, basta adicionar onload = "   snapfit.add (this);"   

para o tag IMG que esta sempre contido em uma DIV:

 

" width = "valor"Height ="valor"Id ="nome"

Src ="URL_imagen"/>

Assim, sem parâmetros, podemos acessar as diversas funções que são tratadas com o teclado ou mouse:

Mover: Clique e arraste
Girar : Dê um duplo clique gira 90 graus no sentido horário do relógio
Flip Horizontal : ALT + clique duplo ou clique direito
Flip Vertical : Dê um duplo clique ou botão do mouse SHIFT + média
Reset : CES
Mix : DELETE ou BCKSP
Resolver : Tecla ENTER

Parâmetros, podemos controlar a forma de exibir a imagem:

Mix: snapfit.admix (ID_imagen);
Resolve: snapfit.solve (ID_imagen);
Mudança de nível: snapfit.reset (ID_imagen, valor), Onde o valor pode variar entre 0 e 6

Isto, podemos aplicar, por exemplo, com um link:

 

" onclick = "snapfit.solve 

(document.getElementById 

('ID_imagenResolver'));"> 

Mix | Resolver | Fácil | Médio | Difícil

Tudo o que podemos acrescentar também no caso onload a imagem como parâmetros, por exemplo, isso mostraria que misturada no nível mais difícil:

 

onload = "snapfit.add (esta {nível: 6, mistos: true});"

 

Vários parâmetros que controlam outros detalhes:

mistas mistas ou não, verdadeiro ou falso (o padrão é falso)
simples mistura apenas as posições (o padrão é falso)
nível valores 0-6 (padrão é 3)
nokeys se desativa verdade que o uso do teclado (o padrão é falso)
polígono se polígonos verdade são usados em vez de retângulos (o padrão é falso)
aimag se for verdade, o fundo é a imagem original (o padrão é falso)
endereço verdade se você adicionar um limite (o padrão é falso)
aopacity é a opacidade do fundo (o padrão é 0,33)
bopacity é a opacidade das partes de borda (o padrão é 0,50)
sopacity é a opacidade da parte ativa (o padrão é 0,75)
mcolor , fcolor, acolor e bcolor controle de cor

Há muitos outros detalhes e recursos para personalizar a script, A chamada callback usá-lo para executar funções adicionais, por exemplo, mostrar uma janela de alerta quando o enigma foi resolvido:

 

onload = "snapfit.add (este, 

{callback: function () 

{alert ('resolveu o nível .');}, 

puzzle: 4, 

mista: true polígono: true});"

RESOLVE

MIX

VEJA IMAGENS

fonte e créditos:
http://vagabundia.blogspot.com/2010/10/snapfit-un-script-para-generar-puzzles.html















e, recebi em meu e-mail:

 

Vagabundia  para mim

Vagabundia

---

Snapfit: Un script para generar puzzles Posted: 14 Oct 2010 08:00 PM PDT 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: Para utilizarla, basta que agreguemos onload="snapfit.add(this);" a la etiqueta IMG que conviene que este siempre contenida en un DIV: valor" height="valor" id="nombre" src="URL_imagen" /> 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: ID_imagen'));"> Resolver Mezclar | Resolver | Fácil | Medio | Difícil 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});" RESOLVER MEZCLAR VER IMAGEN Vagabundia

You are subscribed to email updates from Vagabundia




















http://mensagensdiversificadas1.blogspot.com  

Categories: dicas