Partage via

Didacticiel : Ajouter des icônes à votre application WinForms de jeu de combinaisons

  • Article

Dans cette série de quatre tutoriels, vous créez un jeu d'association, où le joueur associe des paires d'icônes masquées.

Dans le jeu correspondant, un joueur sélectionne un carré pour afficher une icône, puis choisit un autre carré. Si les icônes correspondent, elles restent visibles. Si ce n’est pas le cas, le jeu masque les deux icônes. Dans ce tutoriel, vous affectez des icônes aux étiquettes de façon aléatoire. Vous les définissez comme masquées, puis affichées quand elles sont sélectionnées.

Dans ce deuxième tutoriel, vous allez apprendre à :

  • Ajoutez un objet aléatoire et une liste d’icônes.
  • Affectez une icône aléatoire à chaque étiquette.
  • Ajoutez des gestionnaires d’événements qui affichent des icônes aux étiquettes.

Conditions préalables

Ce tutoriel s’appuie sur le didacticiel précédent, Créer une application de jeu correspondante. Si vous n’avez pas fait ce tutoriel, passez d’abord par celui-ci.

Ajouter un objet aléatoire et une liste d’icônes

Dans cette section, vous allez créer un ensemble de symboles correspondants pour le jeu. Chaque symbole est ajouté à deux cellules aléatoires dans le tableau TableLayoutPanel du formulaire.

Vous utilisez des instructions new pour créer deux objets. Le premier est un objet Random qui choisit de façon aléatoire des cellules dans TableLayoutPanel. Le deuxième objet est un objet List<T>. Il stocke les symboles choisis de façon aléatoire.

  1. Ouvrez Visual Studio. Votre projet MatchingGame apparaît sous Ouvrir les éléments récents.

  2. Sélectionnez Form1.cs si vous utilisez C#, ou Form1.vb si vous utilisez Visual Basic. Sélectionnez ensuite Afficher>Code. Vous pouvez également sélectionner la touche F7 ou double-cliquer sur Form1. L’IDE Visual Studio affiche le module de code pour Form1.

  3. Dans le code existant, ajoutez le code suivant.

    public partial class Form1 : Form
{
    // Use this Random object to choose random icons for the squares
    Random random = new Random();

    // Each of these letters is an interesting icon
    // in the Webdings font,
    // and each icon appears twice in this list
    List<string> icons = new List<string>() 
    { 
        "!", "!", "N", "N", ",", ",", "k", "k",
        "b", "b", "v", "v", "w", "w", "z", "z"
    };

Si vous utilisez C#, veillez à placer le code après l’accolade ouvrante et juste après la déclaration de classe (public partial class Form1 : Form). Si vous utilisez Visual Basic, placez le code juste après la déclaration de classe (Public Class Form1).

Vous pouvez utiliser des objets de liste pour suivre différents types d’éléments. Une liste peut contenir des nombres, des valeurs true/false, du texte ou d’autres objets. Dans votre jeu correspondant, l’objet de liste comporte 16 chaînes, une pour chaque cellule du panneau TableLayoutPanel. Chaque chaîne est une lettre unique qui correspond aux icônes des étiquettes. Ces caractères apparaissent dans la police Webdings sous la forme d’un bus, d’un vélo et d’autres.

Remarque

Les listes peuvent réduire et croître selon les besoins, ce qui est important dans ce programme.

Pour en savoir plus sur les listes, consultez List<T>. Pour voir un exemple en C#, consultez Exemple de liste de base. Pour voir un exemple dans Visual Basic, consultez Utilisation d’une collection simple.

Affecter une icône aléatoire à chaque étiquette

Chaque fois que vous exécutez le programme, il affecte les icônes de manière aléatoire aux contrôles Label de votre formulaire à l’aide d’une méthode AssignIconsToSquares(). Ce code utilise le mot clé foreach en C# ou For Each en Visual Basic.

  1. Ajoutez la méthode AssignIconsToSquares() à Form1.cs ou Form1.vb.

    /// <summary>
/// Assign each icon from the list of icons to a random square
/// </summary>
private void AssignIconsToSquares()
{
    // The TableLayoutPanel has 16 labels,
    // and the icon list has 16 icons,
    // so an icon is pulled at random from the list
    // and added to each label
    foreach (Control control in tableLayoutPanel1.Controls)
    {
        Label iconLabel = control as Label;
        if (iconLabel != null)
        {
            int randomNumber = random.Next(icons.Count);
            iconLabel.Text = icons[randomNumber];
            // iconLabel.ForeColor = iconLabel.BackColor;
            icons.RemoveAt(randomNumber);
        }
    }
}

Vous pouvez entrer ce code juste en dessous du code que vous avez ajouté dans la section précédente.

Remarque

L’une des lignes est mise en commentaires à cet effet. Vous l’ajouterez plus tard dans cette procédure.

La méthode AssignIconsToSquares() effectue une itération sur chaque contrôle d’étiquette dans TableLayoutPanel. Elle exécute les mêmes instructions pour chacun d’eux. Les instructions extrayent une icône aléatoire dans la liste.

  • La première ligne convertit la variable de contrôle en étiquette nommée iconLabel.
  • La deuxième ligne est une instruction if qui vérifie que la conversion a fonctionné. Si la conversion fonctionne, les instructions de l’instruction if s’exécutent.
  • La première ligne de l’instruction if crée une variable nommée randomNumber qui contient un nombre aléatoire qui correspond à l’un des éléments de la liste d’icônes. Il utilise la méthode Next() de l’objet Random. La méthode Next retourne le nombre aléatoire. Cette ligne utilise également la propriété Count des icônes liste pour déterminer la plage à partir de laquelle choisir le nombre aléatoire.
  • La ligne suivante affecte l’une des icônes éléments de liste à la propriété Text de l’étiquette.
  • La ligne suivante masque les icônes. La ligne est commentée ici pour vous permettre de vérifier le reste du code avant de continuer.
  • La dernière ligne de l’instruction if supprime de la liste l’icône qui a été ajoutée au formulaire.

  1. Ajoutez un appel à la méthode AssignIconsToSquares() au constructeur Form1 dans Form1.cs. Cette méthode remplit le tableau de jeu avec des icônes. Les constructeurs sont appelés lorsque vous créez un objet.

    public Form1()
{
    InitializeComponent();

    AssignIconsToSquares();
}

    Pour Visual Basic, ajoutez l’appel de méthode AssignIconsToSquares() à la méthode Form1_Load dans Form1.vb.

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    AssignIconsToSquares()
End Sub

    Pour plus d’informations, consultez Constructeurs (guide de programmation C#) ou Utiliser des Constructeurs et des Destructeurs.

  2. Enregistrez votre programme et exécutez-le. Il doit afficher un formulaire avec des icônes aléatoires affectées à chaque étiquette.

    Conseil

    Si les icônes Webdings ne s’affichent pas correctement sur le formulaire, définissez la propriété UseCompatibleTextRendering des étiquettes du formulaire sur True.

  3. Fermez votre programme, puis réexécutez-le. Différentes icônes sont affectées à chaque étiquette.

    Capture d’écran montrant le jeu correspondant affichant les icônes aléatoires.

    Les icônes sont visibles maintenant, car vous ne les avez pas masquées. Pour les masquer du lecteur, vous pouvez définir la propriété ForeColor de chaque étiquette sur la même couleur que sa propriété BackColor.

  4. Arrêtez le programme. Supprimez les marques de commentaire pour la ligne de code commentée à l’intérieur de la boucle dans la méthode AssignIconsToSquares().

    iconLabel.ForeColor = iconLabel.BackColor;

Si vous réexécutez le programme, les icônes semblent avoir disparu. Seul un arrière-plan bleu apparaît. Les icônes sont attribuées de manière aléatoire et sont toujours là.

Ajouter des gestionnaires d’événements aux étiquettes

Dans ce jeu correspondant, un joueur révèle une icône masquée, puis une deuxième. Si les icônes correspondent, elles restent visibles. Sinon, les deux icônes sont masquées à nouveau.

Pour que votre jeu fonctionne de cette façon, ajoutez un gestionnaire d’événements Click qui modifie la couleur de l’étiquette choisie pour qu’elle corresponde à l’arrière-plan.

  1. Ouvrez le formulaire dans le Concepteur Windows Forms. Sélectionnez Form1.cs ou Form1.vb, puis sélectionnezAffichage>Concepteur.

  2. Choisissez le premier contrôle d’étiquette pour le sélectionner et double-cliquez dessus pour ajouter un gestionnaire d’événements Click appelé label1 _Click() au code.

  3. Maintenez ensuite la touche Ctrl enfoncée tout en sélectionnant chacune des autres étiquettes. Assurez-vous que chaque étiquette est sélectionnée.

  4. Dans la fenêtre Propriétés, sélectionnez le bouton Événements, qui est représenté par un éclair. Pour l’événement Click, sélectionnez label1_Click dans la zone.

    Capture d’écran montrant la fenêtre Propriétés montrant l’événement Click.

  5. Sélectionnez la touche Entrée. L’IDE ajoute un gestionnaire d’événements Click appelé label1 _Click() au code dans Form1.cs ou Form1.vb. Étant donné que vous avez sélectionné toutes les étiquettes, le gestionnaire est raccordé à chacune des étiquettes.

  6. Renseignez le reste du code.

    /// <summary>
/// Every label's Click event is handled by this event handler
/// </summary>
/// <param name="sender">The label that was clicked</param>
/// <param name="e"></param>
private void label1_Click(object sender, EventArgs e)
{
    Label clickedLabel = sender as Label;

    if (clickedLabel != null)
    {
        // If the clicked label is black, the player clicked
        // an icon that's already been revealed --
        // ignore the click
        if (clickedLabel.ForeColor == Color.Black)
            return;

        clickedLabel.ForeColor = Color.Black;
    }
 }

Remarque

Si vous copiez et collez le bloc de code label1_Click() plutôt que d’entrer le code manuellement, veillez à remplacer le code label1_Click() existant. Sinon, vous obtiendrez un bloc de code en double.

Sélectionnez Débogage>Démarrer le débogage pour exécuter votre programme. Vous devez voir un formulaire vide avec un arrière-plan bleu. Choisissez l’une des cellules du formulaire. L’une des icônes doit devenir visible. Continuez à choisir différents emplacements dans le formulaire. Lorsque vous choisissez les icônes, elles doivent apparaître.

Capture d’écran montrant le jeu correspondant avec une seule icône visible.

Étapes suivantes

Passez au didacticiel suivant pour apprendre à modifier des étiquettes à l’aide d’un minuteur.

Utiliser un minuteur dans votre jeu de combinaisons