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".
|
| |
Starsgame - (prima parte)
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript
COMPATIBILITÀ: Ms Ie, Netscape, Opera
FILES ESTERNI: intro_ie.htm, intro_ns.htm, game_x_ie.htm, game_x_ns.htm, credits.htm
Visualizza la demo
Scarica la demo
La potenza e la flessibilità di Dynamic Html permette di creare giochi e passatempi veramente divertenti ed alcuni di essi sono sorprendemente gradevoli ed originali. Risorse.net ha appositamente creato una sezione ad hoc dedicata al fenomeno che coinvolge i migliori programmatori di scripting per il Web. Tali esempi sono raggiungibili presso www.risorse.net/dhtml categoria "Giochi e passatempo".
La demo di questa settimana, come avrete facilmente intuito, riguarda
proprio un gioco, StarsGame, ovvero una futuribile battaglia navale. Il
sorgente, al contrario di come si può pensare, non è molto difficile,
soprattutto se esaminato riga per riga.
Iniziamo esaminando il file index.htm che indirizza l'utente a seconda del browser utilizzato. La demo infatti, per risultare crossbrowser, è stata suddivisa in due introduzioni differenti. Con il proseguio della lettera spiegheremo il perché.
<meta http-equiv="refresh" content="1;url=files/intro_ie.htm">
<SCRIPT LANGUAGE="JavaScript">
<!--
function msieversion()
{
var ua = window.navigator.userAgent
var msie = ua.indexOf ( "MSIE" )
if ( msie > 0 )
if ( msie <4 )
alert( "Per giocare devi avere Explorer 4 o Netscape 4 o
superiori" )
}
else
{
location="files/intro_ns.htm"
}
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="msieversion()">
Le due introduzioni sono contenute nei files:
intro_ie.htm
intro_ns.htm
che vengono richiamati rispettivamente con Ms Ie e Netscape. Questa
differenzazione del sistema e' stata necessaria perché i filtri Css non sono supportati dal browser Netscape Communicator.
Mentre il secondo file non contiene nulla di particolarmente difficile, il primo contiene un'interessante utilizzo combinato di Css e Javascript.
Infatti, il testo che appare nel documento, presenta un filtro che
dissolvendosi mostra l'introduzione. Cureremo per primo il foglio di stile che dispone a video le due strutture (Titolo->head e Corpo->body) del file intro_ie.htm.
<STYLE>
.head{
position: absolute;
top: 40px;
left: 250px;
width: 250px;
font: 36pt Times New Roman;
color: yellow;
font-weight: normal;
visibility: hidden;
}
.body{
position: absolute;
top: 120px;
left: 150px;
width: 450px;
font: 12pt Times New Roman;
color: white;
font-weight: bold;
visibility: hidden;
margin: 0;
clip:none;
}
</STYLE>
Le due parti di testo hanno quindi una classe (class) che viene richiamata all'interno del tag <div>. Ecco come:
<DIV ID="headline" CLASS="head" STYLE="filter: revealTrans(Duration=4,
Transition=12)"onFilterChange="doBody();">Stars Game</DIV>
<DIV ID="bodytext" CLASS="body" STYLE="filter: revealTrans(Duration=10,
Transition=12)">
Questo e' il [...]</div>
Definito lo stile del documento, è indispensabile inserire la sintassi
Dhtml per animare l'effetto. Ecco quindi lo script:
<SCRIPT LANGUAGE="Javascript">
CurBull = 0;
document.AutoTimeout = null;
function doHead(){
if( document.IsInsideTour )
{
headline.innerHTML = altTitle.innerHTML;
}
if(document.all.headline.filters.item(0).status != 2){
document.all.headline.filters.item(0).Apply();
document.all.headline.style.visibility="visible";
document.all.headline.filters.item(0).Play();
}
}
function doBody(){
if(bodytext.filters.item(0).status != 2){
bodytext.filters.item(0).Apply();
bodytext.style.visibility="visible";
bodytext.filters.item(0).Play();
}
}
function GetHashParameter( name )
{
var hash = location.hash;
var key = "#" + name + "=";
if( ( iLeft=hash.indexOf( key ) )>=0 )
{
if( ( iRight=hash.indexOf( "#", iLeft+1 ) )<0 )
iRight=hash.length;
value = parseInt( hash.substring( iLeft+key.length, iRight ) );
if( !isNaN( value ) )
return value;
}
return null;
}
function InitializeNavigation()
{
// window defaults
document.IsInsideTour = 0;
tour = GetHashParameter( "IsInsideTour" );
if( tour!=null ) document.IsInsideTour = tour;
doHead();
}
</SCRIPT>
Per il corretto funzionamento dell'esempio è importante non modificare in alcuna parte il precedente Javascript.
Il gioco in sé, verrà analizzato settimana prossima, nella seconda parte della demo.
|
