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".
 

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.
 

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