Flash Player 9 e versioni successive, Adobe AIR 1.0 e versioni successive
In questo esempio viene illustrata l'interazione dell'utente mediante la gestione degli eventi del mouse. Gli utenti creano il maggior numero possibile di parole partendo da una griglia casuale di lettere e muovendosi sia in orizzontale che in verticale all'interno della griglia, ma senza usare mai la stessa lettera due volte. Nell'esempio sono illustrate le seguenti funzioni di ActionScript 3.0:
-
creazione dinamica di una griglia di componenti;
-
risposta agli eventi del mouse;
-
gestione di un punteggio in base all'interazione con l'utente.
Per ottenere i file dell'applicazione per questo esempio, visitate la pagina
www.adobe.com/go/learn_programmingAS3samples_flash_it
. I file dell'applicazione WordSearch si trovano nella cartella Samples/WordSearch. L'applicazione è composta dai seguenti file:
File
|
Descrizione
|
WordSearch.as
|
La classe che fornisce la funzionalità principale dell'applicazione.
|
WordSearch.fla
o
WordSearch.mxml
|
File principale dell'applicazione per Flex (MXML) o Flash (FLA).
|
dictionary.txt
|
Un file utilizzato per determinare se le parole create sono valide e ortograficamente corrette.
|
Caricamento di un dizionario
Per poter creare un gioco che si basa sulla ricerca di parole, naturalmente è necessario un dizionario. Nell'esempio è incluso un file di testo di nome dictionary.txt che contiene un elenco di parole separate da ritorni a capo. Una volta creato un array di nome
words
, la funzione
loadDictionary()
richiede questo file e, se viene caricato correttamente, il file diventa una stringa di notevole lunghezza. È possibile analizzare questa stringa in un array di parole utilizzando il metodo
split()
e creando delle interruzioni in corrispondenza di ciascuna istanza di un ritorno a capo (codice di carattere 10) o di una nuova riga (codice di carattere 13). Questa operazione viene effettuata nella funzione
dictionaryLoaded()
:
words = dictionaryText.split(String.fromCharCode(13, 10));
Creazione dell'interfaccia utente
Una volta memorizzate le parole, è possibile impostare l'interfaccia utente. Create due istanze Button: una per inviare una parola e l'altra per cancellare una parola che si sta sillabando. In ciascun caso, è necessario rispondere all'input dell'utente intercettando l'evento
MouseEvent.CLICK
trasmesso dal pulsante e successivamente chiamando una funzione. Nella funzione
setupUI()
, questo codice crea i listener sui due pulsanti:
submitWordButton.addEventListener(MouseEvent.CLICK,submitWord);
clearWordButton.addEventListener(MouseEvent.CLICK,clearWord);
Generazione di un tabellone
Il tabellone di gioco è una griglia di lettere casuali. Nella funzione
generateBoard()
viene creata una griglia bidimensionale nidificando un ciclo all'interno di un altro. Il primo ciclo incrementa le righe mentre il secondo incrementa il numero totale di colonne per riga. Ognuna delle celle create da queste righe e colonne contiene un pulsante che rappresenta una lettera sul tabellone.
private function generateBoard(startX:Number, startY:Number, totalRows:Number, totalCols:Number, buttonSize:Number):void
{
buttons = new Array();
var colCounter:uint;
var rowCounter:uint;
for (rowCounter = 0; rowCounter < totalRows; rowCounter++)
{
for (colCounter = 0; colCounter < totalCols; colCounter++)
{
var b:Button = new Button();
b.x = startX + (colCounter*buttonSize);
b.y = startY + (rowCounter*buttonSize);
b.addEventListener(MouseEvent.CLICK, letterClicked);
b.label = getRandomLetter().toUpperCase();
b.setSize(buttonSize,buttonSize);
b.name = "buttonRow"+rowCounter+"Col"+colCounter;
addChild(b);
buttons.push(b);
}
}
}
Un listener, benché aggiunto per un evento
MouseEvent.CLICK
su una sola riga dal momento che si trova in un ciclo
for
, viene assegnato a ogni istanza di Button. Inoltre, a ogni pulsante viene assegnato un nome derivante dalla sua posizione di riga e colonna, al fine di facilitare il riferimento alla riga e alla colonna di ogni pulsante più avanti nel codice.
Creazione di parole in base all'input dell'utente
Le parole possono essere sillabate selezionando le lettere adiacenti in orizzontale o in verticale, ma non è consentito utilizzare due volte la stessa lettera. Ogni volta che si fa clic viene generato un evento del mouse; a quel punto la parola che l'utente sta creando deve essere verificata per garantire che sia valida come continuazione delle lettere su cui è stato fatto clic in precedenza. Se non è valida, la parola precedente viene rimossa e ne viene iniziata una nuova. Questa verifica viene effettuata nel metodo
isLegalContinuation()
.
private function isLegalContinuation(prevButton:Button, currButton:Button):Boolean
{
var currButtonRow:Number = Number(currButton.name.charAt(currButton.name. indexOf("Row") + 3));
var currButtonCol:Number = Number(currButton.name.charAt(currButton.name.indexOf("Col") + 3));
var prevButtonRow:Number = Number(prevButton.name.charAt(prevButton.name.indexOf("Row") + 3));
var prevButtonCol:Number = Number(prevButton.name.charAt(prevButton.name.indexOf("Col") + 3));
return ((prevButtonCol == currButtonCol && Math.abs(prevButtonRow - currButtonRow) <= 1) ||
(prevButtonRow == currButtonRow && Math.abs(prevButtonCol - currButtonCol) <= 1));
}
I metodi
charAt()
e
indexOf()
della classe String recuperano le righe e le colonne appropriate rispetto sia al pulsante corrente su cui si fa clic sia a quello su cui è stato fatto clic in precedenza. Il metodo
isLegalContinuation()
restituisce
true
se la riga o la colonna è invariata e se la riga o la colonna che è stata modificata si trova all'interno di un singolo incremento rispetto a quella precedente. Se desiderate cambiare le regole del gioco e consentire ad esempio la sillabazione diagonale, potete rimuovere le ricerche di una riga o colonna invariata. La riga finale avrà un aspetto simile al seguente:
return (Math.abs(prevButtonRow - currButtonRow) <= 1) && Math.abs(prevButtonCol - currButtonCol) <= 1));
Verifica delle parole immesse
Per completare il codice per il gioco sono necessari dei meccanismi per verificare le parole immesse e per calcolare il punteggio. Il metodo
searchForWord()
li contiene entrambi:
private function searchForWord(str:String):Number
{
if (words && str)
{
var i:uint = 0
for (i = 0; i < words.length; i++)
{
var thisWord:String = words[i];
if (str == words[i])
{
return i;
}
}
return -1;
}
else
{
trace("WARNING: cannot find words, or string supplied is null");
}
return -1;
}
Questa funzione scorre tutte le parole presenti nel dizionario. Se la parola dell'utente corrisponde a una parola presente nel dizionario, ne viene restituita la posizione nel dizionario. Il metodo
submitWord()
verifica a questo punto la risposta e, se la posizione è valida, aggiorna il punteggio.
Personalizzazione
All'inizio della classe sono presenti diverse costanti. Il gioco può essere cambiato modificando queste variabili. È possibile, ad esempio, cambiare il tempo a disposizione aumentando la variabile
TOTAL_TIME
. È possibile, inoltre, aumentare leggermente la variabile
PERCENT_VOWELS
per incrementare la probabilità di trovare delle parole.
|
|
|