Beispiel für Mauseingabe: WordSearch

Flash Player 9 und höher, Adobe AIR 1.0 und höher

Dieses Beispiel veranschaulicht die Benutzerinteraktion durch Verarbeiten von Mausereignissen. Die Benutzer bilden möglichst viele Wörter aus einem zufällig ausgewählten Buchstabenraster. Dabei können die Buchstaben im Raster vertikal oder horizontal verbunden werden. Pro Wort dürfen Buchstaben jedoch nicht doppelt verwendet werden. In diesem Beispiel werden die folgenden Funktionen von ActionScript 3.0 veranschaulicht:

  • Dynamisches Erstellen eines Komponentenrasters

  • Reagieren auf Mausereignisse

  • Führen eines Punktestands, der auf Benutzerinteraktionen beruht

Die Anwendungsdateien für dieses Beispiel finden Sie unter www.adobe.com/go/learn_programmingAS3samples_flash_de . Die Dateien der Anwendung „WordSearch“ befinden sich im Ordner „Samples/WordSearch“. Die Anwendung umfasst die folgenden Dateien:

Datei

Beschreibung

WordSearch.as

Die Klasse mit den Hauptfunktionen der Anwendung.

WordSearch.fla

oder

WordSearch.mxml

Die Hauptanwendungsdatei für Flex (MXML) oder Flash (FLA).

dictionary.txt

Eine Datei, mit deren Hilfe ermittelt wird, ob die gebildeten Wörter gültig und korrekt geschrieben sind.

Laden eines Wörterbuchs

Für ein Spiel, bei dem es um das Finden von Wörtern geht, wird ein Wörterbuch benötigt. Das Beispiel beinhaltet eine Textdatei mit dem Namen „dictionary.txt“, die eine durch Wagenrücklaufzeichen getrennte Liste von Wörtern enthält. Nach dem Erstellen eines Arrays mit der Bezeichnung words wird mit der loadDictionary() -Funktion diese Datei angefordert. Wenn sie erfolgreich geladen wurde, liegt die Datei zunächst als langer String vor. Mithilfe der split() -Methode können Sie diesen String in ein Array von Wörtern aufteilen. Dabei dienen Wagenrücklaufzeichen (Zeichencode 10) oder Zeilenvorschubzeichen (Zeichencode 13) zum Erkennen der Wortgrenze. Das Aufteilen erfolgt in der dictionaryLoaded() -Funktion:

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

Erstellen der Benutzeroberfläche

Nachdem die Wörter gespeichert wurden, können Sie die Benutzeroberfläche einrichten. Erstellen Sie zwei Button-Instanzen: eine zum Absenden eines Wortes und eine zweite zum Löschen des gerade eingegebenen Wortes. In beiden Fällen müssen Sie auf die Benutzereingabe reagieren, indem Sie auf das von der Schaltfläche gesendete MouseEvent.CLICK -Ereignis warten und dann eine Funktion aufrufen. In der setupUI() -Funktion werden mit dem folgenden Code die Listener für die beiden Schaltflächen erstellt:

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

Erstellen des Spielbretts

Das Spielbrett ist ein Raster aus zufällig gewählten Buchstaben. In der generateBoard() -Funktion wird ein zweidimensionales Raster durch Verschachteln zweier Schleifen erstellt. In der ersten Schleife werden die Zeilen inkrementiert und in der zweiten die Gesamtanzahl der Spalten pro Zeile. Jede der durch diese Zeilen und Spalten erstellten Zellen enthält eine Schaltfläche, die einen Buchstaben auf dem Spielbrett repräsentiert.

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

Obwohl nur in einer Codezeile ein Listener für MouseEvent.CLICK -Ereignisse hinzugefügt wird, erfolgt die Zuweisung für jede Button-Instanz, da dies innerhalb einer for -Schleife geschieht. Außerdem ist jeder Schaltfläche ein Name zugeordnet, der aus der Zeilen- und Spaltenposition abgeleitet ist und eine einfache Möglichkeit bietet, im Code später auf die Zeile und Spalte der jeweiligen Schaltfläche zu verweisen.

Bilden von Wörtern aus Benutzereingaben

Wörter werden gebildet, indem im Raster horizontal oder vertikal angrenzende Buchstaben ausgewählt werden, ohne dabei einen Buchstaben doppelt zu verwenden. Mit jedem Mausklick wird ein Mausereignis erzeugt. Anschließend muss die Rechtschreibung des vom Benutzer eingegebenen Wortes geprüft werden, um sicherzustellen, dass es eine korrekte Fortsetzung der zuvor ausgewählten Buchstaben ist. Wenn dies nicht der Fall ist, wird das vorhergehende Wort gelöscht und erneut mit der Eingabe eines Wortes begonnen. Dies erfolgt mit der isLegalContinuation() -Methode.

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

Mit den Methoden charAt() und indexOf() der String-Klasse werden die entsprechenden Zeilen und Spalten der aktuellen Schaltfläche und der Schaltfläche abgerufen, auf die zuvor geklickt wurde. Die isLegalContinuation() -Methode gibt den Wert true zurück, wenn sich eine Zeile oder Spalte im Vergleich zur vorher geklickten Schaltfläche nicht geändert hat und wenn sich die geänderte Spalte oder Zeile um den Wert 1 von der vorherigen unterscheidet. Wenn Sie die Spielregeln so ändern möchten, dass es zulässig ist, Wörter auch diagonal zu bilden, können Sie die Überprüfung auf jeweils eine nicht geänderte Zeile oder Spalte entfernen. Die entsprechende Codezeile hierfür lautet:

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

Überprüfen der eingegebenen Wörter

Um den Programmcode für das Spiel abzuschließen, werden noch Mechanismen zum Überprüfen der übergebenen Wörter und zum Führen eines Punktestands benötigt. Diese befinden sich in der searchForWord() -Methode:

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

Mit dieser Funktion werden in einer Schleife alle Wörter des Wörterbuchs überprüft. Wenn das Wort des Benutzers mit einem Wort im Wörterbuch übereinstimmt, wird die entsprechende Wörterbuchposition zurückgegeben. Mit der submitWord() -Methode wird anschließend die Antwort überprüft, und wenn es sich um eine gültige Position handelt, wird der Punktestand aktualisiert.

Anpassen des Beispiels

Am Anfang der Klasse werden mehrere Konstanten definiert. Sie können das Spiel ändern, indem Sie die entsprechenden Werte bearbeiten. Beispielsweise können Sie die verfügbare Spielzeit verlängern, indem Sie den Wert der Variablen TOTAL_TIME erhöhen. Sie können auch den Wert der Variablen PERCENT_VOWELS geringfügig ändern, um die Wahrscheinlichkeit zu erhöhen, dass gültige Wörter gefunden werden.