Esempio di input da mouse: WordSearch

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.