Учебник. Добавление значков в приложение WinForms для игры "Подбери пару"

В этой серии из четырех учебников вы создадите игру "Подбери пару", в которой игрок должен подобрать пару скрытым значкам.

В игре "Подбери пару" игрок выбирает квадрат, чтобы просмотреть значок, после чего ему нужно выбрать другой квадрат. Если значки совпадают, они остаются видимыми. Если нет, согласно правилам игры оба значка будут скрыты. В этом учебнике вы будете назначать значки для меток случайным образом. Вы сделаете так, чтобы они были скрыты и отображались только после нажатия.

В этом третьем учебнике вы научитесь следующему:

  • добавление случайного объекта и списка значков;
  • назначение каждой метке случайного значка;
  • добавление обработчиков событий, позволяющих отображать значки на метках.

Необходимые компоненты

Этот учебник создан на основе предыдущего учебника, Создание приложения игры "Подбери пару". Если вы еще не выполнили действия из этого учебника, сделайте в первую очередь это.

Добавление случайного объекта и списка значков

В этом разделе вы создадите набор парных символов для игры. Каждый символ добавляется в две случайные ячейки в TableLayoutPanel в форме.

Вам понадобится использовать два оператора new, создающие два объекта. Первый — это объект Random, который случайным образом выбирает ячейки в элементу управления TableLayoutPanel. Второй объект является объектом List<T>. В нем хранятся случайно выбранные символы.

  1. Откройте Visual Studio. Проект MatchingGame отображается в разделе "Открыть последние".

  2. Выберите файл Form1.cs, если вы используете C#, или файл Form1.vb, если вы используете Visual Basic. Затем выберите Представление>Код. Также можно нажать клавишу F7 или дважды щелкнуть Form1. В интегрированной среде разработки Visual Studio будет отображатся модуль кода для Form1.

  3. В имеющийся код добавьте следующий фрагмент.

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

Важно!

Используйте элемент управления языка программирования в правом верхнем углу этой страницы, чтобы просмотреть фрагмент кода на C# или Visual Basic.

Programming language control for Microsoft Learn

При написании кода на языке C# убедитесь, что вы помещаете код после открывающей фигурной скобки и сразу после объявления класса (public partial class Form1 : Form). При написании кода на языке Visual Basic поместите код сразу после объявления класса (Public Class Form1).

Объекты List можно использовать для отслеживания элементов различных типов. Список может содержать числа, значения true или false, текст и другие объекты. В игре "Подбери пару" объект list содержит 16 строк, по одной для каждой ячейки на панели TableLayoutPanel. Каждая строка представляет собой одну букву, соответствующую значкам в метках. Эти символы отображаются в шрифте Webdings в виде автобуса, велосипеда и т. д.

Примечание.

Списки можно уменьшать и увеличивать по мере необходимости, что важно для этой программы.

Дополнительные сведения о списках см. в статье List<T>. Пример на C# см. в разделе Пример простого списка. Пример на Visual Basic см. в разделе Использование простой коллекции.

Назначение каждому элементу управления Label случайного значка

При каждом запуске программы значки назначаются элементам управления Label в форме случайным образом с помощью метода AssignIconsToSquares(). Этот код использует ключевое слово foreach на C# или For Each на Visual Basic.

  1. Добавьте метод AssignIconsToSquares().

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

Этот код можно ввести непосредственно под кодом, добавленным в предыдущем разделе.

Примечание.

Одна из строк закомментирована специально. Вы добавите ее позже в этой процедуре.

Метод AssignIconsToSquares() выполняет итерацию каждого элемента управления label в TableLayoutPanel. Он выполняет одни и те же операторы для каждого из этих элементов управления. Эти операторы запрашивают случайные значки из списка.

  • Первая строка преобразует переменную control в метку с именем iconLabel.
  • Вторая строка представляет собой оператор if, проверяющий и обеспечивающий успешное выполнение преобразования. Если преобразование выполняется, выполняются операторы в операторе if.
  • Первая строка в операторе if создает переменную с именем randomNumber, содержащую случайное число, соответствующее одному из элементов списка значков. Здесь используется метод Next() объекта Random. Метод Next возвращает случайное число. Эта строка также использует свойство Count списка значков для определения диапазона, из которого выбирается случайное число.
  • Следующая строка назначает один из элементов Text списка значков свойству метки.
  • Следующая строка скрывает значки. Эта строка будет закомментирована, так что вы сможете проверить оставшуюся часть кода, прежде чем продолжить работу.
  • Последняя строка в if инструкции удаляет значок, добавленный в форму из списка.
  1. Добавьте вызов метода AssignIconsToSquares() в конструкторForm1. Этот метод заполняет игровую доску значками. Конструкторы вызываются при создании объекта.

    public Form1()
    {
        InitializeComponent();
    
        AssignIconsToSquares();
    }
    

    Если вы используете Visual Basic, добавьте вызов метода AssignIconsToSquares() в метод Form1_Load.

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

    Дополнительные сведения см. в статьях Конструкторы (руководство по программированию на C#) и Использование конструкторов и деструкторов.

  2. Сохраните и выполните программу. Должна отобразиться форма со случайными значками, которые назначены каждой метке.

    Совет

    Если значки Webdings не отображаются в форме правильно, установите для свойства UseCompatibleTextRendering меток в форме значение True.

  3. Закройте программу, а затем снова запустите ее. Каждой метке назначены разные значки.

    Screenshot shows the Matching Game displaying the random icons.

    Значки видимы, поскольку они не были скрыты. Чтобы скрыть их от игрока, можно задать для свойства ForeColor каждого элемента управления Label тот же цвет, что и у свойства BackColor.

  4. Остановите программу. Удалите метки комментариев с соответствующей строки кода в цикле.

    iconLabel.ForeColor = iconLabel.BackColor;
    

Если вы снова запустите программу, создастся впечатление, что значки исчезли. И будет отображатся только синий фон. Однако значки назначены случайным образом и по-прежнему существуют.

Добавление обработчиков событий в метки

В этой игре "Подбери пару" игрок открывает один скрытый значок, а затем второй. Если значки совпадают, они остаются видимыми. Если нет, оба значка снова скрываются.

Чтобы заставить вашу игру работать таким образом, добавьте обработчик события Click, который изменяет цвет выбранной метки в соответствии с фоном.

  1. Откройте форму в конструкторе Windows Forms. Выберите Form1.cs или Form1.vb, а затем выберите Представление>Конструктор.

  2. Выберите первый элемент управления меткой, чтобы выбрать его и дважды щелкните его, чтобы добавить Click обработчик событий с именем label1 _Click() в код.

  3. Затем, удерживая нажатой клавишу Ctrl, выберите каждую из оставшихся меток. Убедитесь, что выбраны все метки.

  4. В окне Свойства нажмите кнопку События, которая представляет собой молнию. Для события Click выберите в поле label1_Click.

    Screenshot shows the Properties window showing Click event.

  5. Нажмите клавишу ВВОД. Интегрированная среда разработки добавляет в код обработчик события Click с именем label1_Click(). Поскольку вы выбрали все метки, обработчик будет привязан к каждой из этих меток.

  6. Добавьте остальную часть кода.

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

Примечание.

При копировании и вставке блока кода label1_Click() вместо его ввода вручную проследите за тем, что заменить существующий код label1_Click(). В противном случае в коде появится дублирующий блок.

Выберите пункт Отладка>Начать отладку, чтобы запустить программу. Вы должны увидеть пустую форму с синим фоном. Выберите любую из ячеек в форме. После этого должен отобразится один из значков. Продолжайте выбирать различные ячейки формы. Значки будут отображаться при их выборе.

Screenshot shows the Matching Game with a single icon visible.

Следующие шаги

Перейдите к следующему учебнику, чтобы узнать, как изменять метки с помощью таймера.