Exemple d’entrée de souris : WordSearch

Flash Player 9 et les versions ultérieures, Adobe AIR 1.0 et les versions ultérieures

Cet exemple illustre l’interaction utilisateur en gérant des événements de souris. Les utilisateurs créent autant de mots que possible à partir d’une grille aléatoire de lettres, en se déplaçant horizontalement ou verticalement dans la grille, mais en n’utilisant jamais deux fois la même lettre. Cet exemple illustre les fonctions suivantes d’ActionScript 3.0 :

  • Elaboration dynamique d’une grille de composants

  • Réponse aux événements souris

  • Suivi du score en fonction de l’interaction utilisateur

Pour obtenir les fichiers d’application de cet exemple, voir www.adobe.com/go/learn_programmingAS3samples_flash_fr . Les fichiers d’application WordSearch se trouvent dans le dossier Samples/WordSearch. L’application se compose des fichiers suivants :

Fichier

Description

WordSearch.as

Classe comportant les principales fonctionnalités de l’application.

WordSearch.fla

ou

WordSearch.mxml

Le fichier d’application principal pour Flex (MXML) ou Flash (FLA).

dictionary.txt

Un fichier utilisé pour déterminer si les mots sont écrits correctement.

Chargement d’un dictionnaire

Pour créer un jeu qui implique la recherche de mots, un dictionnaire est nécessaire. L’exemple inclut un fichier texte appelé dictionary.txt, qui contient une liste de mots séparés par des retours à la ligne. Après avoir créé un tableau appelé words , la fonction loadDictionary() demande ce fichier. Une fois chargé, celui-ci devient une longue chaîne. Vous pouvez convertir cette chaîne en un tableau de mots grâce à la méthode split() , qui s’arrête à chaque occurrence d’un retour à la ligne (code de caractère 10) ou d’une nouvelle ligne (code de caractère 13). Cette analyse a lieu dans la fonction dictionaryLoaded() :

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

Création de l’interface utilisateur

Une fois les mots stockés, vous pouvez élaborer l’interface utilisateur. Créez deux occurrences de bouton : l’une permet de soumettre un mot, l’autre d’effacer le mot en cours de saisie. Dans chaque cas, vous devez répondre à la saisie utilisateur en écoutant l’événement MouseEvent.CLICK que le bouton diffuse et en appelant ensuite une fonction. Dans la fonction setupUI() , ce code crée les écouteurs sur les deux boutons :

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

Génération d’un tableau de jeu

Le tableau de jeu est une grille de lettres aléatoires. Dans la fonction generateBoard() , une grille en deux dimensions est créée en imbriquant une boucle dans une autre. La première boucle incrémente les lignes et la seconde le nombre totale de colonnes par ligne. Chaque cellule créée par ces lignes et ces colonnes contient un bouton qui représente une lettre sur le tableau.

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

Même si un écouteur est ajouté pour un événement MouseEvent.CLICK sur une seule ligne (car il est dans une boucle for ), il est affecté à chaque occurrence de bouton. Chaque bouton reçoit un nom dérivé de la position de sa ligne et de sa colonne, ce qui permet de référencer facilement la ligne et la colonne de chaque bouton ultérieurement dans le code.

Création de mots à partir de la saisie utilisateur

Les mots peuvent être écrits en sélectionnant des lettres adjacentes verticalement ou horizontalement, mais jamais en utilisant deux fois la même lettre. Chaque clic génère un événement de souris au niveau duquel le mot qu’écrit l’utilisateur doit être vérifié pour s’assurer qu’il se poursuit correctement à partir de lettres cliquées précédemment. Si ce n’est pas le cas, le mot précédent est supprimé et un nouveau est commencé. Cette vérification s’effectue dans la méthode 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)); 
}

Les méthodes charAt() et indexOf() de la classe String récupèrent les lignes et les colonnes du bouton sur lequel l’utilisateur clique actuellement et celui sur lequel il vient de cliquer. La méthode isLegalContinuation() renvoie true si la ligne ou la colonne est la même et que la ligne ou la colonne qui a changé se trouve à un seul incrément de la précédente. Si vous souhaitez modifier les règles du jeu et autoriser une lecture diagonale, vous pouvez supprimer la vérification de la ligne ou de la colonne inchangée. Dans ce cas, la ligne finale serait la suivante :

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

Vérification des mots soumis

Pour terminer le code pour le jeu, des mécanismes permettant de vérifier des mots soumis et de gérer le score sont nécessaires. La méthode searchForWord() permet ces deux opérations :

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

Cette fonction analyse en boucle tous les mots du dictionnaire. Si le mot de l’utilisateur correspond à un mot du dictionnaire, sa position dans le dictionnaire est renvoyée. La méthode submitWord() vérifie la réponse et met à jour le score si la position est valide.

Personnalisation

Il existe plusieurs constantes au début de la classe. Vous pouvez modifier ce jeu en changeant ces variables. Il est par exemple possible de modifier le temps de jeu disponible en augmentant la variable TOTAL_TIME . Si vous augmentez légèrement la variable PERCENT_VOWELS , vous pouvez accroître la probabilité de trouver des mots.