Il labirinto

Viene disegnata una griglia sfruttando le proprietà bordi di una tabella.

La tabella della figura a lato contiene 13 righe e 12 colonne. Per ogni cella viene specificato lo spessore del bordo superiore e del bordo sinistro. L'assenza del bordo costituisce un passaggio libero attraverso i muri interni del labirinto.

La cella nello spigolo superiore sinistro, marcata start, rappresenta il punto di partenza. Da questa cella, con l'utilizzo dei tasti freccia ci si deve spostare fino a raggiungere la casella nello spigolo inferiore destro.

Durante l'avanzamento, le celle attraversate vengono colorate in giallo.

Accanto al labirinto verranno segnalate le direzioni intraprese.

Quando si raggiunge la cella marcata end il gioco termina.

Il gioco potrebbe essere modificato con l'aggiunta di altre difficoltà

In una pagina Web una tabella priva di contenuto non verrebbe disegnata, e comunque la larghezza delle colonne sarebbe determinata dalla lunghezza del contenuto.

Per assegnare alle colonne della tabella una larghezza uniforme, vengono specificate le sue proprietà nella sezione Style.

Per specificare uno stile, dopo il nome del tag, all'interno di una coppia di parentesi graffe, si definiscono le proprietà nella forma:
nome-proprietà : valore ; Ad esempio per il tag TD si definiscono le proprietà Altezza e Larghezza, oltre alla dimensione del font.

Per lo stesso tag TD si specificano due classi: start e end. Notare la sintassi per dichiarare una classe: dopo il nome del tag si aggiunge un punto e poi si specifica un nome, scelto dal programmatore, per identificare la classe dello stile.

Infine, per dichiarare uno stile da utilizzare, ad esempio, in un paragrafo si sceglie un nome preceduto dal carattere #.

Nella sezione HEAD aprire un tag SCRIPT. Dichiarare un array tridimensionale, denominato Labirinto, formato da 13 righe, 2 colonne e 12 piani.

Per ogni riga l'elemento della colonna 0 specifica se la casella possiede il bordo superiore, mentre l'elemento della colonna 1 specifica se la stessa casella ha un bordo sinistro.



Inizializzazione dell'array Labirinto

labirinto[0][0] = new Array(1,1,1,1,1,1,1,1,1,1,1,1)

labirinto[0][1] = new Array(0,0,1,0,1,0,0,0,0,1,0,1)

labirinto[1][0] = new Array(1,0,0,0,1,0,1,1,1,0,1,1)

labirinto[1][1] = new Array(0,1,1,0,0,1,1,0,0,1,0,1)

labirinto[2][0] = new Array(1,0,1,0,1,0,0,1,1,0,1,1)

labirinto[2][1] = new Array(0,0,0,0,1,1,1,0,0,0,0,1)

labirinto[3][0] = new Array(0,1,1,1,1,1,0,0,0,0,1,1)

labirinto[3][1] = new Array(1,0,0,1,0,0,0,1,1,0,0,1)

labirinto[4][0] = new Array(0,0,0,0,0,0,1,1,1,1,1,1)

labirinto[4][1] = new Array(1,1,1,1,1,0,0,0,0,0,1,1)

labirinto[5][0] = new Array(0,0,0,0,1,0,1,1,1,1,0,0)

labirinto[5][1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1)

labirinto[6][0] = new Array(0,0,0,0,0,0,1,1,0,1,0,1)

labirinto[6][1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1)

labirinto[7][0] = new Array(1,0,1,0,0,0,1,0,1,1,0,1)

labirinto[7][1] = new Array(1,1,1,0,1,0,0,1,0,1,1,1)

labirinto[8][0] = new Array(0,0,0,1,0,0,1,1,0,0,0,0)

labirinto[8][1] = new Array(0,1,0,1,1,0,0,0,1,1,0,1)

labirinto[9][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,1)

labirinto[9][1] = new Array(1,1,1,1,0,0,0,0,0,1,1,1)

labirinto[10][0] = new Array(0,0,0,0,0,1,1,1,1,1,0,0)

labirinto[10][1] = new Array(1,1,1,0,1,0,0,0,0,1,0,1)

labirinto[11][0] = new Array(0,0,1,1,1,1,1,1,1,0,0,0)

labirinto[11][1] = new Array(1,0,1,0,0,0,0,0,0,0,1,1)

labirinto[12][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,0)

labirinto[12][1] = new Array(1,1,0,1,0,0,0,1,0,0,1,1)

Infine creare un altro array composto da 2 elementi, che servirà per specificare lo stile da applicare alle celle:

Nella sezione BODY viene costruita una tabella, a cui viene assegnato l'identificatore board, tramite uno script.

Per ogni riga viene inviato il tag <TR> e per ognuna delle caselle, viene inviato il tag <TD> con la definizione delle proprietà di stile costruita leggendo i valori dalla tabella Labirinto.

Notare che il valore 0 0 1, di una cella della matrice, viene usato come indice per accedere all'array Lati, contenente la proprietà border-top in posizione 0 e la proprietà border-left in posizione 1.


Il paragrafo dopo la tabella richiama lo stile messaggio, per adesso è vuoto.

Salvare il file con il nome "labirinto.htm" e assicurarsi che dia la figura corretta del labirinto.

L'evento onkeydown è riconosciuto in Internet Explorer, altri browser lo ignorano.

inserire le linee seguenti all'interno dello script contenuto nel BODY.

Vengono dichiarate due variabili coordRiga e coordCol che hanno lo scopo di mantenere la posizione lungo il labirinto. La variabile dentro, invece, viene posta a false quando si esce dal labirinto.

Viene poi associata la funzione avanza con il verificarsi dell'evento onkeydown.