Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Il gioco dell'impiccato
Arretrati lista "Una demo Dhtml a settimana"
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>
<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>
<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
<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
<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
|
