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 - (seconda 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
Seconda parte del gioco in Dynamic Html, Starsgame. La settimana scorsa ci
eravamo lasciati appena prima di analizzare il codice delle animazioni
ludiche vere e proprie. Per chi si fosse appena iscritto alla lista, può
trovare la puntata precedente, insieme a tutte le altre, alla pagina
www.risorse.net/dhtml.
La prima (e lunga) parte di script presente è necessaria per animare le
navicelle spaziali e dar loro i punti di coordinate lungo i quali muoversi.
Qui di seguito ne riportiamo una parte in cui sono presenti le coordinate
dei movimenti di una navicella:
function MM_initTimelines() {
// MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights
reserved.
var ns = navigator.appName == "Netscape";
document.MM_Time = new Array(1);
document.MM_Time[0] = new Array(9);
document.MM_Time["Timeline1"] = document.MM_Time[0];
document.MM_Time[0].MM_Name = "Timeline1";
document.MM_Time[0].fps = 15;
document.MM_Time[0][0] = new String("sprite");
document.MM_Time[0][0].slot = 1;
if (ns)
document.MM_Time[0][0].obj = document["Layer5"];
else
document.MM_Time[0][0].obj = document.all ? document.all["Layer5"] :
null;
document.MM_Time[0][0].keyFrames = new Array(2, 5, 11, 12, 16, 18, 20,
25, 26, 28, 33, 36, 37, 38, 39, 40, 45, 46, 47, 51, 52, 53, 54, 60, 61, 62,
64, 69, 70, 73, 76, 78, 81, 85, 88, 98, 104, 108, 113, 117, 122, 127, 128,
132, 133, 135, 136, 139, 142, 143, 144, 160, 168, 171, 174, 176, 180);
document.MM_Time[0][0].values = new Array(2);
Il numero di navicelle ed il tempo massimo entro il quale finire il gioco
sono specificati con:
var TotaleNavicelle = 8; // numero di navicelle
var NavicelleColpite = 0; // quante navicelle hai fatto fuori
var Tempo = 50; // Tempo limite
var Rimanenza = Tempo; // La rimanenza e' uguale al tempo
Il numero di navicelle non va modificato (cambiandolo, non aumentano né
diminuiscono). L'unica variabile che può essere modificata è:
var Tempo=50;
Qui, potete specificare il numero di secondi a disposizione del giocatore
per terminare lo sterminio.
La funzione per finire il gioco è:
function NavicellaColpita ()
{
++NavicelleColpite ;
if (NavicelleColpite == TotaleNavicelle)
{ alert ("Complimenti hai finito il gioco totalizzando " +Rimanenza+ "
punti!")
clearTimeout(timerID)
window.status=("Hai finito il gioco!!");}
}
La voce:
++NavicelleColpite;
Indica al browser che ad ogni click sulla navicella, venga sommato un'unità alla
variabile NavicelleColpite prima analizzata. Aggiungendo quindi un'unita'
dopo l'altra alla variabile NavicelleColpite, quando si arriverà ad 8
clicks, il gioco si riterrà finito e verrà calcolato il punteggio. Esso,
non e' altro che i secondi risparmiati; quindi, eliminando tutte le
navicelle in 20 secondi, si avrebbero 30 punti (50 secondi a disposizione -
20 secondi utilizzati = 30 punti).
Se però, il tempo fosse scaduto, il gioco verrebbe fermato grazie alla
presenza della funzione Countdown:
function Countdown ()
{
--Rimanenza;
if (Rimanenza != 0)
{
timerID = setTimeout ("Countdown()",1000);
var Secondi = "";
(Rimanenza == 1) ? Secondi = " secondo " : Secondi = " secondi " ;
status = ("Hai ancora " + Rimanenza + Secondi + "a disposizione...");
}
else
{
status = ("Tempo Scaduto !! Game Over");
alert ("Tempo Scaduto !!! Game Over!");
MM_showHideLayers('document.layers[\'Layer1\']','document.all[\'Layer1\']','
hide','document.layers[\'Layer2\']','document.all[\'Layer2\']','hide','docum
ent.layers[\'Layer3\']','document.all[\'Layer3\']','hide','document.layers[\
'Layer4\']','document.all[\'Layer4\']','hide','document.layers[\'Layer5\']',
'document.all[\'Layer5\']','hide','document.layers[\'Layer6\']','document.al
l[\'Layer6\']','hide','document.layers[\'Layer7\']','document.all[\'Layer7\'
]','hide','document.layers[\'Layer8\']','document.all[\'Layer8\']','hide','d
ocument.layers[\'finegioco\']','document.all[\'finegioco\']','show');
}
}
Countdown();
Gli altri scripts presenti all'interno della demo servono ad inibire
l'utilizzo del tasto destro del mouse. I sorgenti di tale esempio verranno analizzati la prossima settimana.
|
