Delphi [따라하기] 인공지능 오목게임(4) - 바둑판 그리기
2017.09.18 01:49
델파이 프로그래머 분들 안녕하세요 !
이번 세션에서는 우리가 지난 3번 세션에서 다운받은 프로젝트 기반으로 다음 작업을 하고자 합니다.
A 바둑판 배경색(황금색) 을 입히기
B. 바둑판의 가로 세로 19개의 선을 긋기
C. 바둑판의 포석점을 그리기
1. 바둑판 배경색(황금색) 을 입히기를 작업을 하기 위해서 FormCreate 이벤트에서 ResetBoard 로
선언된 프로시져를 호출합니다.
procedure TMainForm.FormCreate(Sender: TObject);
begin
ResetBoard;
end;
2. 이 ResetBoard 프로시져에서는 새 게임 버튼을 클릭하면 언제든 호출하기 위해서 별도로 선언하였습니다.
procedure TMainForm.ResetBoard;
var
I, J : SmallInt;
begin
// 바둑판을 노란색으로 체우는 과정
for I := 0 to 19 do
for J := 0 to 19 do
begin
TTTBoard.Canvas.Draw(18 * I, 18 * J, img_board.Picture.Graphic);
end;
end;
여기서 TTTBoard 라로 명명된 Image 컴포넌트의 Canvas.Draw 를 통해 각각의 넓이18 x 높이18
의 위치에 img_board 컴포넌트의 Picture 를 사용하여 바둑판을 그림니다.
3 물론 procedure TMainForm.ResetBoard; 호출하기위해선 Class 안에 다음처럼 선언을 해주셔야 하겠죠!
TMainForm = class(TForm)
...
private
procedure ResetBoard;
...
그리고 이제 실행 해보시면 다음의 결과를 보십니다.
4 이제 바둑판 위에 가로 세로 19개의 선을 긋기 위해서 ResetBoard 프로시쳐 안에 다음을 추가합니다.
procedure TMainForm.ResetBoard;
begin
...
//바둑판에 가로 세로 19개씩의 라인을 그리는 과정
for I := 1 to 20 do
begin
TTTBoard.Canvas.Pen.Width := 1; // 선의 굵기
TTTBoard.Canvas.Pen.Color := clBlack; // 선의 색깔
TTTBoard.Canvas.MoveTo(18, 18 * I); // 가로선의 시작점 지정
TTTBoard.Canvas.LineTo(TTTBoard.Width-18, 18 * I); // 가로선 긋기 , TTTBoard.Width 은 18x20개=360 입니다
TTTBoard.Canvas.MoveTo(18 * I, 18); // 세로선의 시작점 지정
TTTBoard.Canvas.LineTo(18 * I, TTTBoard.Width-18); //세로선 긋기
end;
end;
여기서 실행하면 다음의 상태가 됩니다.
5 이제 마지막으로 바둑판의 포석점을 그리기 위해서 ResetBoard 프로시쳐 안에 다음을 추가합니다.
여기서 Canvas.Ellipse 이벤트를 사용하는데 4픽셀 크기의 8개의 포석점을 놓았습니다.
procedure TMainForm.ResetBoard;
begin
...
//바둑판에 점을 그리는 과정
TTTBoard.Canvas.Ellipse((18*4)-2 ,(18*4)-2,(18*4)+2,(18*4)+2);
TTTBoard.Canvas.Ellipse((18*10)-2 ,(18*4)-2,(18*10)+2,(18*4)+2);
TTTBoard.Canvas.Ellipse((18*16)-2 ,(18*4)-2,(18*16)+2,(18*4)+2);
TTTBoard.Canvas.Ellipse((18*4)-2 ,(18*10)-2,(18*4)+2,(18*10)+2);
TTTBoard.Canvas.Ellipse((18*10)-2 ,(18*10)-2,(18*10)+2,(18*10)+2);
TTTBoard.Canvas.Ellipse((18*16)-2 ,(18*10)-2,(18*16)+2,(18*10)+2);
TTTBoard.Canvas.Ellipse((18*4)-2 ,(18*16)-2,(18*4)+2,(18*16)+2);
TTTBoard.Canvas.Ellipse((18*10)-2 ,(18*16)-2,(18*10)+2,(18*16)+2);
TTTBoard.Canvas.Ellipse((18*16)-2 ,(18*16)-2,(18*16)+2,(18*16)+2);
end;
그럼 실행해보시면 이제 바둑판이 완성되었죠! 다음 세션에서는 바둑알을 놓아보도록 하겠습니다.
그럼 좋은 하루보내십시요.
ps. 오늘 세션 내용은 첨부파일 main.pas. 에서 확인 해보실수 있습니다.
댓글 2
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
공지 | [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) | 관리자 | 2021.01.19 | 21585 |
공지 | [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) | 관리자 | 2020.11.16 | 20216 |
공지 | [10.4 시드니] What's NEW! 신기능 자세히 보기 | 관리자 | 2020.05.27 | 22270 |
공지 | RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 | 관리자 | 2018.10.23 | 28018 |
공지 | [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] | 관리자 | 2017.02.06 | 29304 |
공지 | [전체 목록] 이 달의 기술자료 & 기술레터 | 관리자 | 2017.02.06 | 24630 |
공지 | RAD스튜디오(델파이, C++빌더) - 시작하기 [1] | 관리자 | 2015.06.30 | 45557 |
공지 | RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) | 험프리 | 2014.01.16 | 181079 |
8 | [따라하기] 인공지능 오목게임(1) - 만들기 [2] | 대화마을 | 2017.09.12 | 5605 |
» | [따라하기] 인공지능 오목게임(4) - 바둑판 그리기 [2] | 대화마을 | 2017.09.18 | 2195 |
6 | [따라하기] 인공지능 오목게임(3) - 디자인 구성하기 | 대화마을 | 2017.09.14 | 1717 |
5 | [따라하기] 인공지능 오목게임(7) - 오목게임 승자(5돌) 결정 지능프로그램 | 대화마을 | 2017.10.17 | 1671 |
4 | [따라하기] 인공지능 오목게임(2) - 최종결과물 [2] | 대화마을 | 2017.09.14 | 1668 |
3 | [따라하기] 인공지능 오목게임(6) - 흑백 바둑알 놓고 위치저장 | 대화마을 | 2017.10.01 | 1109 |
2 | [따라하기] 인공지능 오목게임(5) - 바둑알 놓기 [2] | 대화마을 | 2017.09.22 | 988 |
1 | [고객사례-게임, 델파이] 오목게임 | 관리자 | 2018.10.23 | 847 |
작성해 주신 내용을 토대로 파이어몽키로 진행해봤습니다.^^
이참에 오목게임 하나 만들어 스토어에 올려봐야겠네요.
(다음 강좌를 기대합니다.^^)
특이사항으로는,
1) 화면크기를 조정할 수 있도록, 한칸이 18x18이 아닌 화면크기로 계산해 칸의 크기를 지정했습니다.
윈도우와 아이폰에서 실행한 모습입니다.
작업한 샘플 소스코드입니다.
Omok.zip