vue 로 오목게임 만들기

오목게임 개발을 왜 했나?

vue 공부가 한참인 요즘 vue 를 사용하여 무언가 개발하고 싶지만, 아이디어가 떠오르지 않았다. tetris 게임은 엄두가 나지 않고 오목을 개발하기로 마음 먹었다.

오목 관련 정보 검색

필자는 오목이 단순히 한줄에 5개의 같은 색 돌을 놓으면 이기는 것으로만 알고 있었으나, 흑이 아주 유리하다여 여러가지 룰이 있다는 것을 알게되었다. 어릴 때 친구와 오목을 많이 두긴 했지만 오목에 대해서 너무나도 무지했다는 것을 알게 되었다. 오목-나무위키 모든 룰을 적용하는 것은 이번 사이드 프로젝트의 목적과 맞지 않기에 필수적인 부분만 구현하기로 했다.

필자가 생각하는 필수 룰

‘렌주룰‘을 읽고나서 아래와 같이 총 4가지를 룰을 옵션으로 제공한다.

1. 3-3 제한 : 양쪽모두 막히지 않은 3의 돌을 2개 만드는 수 금지
2. 3-4 제한 : 양쪽모두 막히지 않은 3과 4의 돌을 만드는 수 금지
3. 장목 제한: 6개 이상의 연속돌을 만드는 수 금지
4. 흑돌만 제한 : 위에 3가지 제한을 흑돌에만 제한!

기타 추가 기능

1. 한수 무르기 기능 - 게임내에서 한수 무르기 허용을 설정한 후, 사용가능
2. 게임시작/정지
3. 연습모드(게임종료)에서 보드판 지우기
4. 돌 번호 표기 - 연습모드 또는 게임이 끝나고 나서, 연구목적 혹은 상대방에게 알려줄 때 유용
5. 오목판 칸의 숫자를 15 또는 19로 변경 - 고수의 경우, 렌주룰을 적용해도 15칸은 흑이 더 유리하다고 한다. 그래서 19칸 필요!!

추가 개발 해볼만한 기능

1. 온라인 대전 및 관전모드 (nodejs와 socketio를 사용)
2. 1인용 AI 대전 (컴퓨터 상대로 하는 대전 - 초, 중, 고수)

게임개발 참고자료

• github.com/leekeunhwan/omok
• 오목 금수체크 알고리즘 문의 댓글

결론

게임은 vue-omok-game을 통해서 할 수 있다.

참고자료

• 오목-나무위키
• 렌주룰