Premessa
Una delle cose più interessanti sull’utilizzo di Flah è sicuramente la possibilità di realizzare dei giochi molto interattivi e coinvolgenti che per mettono di intrattenere il visitatore. Il tutto realizzando files dalle dimensioni veramente ridotte!!!
In questo Tutorial vedremo come poter realizzare il famoso gioco del 15. In questo gioco abbiamo una griglia composta da 15 quadrati numerati da uno a quindici e un quadrato vuoto. In tutto abbiamo quindi una griglia composta da quattro righe e quattro colonne. Possiamo effettuare lo spostamento di un quadrato solo se è vuota la posizione che è adiacente ad uno dei suoi lati. Cos’ facendo, lo scopo del gioco è quello di riportare tutti i quadrati alla loro posizione in modo che i numeri risultino ordinati in modo crescente dal numero uno al numero 15 ed infine la casella vuota.
Nel nostro caso però non utilizzeremo dei numeri per distinguere i quadrati ma utilizzeremo delle immagini; creeremo cioè una sorta di puzzle. Quindi presa una immagine la divideremo in 16 parti e lo scopo del gioco sarà ricomporre l’immagine.
Interfaccia e struttura
Pensiamo prima di tutto a come poter procedere per realizzare il nostro gioco. Per prima cosa creiamo una griglia composta da quattro righe e quattro colonne, quindi in tutto 16 celle.
Nel nostro caso specifico decidiamo che ogni quadrato avrà come dimensioni 63 pixel per l’altezza e quindi anche per la larghezza. La griglia sarà quindi larga 252 pixel e alta 252 pixel, un quadrato perfetto.
Creiamo quindi con delle linee una griglia secondo le dimensioni sopra descritte, prendiamo quindi una qualunque immagine e dopo averla divisa col comando Ctrl-B portiamo la griglia di linee sopra l’immagine. A questo punto selezioniamo ogni porzione dell’immagine tagliata (che sarà appunto un quadrato di 63x63 pixel) e creiamo con comando F8 un clip filmato che chiamiamo rispettivamente p1, p2, p3…. Fino a p16.
Abbiamo quindi una situazione di questo tipo:
A questo punto pensiamo ad un funzione che ci permetta di disporre sulla nostra scena i clip filmato che abbiamo appena creato. Prendiamo nota delle coordinate X e Y che ogni clip dovrà avere, tenendo presente che la coordinata X e Y di ogni clip filmato è considerata relativa al suo centro. Quindi, poiché abbiamo detto che ogni clip ha come dimensione 63x63 pixel, dobbiamo disporre i clip sulla scena distanziandoli appunto di 63 pixel, disponendoli secondo la griglia iniziale.
Mettiamo ad esempio il nostro clip "p1" nella posizione X,Y (80,60) e da qui ricaviamo facilmente la posizione che dovrà assumere il clip "p2" che sarà X,Y (143,60). Infatti il clip "p2" ha stessa coordinata Y poiché sta sulla stessa riga e coordinata X uguale alla coordinata X del clip "p1" incrementata di 63 pixel (che è la larghezza del clip), ovvero 143 pixel.
Procedendo così per il clip "p3", "p4" fino al clip "p16" possiamo ricavare che la griglia delle posizioni X Y dei clip è la seguente:
p1 = (80,60)
p2 = (143,60)
p3 = (206,60)
p4 = (269,60)
p5 = (80,143)
p6 = (143,143)
p7 = (206,143)
p8 = (269,143)
p9 = (80,206)
p10 = (143,206)
p11 = (206,206)
p12 = (269,206)
p13 = (80,269)
p14 = (143,269)
p15 = (206,269)
p16 = (269,269)
A questo punto però dobbiamo considerare il clip filmato "p16" come se fosse lo spazio vuoto per poter spostare gli altri clip. Avremo quindi questa situazione rappresentata dall’immagine qui sotto:
Ora individuamo la formula che ci permette di valutare quando un clip può essere spostato o meno. Come abbiamo detto in apertura un clip può essere spostato solo se il clip filmato è adiacente ad uno dei suoi lati. Se prendiamo l’immagine che sta sopra, che è la situazione di partenza ma anche la situazione di conclusione del gioco, possiamo vedere che gli unici clip che possiamo muovere sono il clip "p12" e il clip "p15". Infatti solo questi clip sono adiacenti al clip "p16" che è il clip così detto vuoto, che indica cioè lo spazio grigio.
Supponiamo di voler spostare il clip "p12". Avremo quindi la seguente situazione:
Come possiamo notare abbiamo invertito la posizione del clip "p12" con la posizione del clip "p16". C’è stato uno scambio di coordinate X Y.
In questa nuova situazione i clip che possono essere spostati sono il clip "p8", il clip "p11" e naturalmente il clip "p12". Se spostassimo infatti il clip "p12" ritorneremo alla situazione iniziale.
La formula matematica che ci permette di capire se un clip è adiacente al clip "p16" e quindi può essere spostato è la seguente: la somma tra il valore assoluto della differenza delle ascisse dei due clip e il valore assoluto della differenza delle ordinate dei due clip dev’essere uguale alla lunghezza del lato del clip. Poiché i clip hanno come lato 63 pixel (sono e devono essere per forza di cose dei quadrati) la nostra formula sarà così espressa in codice Action Script:
posx=_root[appoggio]._x;
posy=_root[appoggio]._y;
vuotox=_root.p16._x;
vuotoy=_root.p16._y;
diffX=Math.abs(posx-vuotox);
diffY=Math.abs(posy-vuotoy);
somma=diffX+diffY;
Infatti se ci soffermiamo su questa formula noteremo che quando somma assume il valore 63 allora il clip in questione può essere spostato. Infatti quando questo si verifica uno dei valori diffX o diffY è sicuramente uguale a zero. Ciò significa che l’altro parametro è uguale in valore assoluto a 63.
Codice Action Script
Implementiamo ora il codice Action Script che ci permetterà di far funzionare il nostro gioco.
Dopo aver creato e disposto sulla scena i sedici clip filmato relativi alle varie parti del puzzle, creiamo un clip filmato vuoto al quale associamo questo codice Action Script:
onClipEvent (load) {
//Creo degli array uno per le coordinate X e l'altro per quelle Y
//in modo da poter disporre correttamente i clip relativi al puzzle
arrayX = new Array();
arrayY = new Array();
_root.matricex = new Array();
_root.matricey = new Array();
for (i=1; i<=4; i++) {
arrayX.push(80, 143, 206, 269);
_root.matricex.push(80, 143, 206, 269);
};
for (i=1; i<=4; i++) {
arrayY.push(60);
_root.matricey.push(60);
};
for (i=1; i<=4; i++) {
arrayY.push(123);
_root.matricey.push(123);
};
for (i=1; i<=4; i++) {
arrayY.push(186);
_root.matricey.push(186);
};
for (i=1; i<=4; i++) {
arrayY.push(249);
_root.matricey.push(249);
};
// Dispongo i pezzi del puzzle ognuno sulla sua coordinata XY associata
j=1;
for (i=0; i<=15; i++){
_root["p"+j]._x=_root.matricex[i];
_root["p"+j]._y=_root.matricey[i];
j++;
};
//Adesso mischio le carte, ovvero simulo gli spostamenti per disfare il puzzle
nmosse=0;
posx=new Array();
posy=new Array();
// Faccio eseguire al computer 400 mosse effettive, ovvero 400 spostamenti
// possiamo anche variare questo parametro per vedere cosa succede
// Naturalmente il numero dev’essere relativamente grande per garantire un miscelamento
//dei pezzi del puzzle ottimale.
while (nmosse<=400) {
appoggio = random(16);
//trace(appoggio);
posx=_root["p"+appoggio]._x;
posy=_root["p"+appoggio]._y;
//trace(posx);
//trace(posy);
vuotox=_root.p16._x;
vuotoy=_root.p16._y;
diffX=Math.abs(posx-vuotox);
diffY=Math.abs(posy-vuotoy);
somma=diffX+diffY;
if (somma == 63){
_root["p"+appoggio]._x=vuotox;
_root["p"+appoggio]._y=vuotoy;
_root.p16._x=posx;
_root.p16._y=posy;
nmosse++;
//trace(nmosse);
};
};
}
Ad ogni clip "pedina" relativo al puzzle associo invece il seguente codice Action Script:
onClipEvent (mouseDown) {
if (hitTest(_root._xmouse,_root._ymouse, true)){
appoggio=_name;
_root.Controllo(appoggio);
};
}
Quindi ogni volta che clicco su una "pedina" del puzzle richiamo una funzione e gli passo il nome del clip appena cliccato. Questa funzione chiamata "Controllo" fa parte del codice Action Script associato al primo fotogramma della scena:
// Questa funzione viene richiamata quando clicchiamo sui clip
//filmato che sono i pezzi del puzzle e verifica:
function Controllo(appoggio){
posx=_root[appoggio]._x;
posy=_root[appoggio]._y;
vuotox=_root.p16._x;
vuotoy=_root.p16._y;
diffX=Math.abs(posx-vuotox);
diffY=Math.abs(posy-vuotoy);
somma=diffX+diffY;
//1) Se il pezzo cliccato può essere spostato in quando adiacente al clip "vuoto"
if (somma == 63){
_root[appoggio]._x=vuotox;
_root[appoggio]._y=vuotoy;
_root.p16._x=posx;
_root.p16._y=posy;
Vittoria();
//_root.txt="ok";
};
};
//2) Controlla se c'è la vittoria mettendo su degli array le coordinate X e Y dei pezzi
// del puzzle e confrontandole con le coordinate presenti negli Array iniziali dove
//sono state inserite le coordinate di partenza per i movie clip
function Vittoria(){
px= new Array();
py= new Array();
for (z=1; z<=16; z++){
px.push(_root["p"+z]._x);
py.push(_root["p"+z]._y);
};
/**
trace(px);
trace(py);
trace(matricex);
trace(matricey);
**/
if ( matricex.toString() == px.toString() & matricey.toString() == py.toString() ){
//trace ("OK");
_root.p16.play();
gotoAndStop(3);
};
};
Timer e conclusione del gioco
Come si può facilmente notare dal file sorgente del gioco, mentre stiamo giocando il filmato Flash è in loop tra il primo ed il secondo fotogramma, infatti sul fotogramma secondo abbiamo inserito l’azione:
gotoAndPlay(1);
Allo stesso modo abbiamo un livello dove abbiamo inserito un timer per poter visualizzare il tempo che scorre e per sapere quanto tempo ha impiegato il ciocatore. Questo parametro è inoltre molto importante nel caso si decidesse di creare una classifica.
Nel livello denominato "timer" abbiamo un clip filmato al quale abbiamo associato il seguente codice Action Script:
onClipEvent (load) {
start = new Date();
} onClipEvent (enterFrame) {
timer = new Date();
cur_msec = current.getMilliseconds();
cur_sec = current.getSeconds();
cur_min = current.getMinutes();
millesec = timer.getMilliseconds()-start.getMilliseconds();
secondi = timer.getSeconds()-start.getSeconds();
minuti = timer.getMinutes()-start.getMinutes();
if (millesec<0) {
millesec += 1000;
secondi--;
}
if (secondi<0) {
secondi += 60;
minuti--;
}
if (secondi<10) {
secondi = "0"+secondi;
}
if (minuti<0) {
minuti="--";
secondi="--";
}
_root.tempo = minuti+":"+secondi;
}
Ora se osserviamo la funzione "Vittoria" possiamo notare che nel caso in cui il giocatore ha messo ogni pezzo del puzzle al proprio posto il filmato viene portato sul terzo fotogramma che è il fotogramma che indica che il giocatore ha concluso il gioco! Allo stesso modo il clip "p16" che sul primo fotogramma ha un quandrato grigio per indicare che è lo spazio vuoto, viene portato sul secondo fotogramma dove c’è invece la parte del puzzle che completa l’immagine.
A questo punto creiamo una pagina html col seguente codice per poter pubblicare on line il nostro filmato:
<html>
<head>
<title>gameof15</title>
</head>
<body bgcolor="#FFCC00">
<p>
<object type="application/x-shockwave-flash" data="gameof15.swf" width="350" height="400">
<param name="movie" value="gameof15.swf" />
<param name="quality" value="high" />
</object>
</p>
</body>
</html>
Buon divertimento!!!
