Dit voorbeeld demonstreert gebruikersinteractie door middel van verwerking van muisgebeurtenissen. Gebruikers bouwen zoveel mogelijk woorden op uit een willekeurig raster met letters, waarbij zij zowel in horizontale als verticale richting woorden in het raster kunnen plaatsen, maar elke letter maar één keer kunnen gebruiken. Dit voorbeeld demonstreert de volgende functies van ActionScript 3.0:
-
Raster van componenten dynamisch opbouwen
-
Reageren op muisgebeurtenissen
-
Score bijhouden op basis van gebruikersinteractie
Zie
www.adobe.com/go/learn_programmingAS3samples_flash_nl
als u de toepassingsbestanden voor dit voorbeeld wilt downloaden. De toepassingsbestanden van Wordsearch vindt u in de map Samples/Wordsearch. De toepassing bestaat uit de volgende bestanden:
Bestand
|
Beschrijving
|
WordSearch.as
|
De klasse die de hoofdfunctionaliteit van de toepassing biedt.
|
WordSearch.fla
of
WordSearch.mxml
|
Het hoofdtoepassingsbestand voor Flex (MXML) of Flash (FLA).
|
dictionary.txt
|
Een bestand dat wordt gebruikt om te bepalen of geplaatste woorden punten opleveren en juist zijn gespeld.
|
Woordenboek laden
Als u een spel wilt maken waarbij er naar woorden moet worden gezocht, is er een woordenboek nodig. Het voorbeeld omvat een tekstbestand met de naam dictionary.txt met een lijst met woorden, die van elkaar zijn gescheiden door enter-tekens. Nadat er een array met de naam
words
is gemaakt, wordt dit bestand opgevraagd door de functie
loadDictionary()
en zodra dit is geladen, wordt het bestand een lange tekenreeks. U kunt deze tekenreeks parseren tot een array van woorden door gebruik te maken van de methode
split()
, met een onderbreking na elk Enter-teken (tekencode 10) of na elke nieuwe regel (tekencode 13). Het parseren vindt plaats in de functie
dictionaryLoaded()
:
words = dictionaryText.split(String.fromCharCode(13, 10));
De gebruikersinterface maken
Nadat de woorden zijn opgeslagen, kunt u de gebruikersinterface instellen. Maak twee instanties Button: één voor het verzenden van een woord en één voor het wissen van een woord dat momenteel wordt gespeld. In beide gevallen moet u op de gebruikersinvoer reageren door te luisteren naar de gebeurtenis
MouseEvent.CLICK
die door de knop wordt uitgezonden en vervolgens een functie aan te roepen. In de functie
setupUI()
maakt de volgende code de listeners op de twee knoppen:
submitWordButton.addEventListener(MouseEvent.CLICK,submitWord);
clearWordButton.addEventListener(MouseEvent.CLICK,clearWord);
Een spelbord genereren
Het spelbord is een raster van willekeurige letters. In de functie
generateBoard()
wordt een tweedimensionaal raster gemaakt door een lus in een andere lus te nesten. De eerste lus verhoogt de rijen en de tweede luis verhoogt het totale aantal kolommen per rij. Elk van de cellen die door deze rijen en kolommen worden gemaakt, bevat een knop die een letter op het bord vertegenwoordigt.
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);
}
}
}
Hoewel er slechts op één regel een listener voor een gebeurtenis
MouseEvent.CLICK
wordt toegevoegd, wordt de listener aan elke instantie Button toegewezen, aangezien deze zich in een lus
for
bevindt. Bovendien wordt er aan elke knop een naam toegewezen die van de rij- en kolompositie is afgeleid, zodat er verderop in de code eenvoudig naar de rij en kolom van elke knop kan worden verwezen.
Woorden opbouwen op basis van gebruikersinvoer
Woorden kunnen worden geplaatst door letters te selecteren die in horizontale of verticale richting aan elkaar grenzen, maar elke letter kan slechts één keer worden gebruikt. Bij elke klik wordt er een muisgebeurtenis gegenereerd, waarna het door de gebruiker geplaatste woord moet worden gecontroleerd om na te gaan of dit doorloopt na letters waarop eerder is geklikt. Als dit niet het geval is, wordt het eerdere woord verwijderd en wordt een nieuw woord begonnen. Deze controle vindt plaats in de methode
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));
}
De methoden
charAt()
en
indexOf()
van de klasse String halen de juiste rijen en kolommen op van de knop waarop momenteel wordt geklikt en van de knop waarop daarvoor is geklikt. De methode
isLegalContinuation()
retourneert
true
als de rij of kolom niet is gewijzigd en als de rij of kolom die is gewijzigd slechts één stap verschilt van de vorige. Als u de regels van het spel wilt wijzigen en diagonale plaatsing wilt toestaan, kunt u de controle op een ongewijzigde rij of kolom verwijderen en ziet de laatste regel er als volgt uit:
return (Math.abs(prevButtonRow - currButtonRow) <= 1) && Math.abs(prevButtonCol - currButtonCol) <= 1));
Geplaatste woorden controleren
Ter afronding van de code voor het spel zijn er mechanismen ter controle van geplaatste woorden en voor het bijhouden van de score nodig. De methode
searchForWord()
voorziet in beide:
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;
}
Deze functie doorloopt alle woorden in het woordenboek. Als het woord van de gebruiker overeenkomt met een woord in het woordenboek, wordt de corresponderende positie in het woordenboek geretourneerd. De methode
submitWord()
controleert vervolgens het antwoord en werkt de score bij als de positie geldig is.
Aanpassingen
Aan het begin van de klasse staan diverse constanten. U kunt dit spel aanpassen door deze variabelen te wijzigen. U kunt bijvoorbeeld de beschikbare speltijd wijzigen door de variabele
TOTAL_TIME
te verhogen. Ook kunt u de variabele
PERCENT_VOWELS
ietwat verhogen door de kans te verhogen dat er bestaande woorden gevormd kunnen worden.
|
|
|