바닐라 자바스크립트로 오목 만들기

 HTML, CSS, 바닐라 JavaScript 를 사용해서 오목 게임을 만들어보았습니다. 
아래 링크를 클릭해 결과물을 확인할 수 있습니다. 
아직까진 한 컴퓨터에 두 유저가 달라붙어 (..) 게임을 진행 할 수밖에 없어요. 

<<구현내용>>
1. 캐릭터와 닉네임을 설정하여 입장
2. 랜덤으로 선공을 정하고, 누구 차례인지 알려줌
3. 오목 돌에는 캐릭터 사진이 들어감
4. 60초의 시간 제한이 있으며, 시간 안에 돌을 놓지 못한 경우 상대에게 순서가 넘어감
5. 승리한 경우, 5칸이 된 줄에 표시해주고 승리자를 팝업으로 띄워줌
6. '다시하기'를 클릭하면 승리가 스코어에 반영되며, 새 오목판이 깔림
7. 본인의 순서에는 '항복'하거나 '무승부 제안'을 할 수 있음
↓ 아래 링크를 클릭해서 결과를 확인하세요

Document

개요

순전히 할 수 있을 것 같다는 호기심에 시작했다가

어느새 수업 과제로 본격적으로 만든 오목입니다!

 

index.html 페이지 내에서, 액션에 따라 자바스크립트가 화면을 구성합니다. 

---

입장

캐릭터를 선택하고 닉네임을 입력할 수 있는 화면이 뜹니다.

생선대가리를 제외한 캐릭터는 저와 저의 친구들을 상징합니다 ^_^

생선대가리 캐릭터는 광기어린게 귀여워서 추가했습니다.

---

게임에 입장하기 전 이벤트와 관련된 자바스크립트는

intro.js에 있습니다. 

 

캐릭터 체크를 전부 초기화하는 charaterInit()

캐릭터를 골랐을 때 실행되는 selectedFriend()

입장 버튼을 눌렀을때 실행되는 이름 없는 함수

게임 화면에 들어갈 플레이어 정보를 담은 gamers()는 아래 깃 코드에서 확인해주세요

---

선택하지 않고 입장 할 경우, 선택을 해달라는 강조 표시가 뜹니다. 닉네임과 캐릭터 모두 동일합니다.

첫번째 플레이어인 '생선대가리'가 입장했습니다. 상단의 알림창을 통해 대기중인 플레이어를 확인할 수 있습니다. 

두번째 플레이어인 핑구도 입장하겠습니다. 

 

---

게임시작

---

게임 진행과 관련된 자바스크립트 코드는 

letgame.js에 선언되어 있어요. 

오목판을 초기화하여 새 게임을 실행할 수 있도록 하는 init()

어떤 플레이어의 차례인지 표시하는 whosTurnBlink()

돌이 놓였거나, 시간이 초과되었을 때, 차례를 다른 플레이어에게 넘겨주는 changeTurn()

오목 판을 클릭 시 돌을 놓는 setDoll()

돌이 놓였을 때, 5돌이 연속으로 놓였는지 확인하는 isWin()과 gocheck()

연속된 5 돌이 있을 때, 해당하는 돌들을 표시해주는 coloredDoll()

팝업으로 승리한 사람을 띄워주는 yourWin()

'무승부 제안' 버튼을 클릭했을 때 실행되는 bothwin()

'항복'했을 때 실행되는 hangbok()

'다시하기'를 클릭했을 때 실행되며 init을 호출하는 gameAgain()

위 코드들은 아래 버튼을 클릭해 깃에서 코드를 확인해주세요!

---

랜덤으로 핑구가 선공을 잡았네요. 제한시간 60초 안에 돌을 놓아야 합니다. 그렇지 않으면 돌을 놓지 못한 상태로 상대방에게 차례가 넘어갑니다.

핑구는 제한시간을 넘겼습니다. 

생선대가리가 첫 돌을 놓네요. 흑돌에 생선대가리가 새겨져있습니다. 

생선의 공격에 핑구는 고전을 면치 못합니다. 첫 승리는 생선대가리가 가져갑니다. 

성공한 수에는 노란색 테두리가 생기는데, 지금 보니 잘 안보이네요. 3px정도로 고칠까봐요.

다시하기를 클릭합니다. 현재 스코어는 생선:핑구 = 1:0 입니다.

이번 선공은 생선이 가져갑니다.

이후로 진행하면 똑같습니다.. 다시하기를 누르면 스코어가 반영되고, 판이 새로 깔립니다. 

 

코드에 대한 내용이 궁금하신 분들은 접힌 글을 펼쳐, 깃의 코드와 함께 설명을 확인해주세요

 

읽어주셔서 감사합니다 ^_^