-
Notifications
You must be signed in to change notification settings - Fork 3
v0.1.3
1차 완성의 목표는 사다리게임이라고 말하면 누구나 알만한 기능 구현을 목표로 하였습니다.
- 사다리 개수 입력
- 플레이어 이름 입력
- 보상 입력
- 사다리 그리기
- 사다리 결과
구현해야 할 기능을 정리해보면 이렇게 5개 정도로 아주 심플합니다.
첫 페이지에서는 사다리를 그리기 위해 필요한 사다리 개수, 플레이어 이름, 보상을 입력받게 만들었습니다. 사다리 개수가 1개면 의미 없기때문에 최소 2개부터 입력할 수 있게 하였고 뇌피셜로 20개가 넘을 필요 없을 것이라 판단해서 20까지 입력할 수 있게 조건을 걸었습니다. 이름과 보상은 선택적으로 입력할 수 있게 하였는데, 자동으로 입력되면 편할 것 같다는 얘기가 많아서 다음에는 터치나 클릭으로만 입력되게 해야겠다고 생각 중 입니다.
사다리 개수, 플레이어 이름, 보상을 입력하고 마지막에 Next
버튼을 누르면 사다리가 나타나게 하였습니다. 학교에서 칠판에 사람 수만큼 수직으로 막대기를 그리고 돌아가면서 무작위로 막대기를 이으며 사다리를 만들어가던 모습을 상상하며 만들었는데, 너무 제 생각만 했던 것 같습니다. 많은 분들이 막대기밖에 없어서 어떻게 해야될지 모르겠다는 의견을 주셨습니다. 😭
이 부분도 사다리가 처음 만들어질 때 미리 몇개 이어져 있다던지 튜토리얼을 넣는다던지 개선점이 필요해보입니다.
막대기에 조금 튀어나온 부분이 연결지점인데, 연결지점을 클릭해서 막대기를 이을 수 있습니다. (이렇게 설명해주지 않으면 아무도 모를 듯)
중간 막대기를 잇는 로직은 계산이 많아서 꽤 무거워 보입니다. 처음에는 중간 막대기 데이터에 계산된 좌표를 저장하여 재계산을 피하려고했는데, 생각해보니까 화면의 크기가 바뀌지 않으면 재계산할 일이 없었습니다. 그래서 좌표의 계산은 렌더링이 시작되는 순간 실행되고 저장하지 않습니다.
막대기를 이어서 사다리를 만든 뒤 준비 완료
버튼을 클릭하면 드디어 사다리게임을 시작할 수 있습니다.
결과를 보여주는 선은 Canvas를 사용했습니다. 사다리 데이터는 수많은 노드로 연결되어있는데, 중간 막대기를 이을 때마다 서로 연결되게 해놓았습니다. 시작 지점부터 보상 지점까지 다음 노드를 순회하며 좌표를 계산합니다.