Voorbeeld van muisinvoer: WordSearch

Flash Player 9 of hoger, Adobe AIR 1.0 of hoger

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.