자습서: 매칭 게임 WinForms 앱에 아이콘 추가

아티클
03/22/2023

이 시리즈의 4개 자습서에서는 플레이어가 숨겨진 아이콘의 쌍을 찾는 매칭 게임을 빌드합니다.

매칭 게임에서 플레이어는 정사각형을 선택하여 아이콘을 확인한 다음 다른 정사각형을 선택합니다. 아이콘이 일치하면 해당 아이콘이 표시되고 그렇지 않으면 게임이 두 아이콘을 모두 숨깁니다. 이 자습서에서는 임의로 아이콘을 레이블에 할당합니다. 이러한 항목을 숨겨졌다가 선택하면 표시되도록 설정합니다.

두 번째 자습서에서는 다음 작업을 수행하는 방법을 알아봅니다.

임의의 개체 및 아이콘 목록 추가
각 레이블에 임의의 아이콘을 할당합니다.
레이블에 아이콘을 표시하는 이벤트 처리기를 추가합니다.

전제 조건

이 자습서는 이전 자습서 매칭 게임 애플리케이션 만들기를 기반으로 작성되었습니다. 이전 자습서를 완료하지 않은 경우 해당 자습서를 먼저 진행합니다.

임의의 개체 및 아이콘 목록 추가

이 섹션에서는 게임에 사용할 일치하는 기호의 집합을 만듭니다. 각 기호는 폼의 TableLayoutPanel에 있는 임의의 두 셀에 추가됩니다.

new 문을 사용하여 두 개의 개체를 만듭니다. 첫 번째는 TableLayoutPanel에서 임의로 셀을 선택하는 Random 개체입니다. 두 번째 개체는 List<T> 개체입니다. 임의로 선택한 기호가 저장됩니다.

Visual Studio를 엽니다. 최근 열기 아래에 MatchingGame 프로젝트가 표시됩니다.
C#을 사용하는 경우 Form1.cs를 선택하고 Visual Basic를 사용하는 경우 Form1.vb를 선택합니다. 그런 다음 보기>코드를 선택합니다. 또는 F7 키를 선택하거나 Form1을 두 번 클릭합니다. Visual Studio IDE에 Form1의 코드 모듈이 표시됩니다.

기존 코드에 다음 코드를 추가합니다.

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

Public Class Form1

    ' Use this Random object to choose random icons for the squares
    Private random As New Random

    ' Each of these letters is an interesting icon
    ' in the Webdings font,
    ' and each icon appears twice in this list
    Private icons =
      New List(Of String) From {"!", "!", "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) 바로 다음에 코드를 추가합니다.

목록 개체를 사용하여 다양한 형식의 항목을 추적할 수 있습니다. 목록에는 숫자, true/false 값, 텍스트 또는 다른 개체가 포함될 수 있습니다. 매칭 게임에서 목록 개체에는 TableLayoutPanel 패널의 각 셀에 대한 16개 문자열이 있습니다. 각 문자열은 레이블의 아이콘에 해당하는 단일 문자입니다. 이러한 문자는 Webdings 글꼴에 버스, 자전거 등으로 표시됩니다.

참고

목록은 필요에 따라 축소 또는 확장할 수 있으며 이는 프로그램에서 중요한 내용입니다.

목록에 대한 자세한 내용은 List<T>를 참조하세요. C#으로 작성된 예제를 보려면 기본 목록 예제를 참조하세요. Visual Basic으로 작성된 예제를 보려면 단순 컬렉션 사용을 참조하세요.

각 레이블에 임의 아이콘 할당

프로그램을 실행할 때마다 프로그램이 AssignIconsToSquares() 메서드를 사용하여 폼의 레이블 컨트롤에 아이콘을 임의로 할당합니다. 이 코드는 키워드 foreach(C#) 또는 For Each(Visual Basic)를 사용합니다.

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

''' <summary>
''' Assign each icon from the list of icons to a random square
''' </summary>
''' <remarks></remarks>
Private Sub 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
    For Each control In TableLayoutPanel1.Controls
        Dim iconLabel = TryCast(control, Label)
        If iconLabel IsNot Nothing Then
            Dim randomNumber = random.Next(icons.Count)
            iconLabel.Text = icons(randomNumber)
            ' iconLabel.ForeColor = iconLabel.BackColor
            icons.RemoveAt(randomNumber)
        End If
    Next

End Sub

이전 섹션에서 추가한 코드 바로 아래에 이 코드를 입력할 수 있습니다.

참고

줄 가운데 하나가 주석 처리되어 있습니다. 이 절차의 뒷부분에서 이를 추가합니다.

AssignIconsToSquares() 메서드는 TableLayoutPanel의 각 레이블 컨트롤을 반복합니다. 각각에 대해 동일한 문을 실행합니다. 문은 목록에서 임의의 아이콘을 끌어옵니다.

첫 번째 줄은 control 변수를 iconLabel이라는 레이블로 변환합니다.
두 번째 줄은 변환이 작동했는지 확인하는 if 문입니다. 변환이 작동하지 않은 경우 if 문에서 이 문을 실행합니다.
if 문의 첫 번째 줄은 아이콘 목록의 항목 중 하나에 해당하는 난수가 포함된 randomNumber라는 변수를 만듭니다. Random 개체의 Next() 메서드가 사용됩니다. Next 메서드는 난수를 반환합니다. 이 줄에서는 또한 아이콘 목록의 Count 속성을 사용하여 난수를 선택할 수 있는 범위를 결정합니다.
다음 줄은 아이콘 목록 항목 중 하나를 레이블의 속성에 Text 할당합니다.
다음 줄은 아이콘을 숨깁니다. 이 줄은 여기에서 주석 처리되어 있므로 계속하기 전에 코드의 나머지 부분을 확인할 수 있습니다.
문의 마지막 줄 if 은 목록에서 폼에 추가된 아이콘을 제거합니다.

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# 프로그래밍 가이드) 또는 생성자 및 소멸자 사용을 참조하세요.
프로그램을 저장하고 실행합니다. 각 레이블에 임의의 아이콘이 할당된 폼이 나타납니다.

팁

Webdings 아이콘이 폼에 제대로 표시되지 않으면 폼에서 레이블의 UseCompatibleTextRendering 속성을 True로 설정합니다.
프로그램을 닫고 다시 실행합니다. 각 레이블에 서로 다른 아이콘이 할당됩니다.

아이콘을 숨기지 않았으므로 지금은 아이콘이 보입니다. 플레이어에서 아이콘을 숨기려면 각 레이블의 ForeColor 속성을 해당 BackColor 속성과 같은 색으로 설정하면 됩니다.
프로그램을 중지합니다. 루프 내부의 주석 처리된 코드 줄에서 주석 표시를 제거합니다.
- C#
- VB
```
iconLabel.ForeColor = iconLabel.BackColor;
```
```
iconLabel.ForeColor = iconLabel.BackColor
```

프로그램을 다시 실행하면 아이콘이 사라진 것처럼 보입니다. 파란색 배경만 나타납니다. 아이콘은 임의로 할당되어 그대로 있습니다.

레이블에 이벤트 처리기 추가

이 매칭 게임에서 플레이어는 숨겨진 아이콘을 표시한 다음 두 번째 아이콘을 표시합니다. 아이콘이 일치하면 해당 아이콘이 표시되고 일치하지 않으면 두 아이콘 모두 다시 숨겨집니다.

이러한 방식으로 게임을 진행하기 위해 선택한 레이블의 색을 배경과 일치하도록 변경하는 Click 이벤트 처리기를 추가합니다.

Windows Forms 디자이너에서 폼을 엽니다. Form1.cs 또는 Form1.vb를 선택한 다음 보기>디자이너를 선택합니다.
첫 번째 레이블 컨트롤을 선택하고 두 번 클릭하여 label1 _Click()라는 이벤트 처리기를 코드에 추가 Click 합니다.
그런 다음 Ctrl 키를 누른 상태에서 다른 레이블을 각각 선택합니다. 모든 레이블이 선택되어야 합니다.
속성 창에서 번개 모양의 이벤트 단추를 선택합니다. 클릭 이벤트의 경우 상자에서 label1_Click을 선택합니다.
Enter 키를 선택합니다. IDE가 label1 _Click() 이라는 Click 이벤트 처리기를 코드에 추가합니다. 모든 레이블을 선택했기 때문에 처리기가 각 레이블에 후크됩니다.

코드의 나머지 부분을 채워 넣습니다.

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

''' <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>
''' <remarks></remarks>
Private Sub label_Click(ByVal sender As System.Object, 
                        ByVal e As System.EventArgs) Handles Label9.Click, 
    Label8.Click, Label7.Click, Label6.Click, Label5.Click, Label4.Click, 
    Label3.Click, Label2.Click, Label16.Click, Label15.Click, Label14.Click, 
    Label13.Click, Label12.Click, Label11.Click, Label10.Click, Label1.Click

    Dim clickedLabel = TryCast(sender, Label)

    If clickedLabel IsNot Nothing Then

        ' If the clicked label is black, the player clicked 
        ' an icon that's already been revealed -- 
        ' ignore the click
        If clickedLabel.ForeColor = Color.Black Then Exit Sub

        clickedLabel.ForeColor = Color.Black
    End If
End Sub

참고

코드를 수동으로 입력하는 대신 label1_Click() 코드 블록을 복사하여 붙여 넣는 경우에는 기존 label1_Click() 코드를 대체해야 합니다. 이렇게 하지 않으면 중복된 코드 블록이 남게 됩니다.

디버그>디버깅 시작을 선택하여 프로그램을 실행합니다. 파란색 배경의 빈 폼이 나타납니다. 폼에서 셀 중 하나를 선택합니다. 아이콘 하나가 표시될 것입니다. 폼에서 다른 위치를 계속 선택해 보십시오. 아이콘을 선택하면 폼에 나타납니다.

Screenshot shows the Matching Game with a single icon visible.

다음 단계

타이머를 사용하여 레이블을 변경하는 방법을 알아보려면 다음 자습서로 이동합니다.

매칭 게임에서 타이머 사용