滑鼠輸入範例:WordSearch

Flash Player 9 以及更新的版本,Adobe AIR 1.0 以及更新的版本

此範例將藉由處理滑鼠事件來示範使用者互動。使用者儘可能地在包含隨機排列字母的格點狀拼字遊戲表中建立許多單字,過程中需透過水平或垂直移動表中的字母來完成拼字,但是絕對不可重複使用相同的字母。這個範例可示範下列的 ActionScript 3.0 功能:

  • 以動態方式建立組件的格點

  • 回應滑鼠事件

  • 根據使用者互動維護得分記錄

若要取得此樣本的應用程式檔案,請參閱 www.adobe.com/go/learn_programmingAS3samples_flash_tw 。您可以在 Samples/WordSearch 檔案夾中找到 WordSearch 應用程式檔案,此應用程式是由下列檔案組成:

檔案

說明

WordSearch.as

提供應用程式主要功能的類別。

WordSearch.fla

WordSearch.mxml

主應用程式檔案,在 Flex 中為 MXML,在 Flash 中為 FLA。

dictionary.txt

用來判斷拼字是否可得分以及是否正確的檔案。

載入字典

在建立用來尋找單字的遊戲時,會需要用到字典。這個範例中包括名為 dictionary.txt 的文字檔案,其中包含一份以換行符號分隔的單字清單。建立名為 words 的陣列之後, loadDictionary() 函數便需要這個檔案,而在成功載入檔案後,這個檔案就會變成一個很長的字串。您可以使用 split() 從每一個出現歸位字元 (字元碼 10) 或換行符號 (字元碼 13) 實體的位置處斷開,將這個字串剖析成單字陣列。這個剖析動作會在 dictionaryLoaded() 函數中發生:

words = dictionaryText.split(String.fromCharCode(13, 10));

建立使用者介面

在儲存單字之後,就可以開始設定使用者介面。建立兩個 Button 實體:一個用來送出單字,另一個用來清除目前正在拼湊的單字。在每個情況中,您必須偵聽該按鈕所廣播的 MouseEvent.CLICK 事件,並接著呼叫函數以回應使用者輸入。在 setupUI() 函數中,下列程式碼會在這兩個按鈕上分別建立偵聽程式:

submitWordButton.addEventListener(MouseEvent.CLICK,submitWord); 
clearWordButton.addEventListener(MouseEvent.CLICK,clearWord);

產生遊戲表

遊戲表就是一個包含一些隨機排列字母的格點表。在 generateBoard() 函數中,您可以將一個迴圈嵌入另一個迴圈,來建立二維格點。第一個迴圈可增加列數,而第二個迴圈則是增加每列的總欄數。由這些列與欄所交錯組合而成的儲存格,每一個都包含用來代表表中字母的按鈕。

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); 
        } 
    } 
}

雖然每一行程式碼中只能為 MouseEvent.CLICK 事件新增一個偵聽程式,由於它將用於 for 迴圈,所以將會指定給每個 Button 實體。同時,每個按鈕也會指定一個來自所屬列與欄位置的名稱,這樣稍後要在程式碼中參考每個按鈕的列與欄值就會比較容易。

透過使用者輸入來建立單字

您可以透過選取水平或垂直相鄰的字母來拼出單字,但是絕對不可重複使用同一個字母。每次按一下都會產生一個滑鼠事件,並在當下檢查使用者所拼的單字,以確定所按的字母能夠接續先前所按下的字母。如果沒有接續正確,就會移除上一個單字並開始新的拼字階段。這項檢查會在 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)); 
}

String 類別的 charAt() indexOf() 方法都會從目前已按下的按鈕與之前已按下的按鈕中取得適當的列和欄。此時,如果列或欄沒有變更,或是已經變更的列或欄是在上一次變更以來的單一增量範圍內, isLegalContinuation() 方法就會傳回 true 。如果您想要變更遊戲規則,並允許對角拼字,則可以移除未變更的列或欄檢查,而且最後一行的程式碼將如下所示:

return (Math.abs(prevButtonRow - currButtonRow) <= 1) && Math.abs(prevButtonCol - currButtonCol) <= 1));

檢查送出的單字

若要完成遊戲程式碼,需要建立檢查送出的單字以及計算分數的機制。 searchForWord() 方法同時包含:

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; 
}

這個函數會循序處理字典中的所有單字。如果使用者所拼的單字與字典中的單字相符,就會傳回該單字在字典中的位置。如果是有效的位置, submitWord() 方法會接著檢查回應並更新得分記錄。

自訂作業

類別的一開始是好幾個常數。您可以藉由修改這些變數來修改此遊戲。例如,您可以增加 TOTAL_TIME 變數來改變可以使用的遊戲時間。您也可以稍微增加 PERCENT_VOWELS 變數,提高找到單字的可能性。