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