2020년 2월 작성. 이 게임은 Vue 2.6 + Vuetify 2 + Vue CLI 4로 만들었다. Vue 2는 2023년 12월 31일에 지원이 종료됐으니, 새로 만든다면 Vue 3 + Vite로 시작하는 것이 맞다.
목차
오목 게임을 만든 이유
Vue를 한창 공부하던 때라 Vue로 무언가 만들어 보고 싶었지만, 마땅한 아이디어가 떠오르지 않았다. 테트리스는 엄두가 나지 않아서 오목을 만들기로 했다.
오목 규칙 조사
오목은 같은 색 돌 다섯 개를 한 줄로 놓으면 이기는 게임으로만 알고 있었다. 그런데 찾아보니 먼저 두는 흑이 매우 유리해서, 이를 보완하는 규칙이 여러 가지 있었다(오목 - 나무위키). 어릴 때 친구와 오목을 많이 두었지만 규칙은 거의 몰랐던 셈이다.
모든 규칙을 구현하는 것은 이 사이드 프로젝트의 목적과 맞지 않아서, 꼭 필요한 부분만 골라 구현했다.
구현한 금수 옵션
렌주룰을 참고해 아래 네 가지를 켜고 끌 수 있는 옵션으로 제공했다.
- 3-3 제한: 한 수로 양쪽이 막히지 않은 3(열린 3)을 두 개 이상 만드는 수를 금지한다.
- 3-4 제한: 한 수로 열린 3과 4를 동시에 만드는 수를 금지한다.
- 장목 제한: 여섯 개 이상 연속으로 놓는 수를 금지한다.
- 흑돌만 제한: 위 세 가지 제한을 흑에게만 적용한다.
참고로 표준 렌주룰에서 흑의 금수는 3-3, 4-4, 장목이고, 3-4는 금수가 아니라 흑의 정상적인 승리 수단이다. 이 게임의 «3-4 제한»은 렌주룰 그대로가 아니라 직접 고를 수 있는 추가 옵션이다.
그 밖의 기능
- 한 수 무르기: 게임 설정에서 무르기를 허용하면 사용할 수 있다.
- 게임 시작·정지
- 연습 모드에서 바둑판 지우기
- 돌 번호 표시: 연습 모드이거나 게임이 끝난 뒤에 수순을 복기하거나 상대에게 설명할 때 유용하다.
- 바둑판 크기 15줄·19줄 선택: 고수끼리는 렌주룰을 적용해도 15줄에서 흑이 더 유리하다고 해서 19줄도 지원했다.
추가로 만들어 볼 만한 기능
- 온라인 대전과 관전 모드 (Node.js + Socket.IO)
- 컴퓨터와 겨루는 1인용 AI 대전 (초급·중급·고급)
개발 참고자료
정리
렌주룰을 전부 구현하지 않아도, 금수를 옵션으로 켜고 끌 수 있게 만들면 가볍게 즐기는 오목과 규칙을 지키는 오목을 한 게임에서 모두 지원할 수 있다. 게임은 여기에서 해볼 수 있다.