gioco dell'impiccato

Le Immagini

Scaricare, salvando con i nomi indicati, le seguenti immagini in una cartella del proprio computer:

Immagine:
Nome:	Imp1.gif	Imp2.gif	Imp3.gif	Imp4.gif

Immagine:
Nome:	Imp5.gif	Imp6.gif	Imp7.gif	Imp8.gif

Immagine:
Nome:	Imp9.gif	Imp10.gif	ImpStart.gif

la sezione Body

Area di output del gioco

L'evento onLoad, generato quando si apre la pagina, richiama la funzione inizia().

La pagina deve mostrare l'immagine iniziale del gioco.

Al di sotto dell'immagine vengono collocate due caselle di testo.

Nella prima casella di testo si mostreranno tanti asterischi quante sono le lettere della parola da indovinare, e durante l'avanzamento del gioco, verranno scoperte le lettere indovinate.

La seconda casella di testo mostra le lettere già scelte.

<p>Parola: <input type="text" name="parolaEstratta"><br>

Lettere: <input type="text" name="lettereEliminate"></p>

</form>

I valori assegnati alla proprietà name dei tag img e input saranno trattati come proprietà (o nomi di variabili) appartenenti all'oggetto document.

Area di input del gioco

Ciascuna lettera dell'alfabeto è inserita in un link che richiama la funzione javascript LetteraScelta

Si noti che nel tag A il valore assegnato alla proprietà href è il richiamo alla funzione, ottenuto sostituendo il campo protocollo (http:) con javascript:

<p>

<a href="javascript:LetteraScelta('A');">A</a> |

<a href="javascript:LetteraScelta('B');">B</a> |

<a href="javascript:LetteraScelta('C');">C</a> |

<a href="javascript:LetteraScelta('D');">D</a> |

<a href="javascript:LetteraScelta('E');">E</a> |

<a href="javascript:LetteraScelta('F');">F</a> |

<a href="javascript:LetteraScelta('G');">G</a> |

<a href="javascript:LetteraScelta('H');">H</a> |

<a href="javascript:LetteraScelta('I');">I</a> |

<a href="javascript:LetteraScelta('J');">J</a> |

<a href="javascript:LetteraScelta('K');">K</a> |

<a href="javascript:LetteraScelta('N');">N</a> |

<a href="javascript:LetteraScelta('O');">O</a> |

<a href="javascript:LetteraScelta('P');">P</a> |

<a href="javascript:LetteraScelta('Q');">Q</a> |

<a href="javascript:LetteraScelta('R');">R</a> |

<a href="javascript:LetteraScelta('S');">S</a> |

<a href="javascript:LetteraScelta('T');">T</a> |

<a href="javascript:LetteraScelta('U');">U</a> |

<a href="javascript:LetteraScelta('V');">V</a> |

<a href="javascript:LetteraScelta('W');">W</a> |

<a href="javascript:LetteraScelta('X');">X</a> |

<a href="javascript:LetteraScelta('Y');">Y</a> |

<p><a href="javascript:inizia()">comincia</a></p>

</div>

</body>

</html>

La sezione script

Dichiarazioni delle variabili

L'array parole viene inizializzato con le parole che si proporranno di indovinare.

<html>

<head>

<title>Impiccato</title>

var parole = new Array("GASTONE", "LEONARDO", "AQUILA", "MERCURIO", "TRANSISTOR")

Le variabili globali hanno il seguente scopo:

giocando: con il suo valore false impedirà di continuare il gioco e, quindi, nel caso in cui il giocatore esaurisce i tentativi a disposizione, impedisce di continuare e scoprire le parole segrete.
daIndovinare: contiene la parola estratta casualmente dall'elenco.
mostraParole: durante il gioco contiene la stringa da mostrare (lettere scoperte e asterischi).
lettereUsate: contiene le lettere già scelte.
errori: conta le lettere non contenute nella parola da indovinare.

var giocando = true

var daIndovinare = ""

var mostraParole = ""

var lettereUsate = ""

var errori = 0

Inizio del gioco

All'apertura della pagina, o all'avvio di una nuova sessione del gioco, viene richiamata la funzione inizia().

Le operazioni svolte da questa funzione sono:

Estrarre una nuova parola dall'elenco delle parole segrete.
Svuotare la casella di testo dalle lettere presenti dalla sessione di gioco precedente.
Svuotare la variabile che ha memorizzato le lettere usate nel gioco appena concluso.
reinizializzare la variabile errori
Reinserire l'immagine iniziale.

function inizia() {

estraiParola()

document.impiccato.lettereEliminate.value = ""

lettereUsate = ""

errori = 0

document.imp.src="impstart.gif"

}

Scelta della parola da indovinare

La funzione EstraiParola svolge le seguenti azioni:

Posiziona a valore vero la variabile booleana giocando per segnalare che il gioco è iniziato,
Se il numero di parole contenute nell'elenco si indica con N, allora le parole occupano le posizioni da 0 a N-1 nell'array. La funzione genera un numero casuale compreso tra 0 e N-1.
Copia nella stringa daIndovinare la parola estratta.
Mostra tanti segni # nella casella della parola da indovinare quante sono le lettere della parola estratta.
Mostra gli asterischi nella casella di testo
Gestisce una copia in memoria della stringa mostrata.

function estraiParola() {

giocando = true

casuale = Math.round(Math.random() * (parole.length - 1))

daIndovinare = parole[casuale]

parolaNascosta = Asterischi(daIndovinare)

document.impiccato.parolaEstratta.value = parolaNascosta

mostraParole = parolaNascosta

}

Nascondere le lettere

La funzione Asterischi conta il numero di lettere di una parola e produce una stringa contenente altrettanti segni #.

function Asterischi(m) {

nascosta = ""

nrLettere = m.length

for (i = 0; i < nrLettere; i ++) nascosta += "#"

return nascosta

}

Verificare se una lettera è contenuta nella parola

La funzione LetteraScelta riceve come parametro la lettera che il giocatore sceglie.

function LetteraScelta(lett) {

Il test sulla variabile booleana giocando ha lo scopo di verificare se il gioco non è terminato.

if (giocando == false) return

Il metodo indexOf() di un oggetto di classe String restituisce la posizione, all'interno della stringa, del carattere cercato, oppure restituisce -1 se il carattere non c'è.

if (lettereUsate.indexOf(lett) != -1) return

La lettera scelta viene aggiunta all'elenco delle lettere già usate e l'elenco completo delle elttere usate viene mostrato nella caselal di testo.

L'operatore '+' applicato ad un oggetto di classe String svolge l'operazione di concatenazione tra stringhe.

lettereUsate += lett

document.impiccato.lettereEliminate.value = lettereUsate

La lettera scelta viene ricercata (tramite la funzione indexOf):

if (daIndovinare.indexOf(lett) != -1) {

Primo caso: La lettera appartiene alla parola

Se la lettera scelta appartiene alla parola da indovinare vengono svolte le seguenti operazioni

pos = 0

copia = mostraParole

while (daIndovinare.indexOf(lett, pos) != -1) {

pos = daIndovinare.indexOf(lett, pos)

fine = pos + 1

inizioParola = copia.substring(0, pos)

fineParola = copia.substring(fine, copia.length)

copia = inizioParola + lett + fineParola

pos = fine

}

mostraParole = copia

document.impiccato.parolaEstratta.value = mostraParole

if (mostraParole.indexOf("#") == -1) {

alert("Vinto!")

giocando = false

}

} else {

Secondo caso: La lettera non appartiene alla parola

errori += 1

document.imp.src='imp' + errori + '.gif'

if (errori == 10) {

alert("Perso!")

giocando = false

}

</script>

</head>

Problemi

Inserire una casella di testo di sola lettura, oppure un paragrafo, che mostri il numero di tentativi restanti;
Modificare la sezione "Area di Input del gioco":
sostituire tutti i collegamenti ipertestuali con uno script che generi automaticamente i 26 collegamenti ipertestuali. Lo script consiste di un ciclo for in cui la variabile di controllo del ciclo assume il valore iniziale 65, corrispondente al codice ASCII del carattere A, e compie 26 iterazioni assumendo in successione i valori fino a 91.
Ad ogni ciclo converte il codice nel corrispondente carattere tramite la funzione String.fromCharCode(codice) e forma la stringa che rappresenta il collegamento ipertestuale.
Creare un file su disco contenente un elenco di parole.

La lettura di un file su disco locale, tramite javascript, è possibile solo con Internet Explorer, gli altri browser richiedono l'installazione di un plug-in.
Di seguito si propone uno script che legge le righe di un file di testo di nome: prova.txt memorizzato nella cartella tmp del dico C.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Lettura da file di testo</title>

</head>

<script>

var nomeFile = "c:/tmp/prova.txt"

function leggiFile() {

   var fso, lettura

   lettura = 1

   fso = new ActiveXObject("Scripting.FileSystemObject")

   file = fso.OpenTextFile(nomeFile, lettura, false)

   do {

     linea = file.readline()

     document.getElementById("lettere").innerHTML += linea

   } while(linea != "fine")

file.Close()

}

</script>

<body >

<b>lettura da file con oggetti ActiveX<b>

<br>

<span id="lettere"></span>

<script>

leggiFile()

</script>

</body>

</html>

Si vuole fare osservare che ogni parola occupa una linea del file, e che il componente di javascript utilizzato per leggere il file di testo, non riconosce la fine del file, quindi si è scelto di terminare l'elenco delle parole inserendo, dopo tutte le parole, la riga contenente la parola "fine", allo scopo di utilizzarla per riconoscere la fine dell'elenco e terminare il ciclo di lettura.

Lo studente dopo aver compreso il funzionamento dello script lo deve utilizzare all'interno del gioco dell'impiccato per creare l'elenco delle parole.

In questo modo il gioco è disponibile solo localmente. In una situazione reale, in cui il gioco venisse pubblicato su un dominio accessibile via internet, si dovrebbe avvertire l'utente che deve scaricare il file contenente l'elenco delle parole, perchè javascript non consente di eseguire lo script lato server.