윷짝놀이는 웹 윷놀이 게임 프로젝트이다.
게임 방법
-
각 플레이어는 말을 3개 가진다.
-
말 동내기
윷 판을 한바퀴 돌아 말을 끝내는 것을 말을 동낸다고 표현한다. -
승리 조건
3개의 말을 가장 먼저 동내는 사람이 이기고 게임이 종료된다. -
윷 던지기
도,개,걸,윷,모 가 랜덤으로 나온다.
윷, 모를 던진 경우 한 번 더 던진다. -
말 업기
같은 위치에 도착하는 내 말을 업을 수 있다. -
말 잡기
내 말이 도착할 곳에 상대방의 말이 있다면 잡고 윷을 한번 더 던질 수 있다. -
이벤트 칸
이벤트 칸은 게임마다 랜덤으로 지정된다
이벤트 칸에 도착했을때 랜덤한 이벤트 카드를 뽑아 바로 실행한다.
로직 정리
복잡한 소켓통신은 처음이라서 로직을 정리하는데 오래걸렸다.
1차 로직 정리
2차 로직 정리
3차 로직 정리
게임 진행구조 설계
처음에는 윷 던지기, 윷 말 고르기, 윷 말 움직이기를 하나의 action이라고 두고
action queue를 만들어서 한 사람의 턴이 시작되면 이 queue에 action을 쌓고 action을 모두 소모하면 한 사람의 턴이 종료된다고 간주하고
다음 플레이어의 차례로 넘어가도록 구현하려고 했다.
실제 코드로 표현해봤더니
useEffect(()=>{
if(actionQueue.isEmpty()){
//next turn
}
switch(nowAction){
case "TurnStart" :
//...
case "ThrowYut" :
//...
...
}
}, [actionQueue])
이런 구조로 하려고 했는데
이 구조의 문제점은
1. queue가 비었을 때 턴 종료
윷 말을 던진 결과를 queue에 쌓아두고 그것을 모두 다 쓰면 턴을 종료하게 된다면
위와 같은 경우에 문제가 된다.
말을 잡으면 한번 더 던져야되는데 말 잡기까지 소모하면 queue가 비어버리기 때문에 바로 turn이 종료되는 문제가 있을것이다.
그렇다면 턴 종료 action을 넣고 감지하면 되지 않을까?
2. 턴 종료 action 감지 - 필수 action을 다 넣어두고 시작
윷을 다시 던질 경우 action을 쌓는것이 아니라 중간에 끼워넣어주는 식으로 구현해야되는데
끼워넣을 위치는 어떻게 찾을 것인지
이벤트 카드를 뽑을때는 어떻게 할것이며
말을 잡거나 말 업기, 동나기는 모두 윷 말이 모두 움직인 뒤에 실행되는 action인데
이런 경우는 어떻게 처리할 것인지도 잘 모르겠고
턴 종료라는 action을 감지해서 턴을 종료할거면 actionQueue라는 구조가 의미가 있을것인가에 대한 의문도 있었다.
내가 채택한 구조
결국 action을 queue 형태가 아닌 단일 변수로 action의 값이 바뀔때마다
말 선택을 가능하게 한다던가
윷 던지기 버튼을 활성화 시킨다던가
하는 처리를 해주었다.
type GameActionType =
| "Started" //게임 시작
| "ThrowYut" //윷을 던져야함
| "ChoosePiece" //윷 말을 고름
| "MovePiece" //윷 말을 움직임
| "End" //게임 끝
| "TurnStart" //다음 턴 시작
| "TurnEnd" //현재 턴 끝
| "Catch" //상대방의 말을 잡음
| "Event"; //이벤트 카드 실행
| "None" 게임에서 사용되는 action type이다
각 action은 자신만의 흐름을 가지고 있고
게임은 action 흐름간의 연결로 이루어져있다
문제점
구조를 고민할 때 차선책이라고 생각되어 결정했지만
후에 이벤트 카드 로직을 추가할 때 문제가 생겼다.
action을 저장해두고 쓰는게 아니라 필요할때마다 값을 바꾸는 식이라서
위의 그림처럼 이벤트 칸에서 말을 잡을 경우가 문제가 된다.
말을 업는것도 똑같은 문제가 생긴다.
턴을 끝내는것도 특정 흐름의 마지막에 위치하다보니
특정 흐름을 끝내고 event를 실행하는 구조가 될 수 없는것이었다...
결국 event 칸에 도착했을때 말을 잡거나 업는 경우
event 칸의 action을 포기하고 말을 잡거나 업는 경우를 우선적으로 실행하도록 했다.
이 내용은 사용자들도 알 필요가 있어서 게임 설명에 포함시켰다.
