2012.08.01 ~ 2022.01.11
현재 본인이 개발을 시작한 경력기간이다.
30이라는 늦은나이에 개발을 시작해서 어느덧10년차!
평소에도 자기개발을 해야하기도하고 경력의 반이상은 VanillaJS로만 개발해봐서 현재 많이 쓰이는 모던프레임웍도 공부해야겠다고 생각하던 찰나 내 친구 로니게임즈의 대표와 캣클로즈라는 보드게임을 해보면서
이거다 싶었음.
캣클로즈라는 게임이 무엇인가?(보드게임 홍보아님)
간단히 말해서 주사위를 굴리고 고양이가 몇마리인지 예측하여 주사위를 배치하여 점수를 얻는 간단한 룰의 보드게임이다
대충 이런식으로 7마리~11마리가 있거나 2~6마리의고양이가 있는데
주사위4개를 굴려서 각각 2개씩 배치하여 예측한 수와 비슷하거나 같으면 점수를 획득하는 방식이다.
예를들어 위 이미지를 뒤집었을때 고양이가 9마리라 예측하여 주사위를 4 / 5를 배치했는데 뒤집어서 나온 고양이 숫자가
위 이미지처럼 8마리면 9와는 1차이나므로 1점의 점수를 얻는 방식.
완전일치할경우 2점을 얻는 방식이다.
이것을 JS로 코딩해보기로했다.
우선 설계가 필요하다...필요한 객체를 구상해봤다.
1. 카드 객체가 필요하다.
2. 주사위 객체가 필요하다.
3. 보드판 객체가 필요하다.
4. 점수를 위한 물고기 객체가 필요하다.
그렇다면 어떤 프레임웍을 사용하는게 좋을까?
위 게임을 만들어보기 위해 아래 요건들에 부합해야한다.
- 대형이 아닌 소형사이트에 적합해야한다.
- 초기 세팅이 간편해야 한다.
- 참고할 레퍼런스가 많아야 한다.
- 소켓통신 구현에 어려움이 없어야 한다.
- 추후 점수저장을 위한 DB(MongoDB를 염두에두고있음)연동이 가능해야한다.
위 조건을 나열해보니 우선 대형사이트에 적합한 Angular는 채택되지 못했다.
React로 해볼까했는데 이 프로젝트를 끝내고 다음 포트폴리오 준비시에는 React를 써보기로하고 우선 Vue와 Svelte중 하나를 택하기로 했다.
Vue의 경우 Nuxt로 초기 세팅을 편하게 할수있고 레퍼런스가 꽤 많아서 최종적으로 Vue로 채택하였다.
초기 프로젝트 세팅을 완료하였다.
우선 카드객체에 대한 설계를 진행하였다.
카드객체에는 아래와같이 설계하였다.
1. 카드객체는 보드판에서 사용하므로 컴포넌트로 취급한다.
2. 카드객체는 CatCard로 객체명을 지정한다.
3. 카드객체는 현재 고양이숫자를 저장할 수 있어야 한다.
4. 카드객체는 자신이 현재 뒤집혔는지 여부를 알 수 있어야 한다.
5. 카드객체는 클릭시 뒤집을 수 있어야 한다.
6. 카드객체는 뒤집을 때 모션이 존재해야 한다.
처음에는 보드판에서 Store에서 각 카드에 대한 상태를 제어할 까 생각했지만. 객체지향 관점에서 각 카드는 자신의 상태를 자신만 알고있는게 더 옳다고 생각하여 각 카드에서 상태를 가지고있는 형태로 설계하였다.
카드를 구현하고 출력한 결과!!!!
무사히 구현됬다.
돌아가는 모션은 Y축 기준으로 360도 돌아가게 제작했다
이걸 어떻게 올려야할까...후..
다음 해야할일은 메인 이미지 클릭시 카드가 드로우되는 모션과
주사위에 대한설계를 진행할 예정이다.
