Home Guide Crea il tuo puzzle personalizzato con JQuery!

Crea il tuo puzzle personalizzato con JQuery!

Credo che tutti conosciate il gioco del 15, ovvero quel puzzle a tessere scorrevoli incastonate inil logo di webinblack, come si presenterebbe nel gioco delle mattonelle una cornice quadrata, che compongono una sequenza numerica e/o una immagine. Ciò che forse non sapevate è che realizzarne una versione personalizzata da giocare online è più facile di quanto non immaginate.

Grazie ad uno script basato sul frameworks JQuery, in pochi passaggi e con gran semplicità, il buon Ben Nadel (per chi non lo conoscesse: un autentico DRAGO di JavaScript), sul suo blog personale  ci da le indicazioni su come fare. Per tutti quelli che tra voi non hanno ancora “socializzato con la lingua d’oltremanica”, ecco una spiegazione pratica (e tricolore) a riguardo.

Mi rendo conto che l’argomento in oggetto non sia proprio il top in quanto ad utilità, ma si tratta di un qualcosa che è quantomeno d’effetto.

Addentriamoci.

Premesso che se vi inoltrerete nella ricerca per “puzzle jQuery“, troverete altre valide alternative, ho preferito parlarvi di questa particolare versione anche per via del sito su cui trovate lo script, molto carino e comunicativo.

Per cominciare creiamo una cartella all’interno della quale copiare gli script “jquery.puzzle.js” e “jquery-latest.pack.js“, e salvare il file in cui verrà coordinato il tutto e -ovviamente- una immagine.

questo indirizzo, potrete trovare una spiegazione e le relative snippet di codice, ma il mio consiglio (yeti-style) è quello di scaricare la pagina Demo per intera, quindi ricavare i files sopraindicati e successivamente incollare il seguente codice all’interno di un file vuoto, che salverete in formato html.

[spoiler show=”Mostra codice HTML” hide=”Nascondi codice HTML”]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>

<head>

<title>jQuery Demo: Creating A Sliding Image Puzzle</title><script type=”text/javascript” src=”jquery-latest.pack.js”></script>

<script type=”text/javascript” src=”jquery.puzzle.js”></script>

<script type=”text/javascript”>// When the document is ready, hook up the puzzle

// functionality to the targeted DIVs.

$(

function(){

$( “div.puzzle, p” ).puzzle( 100 );

}

);

</script>
</head>
<body>

<h1>
Grazie WebinBlack!
</h1>

<p>
All’interno del DIV, si comporrà il puzzle.
</p>

<div
class=”puzzle”
style=”float: left ; margin-right: 50px ;”>

<img
src=”./il/link/alla/vostra/immagine”
width=”333″
height=”500″
alt=”Il  mio puzzle!!”
/>

</div>

</div>

</body>
</html>[/spoiler]

E’ assodato che se i files non si dovessero trovare nella stessa cartella della pagina che li richiama, il path relativo ad essi andrà corretto opportunamente(più lungo a dirsi che a farsi). Altro fattore da tenere a mente è che lo spazio deve essere proporzionato alla vostra immagine, e a tal riguardo, andranno compilati i  parametri  (width ed height) relativi ai lati del file che avrete scelto (non dimenticate di indicare anche il path!). A questo punto, salvo errori di battitura, la vostra pagina sarà pronta…il gioco è fatto (è il caso di dirlo).

Troppo facile, no?

Luigi Lacquaniti
Web designer freelance.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here

Ultime dal Blog

Google Maps: ora visibile anche il tachimetro mentre si guida

Da qualche settimana il famoso navigatore made in Google sta (finalmente) implementando delle funzioni prese in prestito dal suo fratellino Waze. Dopo aver visto...

Mounty: ed i dischi NTFS non sono più un tabù su MacOS

Chi possiede un Mac da diversi anni sa bene quanto sia poco intuitivo ed immediato poter scrivere su un disco esterno in formato NTFS. Il...

Tor Browser: la prima versione stabile è disponibile per Android

Tor, per chi non lo conoscesse, è un sistema di reti che permette di navigare nel web restando completamente anonimi e senza essere tracciati...

Share Mouse: controlla più computer usando un solo mouse

Oggi vi parleremo di Share Mouse, software veramente utile che vi permetterà di poter controllare più computer, usando un solo mouse e una sola...

SanDisk mette in vendita (a poco più di 500 €) la prima SD da 1TB

Se siete uno di quelli sempre a corto di spazio nel vostro smartphone (...o sulla vostra Nintendo Switch), SanDisk è pronta a soddisfare ogni...