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.
|
|
|