Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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>&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
 

 
 
Home > dhtml > teoria > 2000 > dicembre > ...   © 1999-2017 Risorse.net, tutti i diritti riservati