반응형 오목19 자바스크립트 오목 게임 개발 #7 이번 회차에서는 오목판 위에 실제 오목돌을 그리는 클램스 멤버함수 및 호출 부분을 구현해 보겠습니다. 오목판의 특정 위치를 마우스로 좌클릭하면 흑돌부터 순서대로 그려지도록 합니다. Omok 클래스 멤버함수 추가 (omok.js) 오목돌을 그리기 위한 Omok 클래스의 멤버함수를 구현합니다. 오목돌 그리는 방법 먼저 오목돌을 그리는 방법에 대해 정리한 후에 실제 코드를 작성합니다. 오목돌은 마우스 클릭 이벤트 발생시점에 해당 위치에 직접 그려주는 방법도 있지만, 여기에서는 아래와 같이 오목돌 착수정보를 관리하는 배열에 추가(push) 한 후에 착수정보배열을 기준으로 전체 오목돌을 다시 그려주는 방법으로 구현해 보겠습니다. 오목위치 구하기 canvas상의 마우스 클릭 위치 좌표를 오목판 사이즈(15*15 o.. 2023. 1. 22. 자바스크립트 오목 게임 개발 #6 이번 회차에서는 오목게임의 근간이 되는 오목클래스를 디자인하고 우선 오목판을 그려봅니다. 오목클래스는 개발이 완료될 때까지 단계적으로 구현해야 할 중요한 영역입니다. 객체지향의 핵심이 되는 클래스/객체 개념은 별도로 꼭 학습해 보시길 권장합니다. 오목클래스 정의 오목클래스는 오목게임의 중요한 로직을 담고 있는 핵심클래스가 됩니다. 단계적으로 진행하면서 계속 개발하고 보완해 나갈 예정입니다. 멤버변수 오목의 여러 속성들을 멤버변수로 정의합니다. 주요 상수 정의 게임환경변수 정의 오목판정보 배열 정의 //상수 정의 VACANT = ''; BLACK = 'black'; WHITE = 'white'; HUMAN = 'H'; COM = 'C'; Alphabet = ['A', 'B', 'C', 'D', 'E', '.. 2023. 1. 21. 자바스크립트 오목 게임 개발 #5 본격적으로 자바스크립트로 개발을 시작해 보겠습니다. 오목게임 흐름(Flow) 먼저 오목게임이 어떤 순서로 처리되는지 전체적인 Flow를 도식화해서 정리해 봅니다. 전체 게임 흐름 시작버튼 클릭 이벤트 처리 사람 착수 클릭 이벤트 처리 전체 게임 흐름 게임 설정 : 게임에 필요한 변수 선언 및 초기값 할당 등의 설정을 처리합니다. 이벤트 설정 : 게임에서 발생할 수 있는 이벤트를 생성하고 이벤트 발생 시 처리할 콜백함수 내용을 구현합니다. 이벤트 대기 : 이벤트 발생을 대기합니다. 이벤트 처리 : 발생한 이벤트에 대한 콜백함수의 내용을 처리합니다. 시작버튼 클릭 이벤트 오목객체 생성 : 오목게임을 시작하기 위해 오목클래스에 대한 객체를 생성하고 게임을 시작합니다. 컴퓨터 착수 처리 : 흑 선수가 컴퓨터인 .. 2023. 1. 20. 자바스크립트 오목 게임 개발 #4 이 번 회차에서는 CSS를 포함해서 전체적인 HTML코드를 작성해 보겠습니다. HTML body 작성 이전 회차에서 설계한 내용을 기준으로 HTML의 body를 각 영역별로 작성합니다. canvas 영역 canvas 영역은 오목판을 그리기 위한 영역이므로 오목판 격자수와 격자의 길이를 대략 정해서 전체 사이즈를 지정해 줍니다. 15*15인 경우 가로 세로 14개, 19*19인 경우 18개의 정사각형을 그려주면 각각 15*15, 19*19의 격자무늬 오목판이 생성됩니다. 오목판 주위의 여백을 고려하여 대략 아래와 같이 사이즈를 지정해 줍니다. canvas사이즈는 개발하면서 조금씩 조정해 가면 됩니다. 오목판 사이즈 선택 영역 이 영역은 게임 오목판의 사이즈를 선택하기 위한 영역으로 15*15와 19*19 .. 2023. 1. 20. 이전 1 2 3 4 5 다음 반응형
