자습서: 일치하는 게임 WinForms 앱에 아이콘 추가

2025-06-12

이 4개의 자습서 시리즈에서는 플레이어가 숨겨진 아이콘 쌍을 맞추는 게임을 만듭니다.

일치하는 게임에서 플레이어는 사각형을 선택하여 아이콘을 표시한 다음 다른 사각형을 선택합니다. 아이콘이 일치하면 계속 표시됩니다. 그렇지 않으면 게임에서 두 아이콘을 모두 숨깁니다. 이 자습서에서는 레이블에 아이콘을 임의로 할당합니다. 숨겨지도록 설정한 다음 선택할 때 표시됩니다.

이 두 번째 자습서에서는 다음 방법을 알아봅니다.

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

필수 구성 요소

이 자습서는 이전 자습서인 짝 맞추기 게임 애플리케이션을 만드는 것에서 이어집니다. 해당 자습서를 완료하지 않은 경우 먼저 해당 자습서를 진행합니다.

Random 개체 및 아이콘 목록 추가

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

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

Visual Studio를 엽니다. MatchingGame 프로젝트가 Open 최근아래에 표시됩니다.
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#을 사용하는 경우 여는 중괄호 뒤와 클래스 선언(public partial class Form1 : Form) 바로 뒤에 코드를 배치해야 합니다. Visual Basic을 사용하는 경우 클래스 선언(Public Class Form1) 바로 다음에 코드를 배치합니다.

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

메모

목록은 필요에 따라 축소되고 증가할 수 있으므로 이 프로그램에서 중요합니다.

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

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

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

AssignIconsToSquares() 메서드를 Form1.cs 또는 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);
        }
    }
}

''' <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의 각 레이블 컨트롤을 반복합니다. 각각에 대해 동일한 문을 실행합니다. 문장은 목록에서 임의의 아이콘을 선택합니다.

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

AssignIconsToSquares()에서 Form1생성자에 Form1.cs 메서드 호출을 추가합니다. 이 메서드는 게임 보드를 아이콘으로 채웁니다. 생성자는 개체를 만들 때 호출됩니다.
```
public Form1()
{
    InitializeComponent();

    AssignIconsToSquares();
}
```
Visual Basic의 경우 AssignIconsToSquares()Form1_Load 메서드에 Form1.vb 메서드 호출을 추가합니다.
```
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    AssignIconsToSquares()
End Sub
```
자세한 내용은 생성자(C# 프로그래밍 가이드) 또는 생성자 및 소멸자사용을 참조하세요.
프로그램을 저장하고 실행합니다. 각 레이블에 임의 아이콘이 할당된 폼을 표시해야 합니다.

팁

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

아이콘을 숨기지 않았기 때문에 이제 아이콘이 표시됩니다. 플레이어에서 숨기려면 각 레이블의 ForeColor 속성을 BackColor 속성과 동일한 색으로 설정할 수 있습니다.
프로그램을 중지합니다. AssignIconsToSquares() 메서드의 루프 내에서 주석이 추가된 코드 줄의 주석 표시를 제거합니다.
- C#
- VB
```
iconLabel.ForeColor = iconLabel.BackColor;
```
```
iconLabel.ForeColor = iconLabel.BackColor
```

프로그램을 다시 실행하면 아이콘이 사라진 것 같습니다. 파란색 배경만 나타납니다. 아이콘은 임의로 할당되며 여전히 존재합니다.

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

이 매칭 게임에서 플레이어는 숨겨진 아이콘을 하나 드러낸 다음, 두 번째 아이콘을 드러냅니다. 아이콘이 일치하면 계속 표시됩니다. 그렇지 않으면 두 아이콘이 다시 숨겨집니다.

게임이 이런 방식으로 작동하도록 하려면 선택한 레이블의 색을 배경과 일치하도록 변경하는 Click 이벤트 처리기를 추가합니다.

Windows Forms 디자이너에서 양식을 엽니다. Form1.cs 또는 Form1.vb선택한 다음 뷰>디자이너선택합니다.
첫 번째 레이블 컨트롤을 선택하고 두 번 클릭하여 Click라는 이벤트 처리기를 코드에 추가합니다.
그런 다음 Ctrl 키를 누른 채 다른 레이블을 각각 선택합니다. 모든 레이블이 선택되어 있는지 확인합니다.
속성 창에서 번개 모양인 이벤트 단추를 선택합니다. 이벤트의 경우 상자에서 label1_Click 선택합니다.
엔터 키를 누르세요. IDE는 Click 또는 Form1.vb코드에 label1 _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() 코드를 바꿔야 합니다. 그렇지 않으면 중복된 코드 블록으로 끝납니다.

디버그>디버깅을 선택하여 프로그램을 실행하세요. 파란색 배경이 있는 빈 폼이 표시됩니다. 폼의 셀 중 하나를 선택합니다. ** 아이콘 중 하나가 보일 것입니다. 양식에서 다른 위치를 계속 선택합니다. 아이콘을 선택하면 아이콘이 표시됩니다.

스크린샷은 맞추기 게임에 단일 아이콘이 표시된 모습을 보여줍니다.

다음 단계

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

매칭 게임에서 타이머 사용