Gioco del Quindici

Tramite Paint preparare 16 file di tipo jpg ognuno rappresentante un numero in una cornice. Impostare la dimensione di ciascuna immagine a 72x72.

Per facilitare il calcolo del riferimento a un file assegnare a ciascun file il nome corrispondente al numero che rappresenta.

Nota:
il file 0.jpg rappresenta la casella vuota.

schema

La seguente è una proposta delle immagini dei tasselli




l'array con i nomi delle immagini

I nomi dei file vengono memorizzati in un array bidimensionale di 16 posizioni, disposte in una matrice 4x4:

<html>

<head>

<script>

immagine = new Array()

immagine[0] = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg")

immagine[1] = new Array("5.jpg", "6.jpg", "7.jpg", "8.jpg")

immagine[2] = new Array("9.jpg", "10.jpg", "11.jpg", "12.jpg")

immagine[3] = new Array("13.jpg", "14.jpg", "15.jpg", "0.jpg")

Inizialmente il tassello vuoto si colloca nella casella di coordinate (4, 4), che però nell'array corrisponde alla posizione (3,3) perchè gli indici di riga e di colonna iniziano da 0.

var vuotaR = 3

var vuotaC = 3

Il gioco avanza facendo clic sul tassello che si vuole spostare.

Un clic su un tassello richiama la funzione Sposta() che riceve come parametri le coordinate di riga e di colonna del quadrante su cui si è fatto clic.

function Sposta(riga, colonna) {

Indicando con le variabili riga e colonna le coordinate di riga e di colonna del tassello da spostare e con vuotaR e vuotaC le coordinate di riga e di colonna della casella vuota, lo spostamento di un tassello è lecito se vale almeno una delle seguenti condizioni:

Le due condizioni precedenti si possono così semplificare: Lo spostamento del tassello è consentito se la casella vuota si trova nella stessa colonna del tassello, ma si trova nella riga sopra o nella riga sotto:

((vuotaR == riga-1) oppure (vuotaR == riga+1)) e (vuotaC == colonna)

Le due condizioni precedenti si possono così semplificare: Lo spostamento del tassello è consentito se la casella vuota si trova sulla stessa riga del tassello, ma si trova nella colonna a sinistra o nella colonna a destra:

((vuotaC == colonna+1) oppure (vuotaC == colonna-1)) e (vuotaR == riga)

if (

    (((vuotaR==riga-1) || (vuotaR==riga+1)) && (vuotaC == colonna)) ||

    (((vuotaC==colonna+1) || (vuotaC==colonna-1)) && (vuotaR==riga))

    ) {

L'array images

L'interprete javascript costruisce un array predefinito chiamato images contenente i riferimenti a tutte le immagini presenti nella pagina. In pratica, per ogni marcatore img javascript inserisce un riferimento a quell'elemnto nell'array images, nell'ordine in cui trova i tag img.

Nell'array images gli elementi occupano posizioni consecutive, in una sola dimensione, mentre nell'array immagini gli elementi sono disposti in una matrice. Conviene, quindi, stabilire una corrispondenza tra la posizione di un elemento nella matrice e la posizione dell'elemento nell'array lineare images. Il passaggio dalle coordinate di un elemento nella matrice alla sua posizione nell'array lineare è:

    n = riga*4 + colonna

    vuota= vuotaR*4 + vuotaC

Dopo aver verificato che lo spostamento è lecito, nel quadrante su cui si è fatto clic si mostra il tassello vuoto

    document.images[n].src=immagine[vuotaR][vuotaC]

Nel quadrante occupato dal tassello vuoto si mostra il tassello spostato

    document.images[vuota].src=immagine[riga][colonna]

Lo spostamento mostrato sullo schermo viene effettuato anche nella disposizione dei tasselli nell'array immagini

    tmp = immagine[riga][colonna]

    immagine[riga][colonna]=immagine[vuotaR][vuotaC]

    immagine[vuotaR][vuotaC] = tmp

infine si aggiorna la nuova casella vuota

    vuotaR = riga

    vuotaC = colonna

   }

}

a questo punto lo script termina. Chiudere i tag Script e Head ed iniziare la sezione body:

</script>

</head>

<body>

<div align="center">

<img src="1.jpg" onClick="Sposta(0,0)" /> <!-- memorizzato in images[0] -->

<img src="2.jpg" onClick="Sposta(0,1)" /> <!-- memorizzato in images[1] -->

<img src="3.jpg" onClick="Sposta(0,2)" /> <!-- memorizzato in images[2] -->

<img src="4.jpg" onClick="Sposta(0,3)" /><br> <!-- memorizzato in images[3] -->

<img src="5.jpg" onClick="Sposta(1,0)" /> <!-- memorizzato in images[4] -->

<img src="6.jpg" onClick="Sposta(1,1)" /> <!-- memorizzato in images[5] -->

<img src="7.jpg" onClick="Sposta(1,2)" /> <!-- memorizzato in images[6] -->

<img src="8.jpg" onClick="Sposta(1,3)" /><br> <!-- memorizzato in images[7] -->

<img src="9.jpg" onClick="Sposta(2,0)" /> <!-- memorizzato in images[8] -->

<img src="10.jpg" onClick="Sposta(2,1)" /> <!-- memorizzato in images[9] -->

<img src="11.jpg" onClick="Sposta(2,2)" /> <!-- memorizzato in images[10] -->

<img src="12.jpg" onClick="Sposta(2,3)" /><br><!-- memorizzato in images[11] -->

<img src="13.jpg" onClick="Sposta(3,0)" /> <!-- memorizzato in images[12] -->

<img src="14.jpg" onClick="Sposta(3,1)" /> <!-- memorizzato in images[13] -->

<img src="15.jpg" onClick="Sposta(3,2)" /> <!-- memorizzato in images[14] -->

<img src="0.jpg" onClick="Sposta(3,3)" /> <!-- memorizzato in images[15] -->

</div>

</body>

</html>

Problemi

Progettare uno script che consenta di mescolare i tasselli.
suggerimento:
Modificare il tag BODY: aggiungendo il richiamo alla funzione scombina()
<body onload="scombina()">
L'evento onLoad si genera quando la pagina viene aperta o aggiornata.
nella sezione script definire la funzione


function scombina() {
  for (i=0; i<1000; i++) {
    r = vuotaR + Math.floor(Math.random() * 3 -1)
    c = vuotaC + Math.floor(Math.random() * 3 -1)
    if (r>=0 && r<=3 && c>=0 && c<=3) Sposta(r,c)
  }
}

Aggiungere un pulsante per rimescolare i tasselli ed iniziare una nuova partita.

Usare una casella di testo in cui si mostra il Conteggio degli spostamenti effettuati.

Modificare il gioco: anzichè riordinare i tasselli numerici, ricostruire un'immagine o una foto.

Si può provare una versione del gioco, anche allo scopo di confrontare il programma presentato nella sezione precedente con un altro programma che possiede caratteristiche aggiuntive.

Osservazioni relative alla generazione casuale di una disposizione iniziale dei tasselli