Starsgame - (prima parte)

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

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.

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