Ricomporre un Puzzle

**alesssia** · 16-05-2004, 16:56

Spero di essere il più chiara possibile...

Io devo creare due versioni di un sito: una interattiva e una, diciamo, di "presentazione".
In questo sito esiste una pagina, composta solo da una tabella 4x4 che contiene 16 immagini che si dispongono, casualmente, nelle caselle della tabella. Queste 16 immagini, nell'opportuno ordine, generano l'immagine completa.

Nella versione interattiva con il click del mouse è possibile spostare le immagini così da ricomporre il puzzle.
In quella di presentazione, invece, il puzzle dovrebbe ricomporsi da solo. Peccato che non abbia la più pallida idea di come fare... Qualcuno ha qualche aiuto?
Per favore... : )

Inizio con il postarvi la funzione per mischiare:

codice:

<script>
  var imm = new Image()
  c = 0
  function mischia ()
  {
    a = Math.floor(Math.random() *16);
    b = Math.floor(Math.random() *16);

    imm.src = document.images[a].src
    document.images[a].src = document.images[b].src
    document.images[b].src = imm.src
  
    c++
    if (c > 15)
    {
      c=0;
      return
    }
    setTimeout("ran()",300)
  }
</script>

e nel BODY:

codice:

<body  onload="mischia()">

**Dennis** · 16-05-2004, 20:12

secondo me, se devi fare la presentazione, potresti usare flash...

le animazioni in javascript sono si fattibili, ma non sono proprio immediate

**Jerry Masslo** · 16-05-2004, 20:24

Non posso esserti di nessun aiuto pratico, una volta l'ho fatto un semplice puzzle che su un evento gli elementi raggiungevao la loro posizione giusta, (non c'era il random però) solo che l'ho fatto con un editor visuale e inoltre non è cross-browser, quell'editor usa delle librerie, se ci vuoi dare un occhio magari ti viene un'ispirazione ma ne dubito.

all'inizio non sembra ma c'è il puzzle

**Mich_** · 17-05-2004, 10:08

Non e` male come esercizio.
A mio parere si puo` fare in JS, e con (relativamente) poco sforzo.

Non vedo come potresti fare con tutte 16 le caselle occupate. Io lascerei vuota una casella, per poter spostare le altre.
Un po' come nel gioco del 15; in questo caso pero` puo anche permettere i salti, se lo credi.

Oppure puoi farlo con 2 tabelle: una inizialmente vuota, l'altra con tutte le tessere in disordine.

Poi il click del mouse puo` selezionare la casella di partenza e quella di destinazione.
Un campo fuori dalla casella potrebbe far capire all'utente se deve fare la prima selezione o la seconda .... o comunque contenere informazioni per l'utilizzo.

PS. io userei una matrice a due dimensioni per le tessere.

**alesssia** · 17-05-2004, 20:49

In realta lo script per ricomporre il puzzle l'ho già scritto (lo accodo al post). Semplicemente con un primo click si scieglie il pezzo da spostare, con un secondo click il posto dove metterlo. E i due pezzi finiscono con lo scambiarsi.

Il mio problema è mischiare il puzzle e ricomporlo senza nessun intervento da parte dell'utente. E non so proprio come fare...

Script per ricomporre il puzzle:

codice:

<SCRIPT LANGUAGE="JavaScript">
var temp = new Image()
var loc
var gotit
var rr = 99
var ss
function exch()
{
 if ((event.button == 1) && (event.srcElement.className == "drag"))
 {
   if (gotit == 1)
   {
     gotit = 0
     document.images[loc].src = document.images[event.srcElement.name].src
     document.images[event.srcElement.name].src = temp.src
   }
   else
   {
     gotit = 1
     loc = event.srcElement.name
     temp.src = document.images[loc].src
   }
 }
}
document.onmousedown=exch

</SCRIPT>

**Mich_** · 18-05-2004, 10:48

Immaginavo una cosa del genere, ma sei sicura che funzioni? Intendo in tutti i browser.

Mi pare di vedere l'utilizzo di eventi che non sono proprio cross-browser.

Comunque per mischiare io farei con l'uso di un vettore a cui vengono tolti mano a mano gli elementi, inmodo che la randomizzazione venga fatta il primo colposu 16, il secondo su 15, il terzo su 14, ecc.

Ora nonho tempo. Se hai problemi ci sentiamo nel pom.

**alesssia** · 18-05-2004, 12:20

Io l'ho provata su un paio di versioni di IE e su un paio di Opera, e funziona. Spero che funzioni anche su Mozilla...

Se hai tempo nel pomeriggio mi faresti proprio un favore... diciamo che io mi sono arresa... : )

**Mich_** · 18-05-2004, 15:56

Ho iniziato a fare mente locale, ma ci sono alcune cose che non mi sono chiare.

1. Cosa hai gia` funzionante e cosa no.

2. Mi piacerebbe vedere il puzzle in azione (anceh limitato, quello che e` possibile), perche` se devo metterci mano credo mi possa essere utile.

3. Ci sono 16 tessere e 16 posizioni in cui metterle: quali sono i nomi delle due serie di oggetti? E che tipo di oggetti sono?

**alesssia** · 18-05-2004, 20:22

Se mi lasci il tuo indirizzo e-mail in pvt ti mando tutto il progetto: sono una pagina .htm e 16 immagini .jpg, così te lo guardi con calma.

Quello che funziona è tutta la parte interattiva: il mesculo e il ricomporre tramite il click dell'utente.
Quello che non funziona (e che mi serve!!!) è lo scomporre-comporre in automatico, senza alcun itervento del fruitore.

Grazie!

PS... Se poi sei interessato alla mia causa, fai un salto a questo 3d: http://forum.html.it/forum/showthrea...hreadid=653607
Diciamo che mi mancano queste due cose per poter consegnare il progetto (e la scadenza si avvicina...)
Grazie ancora!

**Mich_** · 19-05-2004, 08:45

Se mi mandi il progetto via e-mail, poi devo trovare un server dove caricarlo e testarlo ... speravo che postessi mandarmi il link (se non puoi in pubblico, eventualmetne tramite un pvt).

Per la parte automatica, lo scomporre lo sai gia` fare: e` la stessa routine del manuale.
Per il comporre, si puo` fare una routine, ma mi serve sapere (come ho gia` chiesto):
3. Ci sono 16 tessere e 16 posizioni in cui metterle: quali sono i nomi delle due serie di oggetti? E che tipo di oggetti sono?

Come pensavi di far partire l'animazione? con un click su un bottone "mostra animazione" ? O vuoi una partenza automatica? ed evenutalmente al load della pagina, al load ma dopo un timeout, con altri eventi?

Discussione: Ricomporre un Puzzle

Strumenti discussione

Ricerca discussione

Visualizza

Ricomporre un Puzzle

Permessi di invio