Programmazione web lato client (3)

Oggi realizzeremo un semplice gioco, il tris. Al solito eccovi il link al source code e alla pagina web.

• Download source code
• Come funonzia

Per comodità, dal momento che l'interfaccia del gioco non occupa molto spazio sullo schermo, l'ho inserito anche in questa pagina, utilizzando un tag "iframe".

Nell'"head", oltre ai soliti riferimenti ai files esterni per il css e il codice javascript:

<link href="cssDoc.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="jsDoc.js"></script>

troviamo una terza linea di codice:

<script>var j=1;</script>

il cui uso sarà spiegato nel seguito. Questo, infine, è il codice html che disegna la tabella e inserisce il pulsante per ricominciare il gioco.

<table align="center" border="1">
<tr>
<td class="riquadro" onclick="j=gulp(this,j)"></td>
<td class="riquadro" onclick="j=gulp(this,j)"></td>
<td class="riquadro" onclick="j=gulp(this,j)"></td>
</tr>
<tr>
<td class="riquadro" onclick="j=gulp(this,j)"></td>
<td class="riquadro" onclick="j=gulp(this,j)"></td>
<td class="riquadro" onclick="j=gulp(this,j)"></td>
</tr>
<tr>
<td class="riquadro" onclick="j=gulp(this,j)"></td>
<td class="riquadro" onclick="j=gulp(this,j)"></td>
<td class="riquadro" onclick="j=gulp(this,j)"></td>
</tr>
<tr><td id="comandi" colspan="3">
<input type="button" onclick="restartAll();" value="Ricomincia">
</td></tr>
</table> 

Ci sono 9 celle, ognuna delle quali ha un attributo "class" (che specifica la classe css "riquadro") e un attributo onclick. Quando si passa il cursore su una delle celle, esso prende la forma di una manina. Cliccando sulla cella si richiama in esecuzione la funzione javascript "gulp" con la seguente sintassi:

j=gulp(this,j)

Ovvero si impone che il valore della variabile "j", inizializzata nell'intestazione (<script>var j=1;</script>) sia aggiornato dal valore di ritorno della funzione "gulp". A quest'ultima vengono passati "this" e il valore di "j" al momento del click. Come già sapete, la parola chiave "this" indica l'elemento su cui si è fatto click, in questo caso una delle 9 celle della tabella. Esaminiamo ora il codice della funzione gulp.

function gulp(t,j)
{if (t.innerHTML=="")
{
if(j==1){
t.innerHTML="<img src='homer.jpg'>";
}
else
{
t.innerHTML="<img src='roger.gif'>";
}
j=-j;
}
return(j)
}

La logica implementata dal codice è la seguente: se la cella è vuota, allora se j vale 1 si inserisce l'immagine "homer.jpg", altrimenti si inserisce l'immagine "roger.gif". Al termine si cambia segno a "j" e lo si restituisce come valore di ritorno della funzione. Così facendo, ogni volta che si clicca su una cella vuota vi si inserisce  una delle due immagini, a seconda che "j" sia 1 o -1, e lo si cambia di segno. Ovviamente, se la cella su cui si è cliccato non è vuota (perché contiene già una delle due immagini) non succede nulla.

Il pulsante "Ricomincia" reinizializza il gioco eseguendo il codice della funzione "restartAll":

function restartAll()
{
var tdList=document.getElementsByTagName("td");
for (i = 0; i < tdList.length; i++) { 
if (tdList[i].id=="")
     {tdList[i].innerHTML="";}
}
}

Si ottiene un riferimento alla lista delle 9+1 celle presenti sulla pagina (le 9 su cui si clicca più quella che ospita il pulsante) e gli si assegna il nome "tdList". Il resto del codice sarà di facile interpretazione dopo che avremo parlato in classe di liste (o variabili con indice) e di cicli for. Per il momento vi basti una descrizione generica di quello che fa il frammento di codice: eliminare il contenuto di tutte le celle della table ad eccezione di quella che ospita il pulsante, riconosciuta grazie all'attributo "id" il cui valore è "comandi" (si veda il codice html).