이 4개의 자습서 시리즈에서는 일치하는 게임을 만듭니다. 플레이어는 숨겨진 아이콘 쌍을 맞춥니다.
다음 자습서를 사용하여 Visual Studio IDE(통합 개발 환경)에서 다음 작업에 대해 알아봅니다.
- 아이콘과 같은 개체를 List<T> 개체에 저장합니다.
- C#의
foreach루프 또는 Visual Basic의For Each루프를 사용하여 목록의 항목을 반복합니다. - 참조 변수를 사용하여 폼의 상태를 추적합니다.
- 여러 개체와 함께 사용할 수 있는 이벤트에 응답하는 이벤트 처리기를 만듭니다.
- 타이머가 시작된 후 카운트다운을 하고 정확히 한 번 이벤트를 발생시키도록 만드세요.
완료되면, 완전한 게임을 가지게 됩니다.
이 첫 번째 자습서에서는 다음 방법을 알아봅니다.
- Windows Forms를 사용하는 Visual Studio 프로젝트를 만듭니다.
- 레이아웃 요소를 추가하고 서식을 지정합니다.
- 레이블을 추가하고 서식을 지정합니다.
필수 구성 요소
이 자습서를 완료하려면 Visual Studio가 필요합니다. 무료 버전은 Visual Studio 다운로드 페이지 방문하세요.
메모
이 자습서에는 Windows Forms 앱(.NET Framework) 프로젝트 템플릿이 필요합니다. 설치하는 동안 .NET 데스크톱 개발 워크로드를 선택합니다.
Visual Studio가 이미 설치되어 있고 템플릿을 추가해야 하는 경우 메뉴에서 도구>도구 및 기능 가져오기선택하거나 새 프로젝트 만들기 창에서 추가 도구 및 기능설치를 선택합니다.
Windows Forms 매치 게임 프로젝트를 만들기
게임을 만드는 첫 번째 단계는 Windows Forms 앱 프로젝트를 만드는 것입니다.
Visual Studio를 엽니다.
시작 창에서 새 프로젝트 만들기선택합니다.
새 프로젝트 만들기 창에서 Windows Forms를 검색합니다. 그런 다음 모든 프로젝트 유형 목록에서 Desktop 선택합니다.
C# 또는 Visual Basic에 대한 Windows Forms 앱(.NET Framework) 템플릿을 선택한 다음, 다음 선택합니다.
새 프로젝트 설정 창에서 프로젝트 이름을 MatchingGame으로 지정한 다음, 만들기를 선택합니다.
Visual Studio는 앱에 대한 솔루션 만듭니다. 솔루션은 앱에 필요한 프로젝트 및 파일에 대한 컨테이너입니다.
이때 Visual Studio는 Windows Forms 디자이너에 빈 폼을 표시합니다.
게임에 대한 레이아웃 만들기
이 섹션에서는 게임의 4-4 그리드를 만듭니다.
양식을 선택하여 Windows Forms 디자이너를 선택합니다. 탭은 C#의 경우 Form1.cs [디자인] 또는 Visual Basic의 경우 Form1.vb [디자인]을 읽습니다. 속성 창에서 다음 양식 속성을 설정합니다.
- Form1에서 Text 속성을 Matching Game로 변경합니다. 이 텍스트는 게임 창의 맨 위에 나타납니다.
- 폼의 크기를 설정합니다. Size 속성을 550, 550 설정하거나 Visual Studio IDE 아래쪽에 올바른 크기가 표시될 때까지 폼의 모서리를 끌어 변경할 수 있습니다.
IDE의 왼쪽에 있는 도구 상자 탭을 선택합니다. 표시되지 않으면 메뉴 모음에서 보기>도구 상자 를 선택하거나 Ctrl+Alt+X를 선택합니다.
도구 상자의 컨테이너 범주에서 TableLayoutPanel 컨트롤을 끌거나 두 번 클릭합니다. 속성 창에서 패널에 대해 다음 속성을 설정합니다.
BackColor 속성을 CornflowerBlue설정합니다. 이 속성을 설정하려면 BackColor 속성 옆에 있는 아래쪽 화살표를 선택합니다. 결과 대화 상자에서 웹을 선택합니다. 이름 목록에서 CornflowerBlue선택합니다.
메모
색은 사전순이 아닙니다. 콘플라워 블루 목록의 맨 아래에 있습니다.
아래쪽 화살표 버튼을 선택한 다음 가운데 큰 단추를 선택하여 Dock 속성을 채우기로 설정합니다. 이 옵션은 전체 폼을 덮도록 테이블을 확장합니다.
CellBorderStyle 속성을 Inset설정합니다. 이 값은 보드의 각 셀 사이에 시각적 테두리를 제공합니다.
TableLayoutPanel의 오른쪽 위 모서리에 있는 삼각형 단추를 선택하여 작업 메뉴를 표시합니다. 작업 메뉴에서 행 추가 두 번 선택하여 두 개의 행을 더 추가합니다. 그런 다음 열 추가 두 번 선택하여 열을 두 번 더 추가합니다.
작업 메뉴에서 행 및 열 편집 선택하여 열 및 행 스타일 창을 엽니다. 각 열에 대해 백분율 옵션을 선택한 다음 각 열의 너비를 25%로 설정합니다.
창 맨 위에 있는 목록에서 행 선택한 다음 각 행의 높이를 25%로 설정합니다.
완료되면 확인 선택하여 변경 내용을 저장합니다.
TableLayoutPanel은 이제 16개의 동일한 크기의 정사각형 셀이 있는 4 x 4 그리드입니다. 이러한 행과 열은 아이콘이 나중에 표시되는 위치입니다.
레이블 추가 및 서식 지정
이 섹션에서는 게임 중에 표시되는 레이블을 만들고 서식을 지정합니다.
양식 편집기에서 TableLayoutPanel이 선택되어 있는지 확인합니다. 속성 창의 맨 위에 tableLayoutPanel1이 보일 것입니다. 선택하지 않은 경우 양식에서 TableLayoutPanel을 선택하거나 속성 창의 맨 위에 있는 목록에서 선택합니다.
이전과 같이 도구 상자를 열고 공용 컨트롤 범주를 엽니다. TableLayoutPanel의 왼쪽 위 셀에 Label 컨트롤을 추가합니다. 이제 IDE에서 레이블 컨트롤이 선택되었습니다. 이 속성에 대해 다음 속성을 설정합니다.
- 레이블의 BackColor 속성을 CornflowerBlue설정합니다.
- AutoSize 속성을 False로 설정합니다.
- Dock 속성을 채우기로 설정합니다.
- 속성 옆의 아래쪽 화살표 단추를 선택한 다음 가운데 단추를 선택하여 TextAlign 속성을 MiddleCenter 설정합니다. 이 값은 아이콘이 셀 중간에 표시되도록 합니다.
- 글꼴 속성을 선택합니다. 줄임표(...) 단추가 나타납니다. 줄임표를 선택하고 글꼴 값을 Webdings으로 설정하고, 글꼴 스타일을 굵게로 설정하고, 크기를 48로 설정합니다.
- 레이블의 Text 속성을 다음 문자 c로 지정합니다.
이제 TableLayoutPanel의 왼쪽 위 셀에 파란색 배경 가운데에 검은색 상자가 포함됩니다.
레이블 컨트롤을 선택하고 TableLayoutPanel의 다음 셀에 복사합니다. Ctrl+C 키를 선택하거나 메뉴 모음에서 편집 >복사선택합니다. 그런 다음 Ctrl+V 사용하거나 >편집붙여넣기를 합니다.
첫 번째 레이블의 복사본이 TableLayoutPanel의 두 번째 셀에 나타납니다. 다시 붙여넣으면 세 번째 셀에 다른 레이블이 나타납니다. 모든 셀이 채워질 때까지 레이블 컨트롤을 계속 붙여넣습니다.
이 단계에서는 양식의 레이아웃을 완료합니다.
다음 단계
다음 자습서로 이동하여 각 레이블에 임의 아이콘을 할당하고 레이블에 이벤트 처리기를 추가하는 방법을 알아봅니다.