Gioco del tris
Tramite Paint preparare 3 file formato jpg come rappresentato di seguito:
Impostare la dimensione di ciascuna immagine a 80x80.
Assegnare a ciascun file il nome indicato.
 |
 |
 |
| 0.jpg | 1.jpg | 2.jpg |
Si cominci a verificare la corretta visualizzazione della griglia di gioco, scrivendo la sezione Body:
<body>
<div align="center">
<p>Giocatore 1</p>
<form name="f1">
<input type="text" name="player1" value="Giocatore 1">
<p> Giocatore 2</p>
<input type="text" name="player2" value="Giocatore 2">
<img src="0.gif" onClick="giocaIn(0)">
<img src="0.gif" onClick="giocaIn(1)">
<img src="0.gif" onClick="giocaIn(2)"><br>
<img src="0.gif" onClick="giocaIn(3)">
<img src="0.gif" onClick="giocaIn(4)">
<img src="0.gif" onClick="giocaIn(5)"><br>
<img src="0.gif" onClick="giocaIn(6)">
<img src="0.gif" onClick="giocaIn(7)">
<img src="0.gif" onClick="giocaIn(8)">
<br><br>
<input type="text" name="campo" readonly>
</form>
</div>
</body>
</html>
Nella griglia 3x3 vengono mostrate le immagini della casella vuota, ad ognuna delle quali è associato il gestore di evento onClick che richiama la funzione giocaIn passandole come parametro il numero della casella.
Esempio:
Giocatore 1
lo script nome
Nella sezione Script si inizializza l'array immagini che contiene i nomi dei file.
La griglia di gioco, oltre ad essere mostrata sullo schermo, viene codificata anche in memoria, nell'array d.
Il valore 0, assegnato a ciascun elemento del vettore, codifica che nella corrispondente posizione sullo schermo c'è una casella vuota.
La variabile x contiene il valore 1 quando è il turno del primo giocatore, contiene il valore 2 quando è il turno del secondo giocatore.
La variabile f contiene il valore 0 per indicare che il gioco non è ancora finito.
La funzione nome viene richiamata, quando il gioco termina, per scrivere nella casella di testo, contenuta nel form, il nome del giocatore che vince.
<html>
<head>
<script>
immagini=new Array("0.jpg","1.jpg","2.jpg")
d=new Array("0","0","0","0","0","0","0","0","0")
x=1
f=0
function nome(a) {
if (a==1) return document.f1.player1.value
else return document.f1.player2.value
}
il gestore di evento giocaIn
La funzione giocaIn, richiamata quando si fa clic su una casella della griglia di gioco, riceve nel parametro n il numero della casella scelta.
si controlla se la partita deve continuare.
function giocaIn(n) {
Se la casella è vuota (d[n] == 0) e (AND, cioè &&) il gioco non è finito (f==0) allora, l'immagine della casella vuota su cui si è fatto clic, viene sostituita con la X oppure la O, a seconda del giocatore di turno, poi si specifica a chi spetta a prossima mossa, infine si segna, nella casella d[n], il codice della pedina collocata.
if ((d[n]==0) && (f==0)) {
document.images[n].src=immagini[x]
if (x==1) {
document.f1.campo.value="Turno di "+nome(2)
d[n]=1
controllo()
x=2
} else {
document.f1.campo.value="Turno di "+nome(1)
d[n]=2
controllo()
x=1
}
}
}
Controllare un allineamento
la funzione controllo viene richiamata dopo che un giocatore ha collocato la pedina, per verificare se il gioco deve continuare o se deve terminare.
Gli 8 confronti, nell'istruzione if controllano se il giocatore codificato nella variabile x ha realizzato un allineamento.
l'operatore AND (codificato con la doppia e commerciale) verifica se un giocatore ha collocato tre pedine su celle allineate, mentre l'operatore OR (codificato con la doppia linea verticale) ritiene che sia sufficiente almeno un allineamento per aggiudicare la vittoria.
Quindi se almeno una condizione è verificata la partita termina (f=1) e si mostra il nome del giocatore codificato nella variabile x.
Se la partita non è finita (f contiene zero) allora, tramite la variabile p si contano le caselle occupate, per vedere se c'è il pareggio e quindi fermare il gioco.
function controllo() {
if (((d[0]==x)&&(d[1]==x)&&(d[2]==x))||
((d[3]==x)&&(d[4]==x)&&(d[5]==x)) ||
((d[6]==x)&&(d[7]==x)&&(d[8]==x)) ||
((d[0]==x)&&(d[3]==x)&&(d[6]==x)) ||
((d[1]==x)&&(d[4]==x)&&(d[7]==x)) ||
((d[2]==x)&&(d[5]==x)&&(d[8]==x)) ||
((d[0]==x)&&(d[4]==x)&&(d[8]==x)) ||
((d[2]==x)&&(d[4]==x)&&(d[6]==x))) {
f=1
document.f1.campo.value="Ha vinto " + nome(x)
}
if (f==0) {
p=0
for (i=0; i<9; i++) if (d[i]!=0) p++
if (p==9) document.f1.campo.value="Parità"
}
}
Problemi
Sostituire i 9 tag img con uno script che li produce tramite un ciclo for.
Inserire una sezione (div) in cui mostrare il conteggio delle mosse.
Inserire una sezione (div) in cui mostrare l'avanzamento del tempo (numero di secondi trascorsi dall'inizio del gioco.
Inserire una sezione (div) in cui mostrare la successione delle mosse fatte da ciascun giocatore.