Il gioco dell'impiccato

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript

COMPATIBILITÀ: Ms Ie, Opera
FILES ESTERNI: js020a.html, imp0.jpg, imp1.jpg, imp2.jpg, imp3.jpg, imp4.jpg, imp5.jpg, imp6.jpg
Visualizza la demo
Scarica la demo

I giochi sono una delle applicazioni in cui Dhtml può enfatizzare le sue vere potenzialità. All'interno di questa stessa lista abbiamo visto molti altri giochi veramente interessanti (per citarne uno, Js Gymkhana del 7 Novembre 2000) e questo della settimana corrente ne è un altro lampante esempio. La demo infatti, ripropone il gioco dell'impiccato. Per chi non lo conoscesse, il sistema e le regole sono simili al famoso quiz "Il gioco della fortuna". Bisogna indovinare una determinata frase scegliendo delle vocali o consonanti. Quando però all'interno del periodo proposto non verranno riscontrate le lettere richieste, si formerà un impiccato che, una volta concluso, interromperà il gioco e sancirà la sconfitta del giocatore. Lo script è composto da due files:
demo.htm
js020a.html

Il primo richiama la finestra pop up (js020a.html che contiene l'impiccato) ed inoltre presenta la totalità della sintassi scripting per il funzionamento:

<script language="JavaScript">
// apre la finestra che contiene l'impiccato e la posiziona
imp=open("js020a.html","","height=220,width=130")
imp.moveTo(470,200)
// mette in una matrice le lettere contenute nella frase da indovinare
giuste=new Array()
giuste[0]="A"
giuste[1]="L"
giuste[2]="N"
giuste[3]="E"
giuste[4]="V"
giuste[5]="C"
giuste[6]="D"
giuste[7]="S"
giuste[8]="I"
giuste[9]="Z"
giuste[10]="O"
// setta a 0 le variabili per il controllo sull'uso di una lettera già scelta
ripA=0
ripL=0
ripN=0
ripE=0
ripV=0
ripC=0
ripD=0
ripS=0
ripI=0
ripZ=0
ripO=0
// setta le variabili della verifica della soluz., del testo della soluz.
// e della visualizzazione delle lettere giuste
versol=0
soluz="la neve cade silenziosa"
agg=0
// funzione che verifica la lettere scelta dall'utente
function verifica(let) {
// il ciclo confronta il valore di let con le lettere giuste nell'array
for(n=0;n<=10;n++) {
if(let==giuste[n]) {
// se la lettera è giusta e non è ripetuta versol viene incrementato di 1
if(let=="A") {
if(ripA==0) {ripA=1;versol++}
// vengono mostrate le A indovinate e interrotto il ciclo di controllo
// e viene chiamata aggiungi() poichè A è una vocale
document.form1.f1.value="A"
document.form1.f7.value="A"
document.form1.f19.value="A"
aggiungi()
imp.focus()
break
}
if(let=="L") {
if(ripL==0) {ripL=1;versol++}
document.form1.f0.value="L"
document.form1.f12.value="L"
imp.focus()
break
}
if(let=="N") {
if(ripN==0) {ripN=1;versol++}
document.form1.f2.value="N"
document.form1.f14.value="N"
imp.focus()
break
}
if(let=="E") {
if(ripE==0) {ripE=1;versol++}
document.form1.f3.value="E"
document.form1.f5.value="E"
document.form1.f9.value="E"
document.form1.f13.value="E"
aggiungi()
imp.focus()
break
}
if(let=="V") {
if(ripV==0) {ripV=1;versol++}
document.form1.f4.value="V"
imp.focus()
break
}
if(let=="C") {
if(ripC==0) {ripC=1;versol++}
document.form1.f6.value="C"
imp.focus()
break
}
if(let=="D") {
if(ripD==0) {ripD=1;versol++}
document.form1.f8.value="D"
imp.focus()
break
}
if(let=="S") {
if(ripS==0) {ripS=1;versol++}
document.form1.f10.value="S"
document.form1.f18.value="S"
imp.focus()
break
}
if(let=="I") {
if(ripI==0) {ripI=1;versol++}
document.form1.f11.value="I"
document.form1.f16.value="I"
aggiungi()
imp.focus()
break
}
if(let=="Z") {
if(ripZ==0) {ripZ=1;versol++}
document.form1.f15.value="Z"
imp.focus()
break
}
if(let=="O") {
if(ripO==0) {ripO=1;versol++}
document.form1.f17.value="O"
aggiungi()
imp.focus()
break
}
}
// se la lettera scelta non esiste viene chiamata la funzione che aggiunge
// una parte del corpo all'impiccato
if(let!=giuste[n] && n==10) {
alert("Nessuna "+let+" trovata")
aggiungi()
imp.focus()
break
}
}
// se versol è 11 è perchè l'utente ha indovinato
if(versol==11) {
alert("Hai indovinato!")
imp.focus()
setTimeout("imp.close()",2800)
setTimeout("location.reload()",3000)
}
}
// funzione che permette di dare la soluzione. In caso di errore richiama
aggiungi()
function prova() {
if(versol!=11) {
inser=prompt("Immetti la soluzione","")
if(inser==soluz) {
alert("Hai indovinato!")
imp.focus()
setTimeout("imp.close()",2800)
setTimeout("location.reload()",3000)
}
else {
aggiungi()
imp.focus()
}
}
}
// funzione che controlla l'impiccato nella window e controlla il game over
function aggiungi() {
agg++
imp.impimg.src="imp"+agg+".jpg"
if(imp.impimg.src.indexOf("6")!=-1) {
alert("L'impiccato è morto. Hai perso!")
setTimeout("imp.close()",2800)
setTimeout("location.reload()",3000)
}
}

</script>


Questo script gestisce i forms per l'accesso alla frase da indovinare. Sono inoltre presenti le istruzioni per aggiungere una parte di corpo all'impiccato nel caso in cui la lettera scelta non fosse riscontrata nel periodo da indovinare. Nel <BODY> naturalmente, saranno inseriti i campi input per la frase da indovinare e le select per la scelta delle vocali o consonanti.

<body>

<h2>Il gioco dell'impiccato</h2>
Indovina la frase nascosta. Ad ogni errore l'impiccato sarà sempre più visibile.
<br> Quando vedrai l'impiccato per intero avrai perso. Ricorda che ogni vocale <br> aggiunge una parte mancante all'impiccato e ne accelera la morte.
<form name="form1">
<input type=text name="f0" value="" size=1>
<input type=text name="f1" value="" size=1>&nbsp; &nbsp;
<input type=text name="f2" value="" size=1>
<input type=text name="f3" value="" size=1>
<input type=text name="f4" value="" size=1>
<input type=text name="f5" value="" size=1>&nbsp; &nbsp;
<input type=text name="f6" value="" size=1>
<input type=text name="f7" value="" size=1>
<input type=text name="f8" value="" size=1>
<input type=text name="f9" value="" size=1>
<br>
<input type=text name="f10" value="" size=1>
<input type=text name="f11" value="" size=1>
<input type=text name="f12" value="" size=1>
<input type=text name="f13" value="" size=1>
<input type=text name="f14" value="" size=1>
<input type=text name="f15" value="" size=1>
<input type=text name="f16" value="" size=1>
<input type=text name="f17" value="" size=1>
<input type=text name="f18" value="" size=1>
<input type=text name="f19" value="" size=1>
<br><br>
Scegli una consonante &nbsp; &nbsp;
<select name="sel1" onChange="verifica(this.value)">
<option value="">
<option value="B">B
<option value="C">C
<option value="D">D
<option value="F">F
<option value="G">G
<option value="H">H
<option value="L">L
<option value="M">M
<option value="N">N
<option value="P">P
<option value="Q">Q
<option value="R">R
<option value="S">S
<option value="T">T
<option value="V">V
<option value="Z">Z
</select>
<br><br>
Scegli una vocale &nbsp; &nbsp;
<select name="sel2" onChange="verifica(this.value)">
<option value="">
<option value="A">A
<option value="E">E
<option value="I">I
<option value="O">O
<option value="U">U
</select>
<br><br>
<input type=button value="Prova a dare la soluzione" onClick="prova()">
</form>
</center>
</body>


In conclusione, segnaliamo che nel file js020a.html non è presente nessun codice Javascript o altra sintassi di particolare importanza.

N.B.: Vuoi provare ad apparire in testa ai motori di ricerca? Risorse.net ti offre gratuitamente una guida sui principali search engine e validi consigli per apparire in buona posizione. Clicca www.risorse.net/motori

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2000/dicembre/61.asp?print=ok