이 코드는 스스로 작성한 것이 아니라 영상을 보고 따라 작성한 것입니다.
I didn't write this code myself, just watched the video and followed along.
- 최초(게임 시작)에 2, 4 중 하나를 랜덤한 위치에 2개 생성한다.
- 상하좌우 방향키 입력 시 생성된 숫자 타일 전체를 이동한다.
- 숫자 타일은 해당 방향으로 할 수 있는 최대한으로 이동한다.
- 숫자가 이동하면서 동일한 숫자의 타일과 맞닿을 경우, 두 타일이 합쳐지며 숫자가 두 배 증가한다.
- 1회 이동으로 타일이 연쇄적으로 합쳐질 수 없다. (한 줄에 ２２２２가 있을 경우, 오른쪽 방향키 1회 입력 시 □□□８이 아니라 □□４４가 되어야 한다.)
- 방향키 입력으로 숫자 타일이 이동할 시 랜덤한 위치에 2, 4 중 하나를 1개 생성한다.
- 보드판이 꽉 찼으며 더 이상 숫자 타일이 이동할 수 없는 경우, 패배 처리한다.
- 숫자 타일이 움직일 4 × 4 크기의 판을 만드는 함수
- 최초에 2개의 숫자 타일을 생성하는 함수
- 생성되는 타일의 숫자는 2, 4 중 하나이고 각 숫자의 확률은 50%로 함
- 방향키 입력 시 숫자 타일이 생성, 이동, 합산되는 함수
- 타일 생성: 1개의 숫자 타일을 랜덤한 위치에 생성. 생성되는 타일의 숫자는 2, 4 중 하나이고 각 숫자의 확률은 50%로 함
- 타일 이동: 해당 방향으로 할 수 있는 최대한으로 숫자 타일을 이동함
- 타일 합산: 동일한 숫자 타일과 맞닿을 경우, 두 타일이 합쳐지며 숫자가 증가(2의 제곱)
- 1회 이동으로 타일이 연쇄적으로 합쳐질 수 없음
- 패배 처리 함수
- 보드판에 남은 공간이 없는가? → Y
- 움직여 합칠 수 있는 숫자가 없는가? → Y
- 위 조건이 모두 참일 때 패배 처리, 패배 alert 표시
- 보드판의 크기를 지정하는 함수
- 칸수, 칸 크기, 칸과 칸 사이의 간격 설정 가능
- 4 × 4 크기 이외에도 3 × 3, 5 × 5 등 GRID_SIZE를 조절하여 변경 가능
- 타일을 처리하는 함수 (생성, 이동, 합산)
- 패배 조건을 확인하는 함수
- 숫자에 따라 타일 색상을 바꾸는 함수
- 코드를 작성할 때 당연한 것은 없다.
2048은 숫자를 움직여 합치는 단순한 게임이라고 생각했는데, 생각보다 신경써야 하는 부분이 많았다. 타일을 움직였을 때 보드 바깥으로 나가지 않게 처리해 주어야 하는 점이 특히 인상적이었다. 타일이 보드 안에서 움직여야 한다고 무심코 당연하게 전제하고 있었기 때문에…. 코드 작성 시에는 기본적이고 당연하다고 생각되는 부분조차 당연하지 않다는 걸 체감했다. - 다음에 직접 2048을 만든다면 기능별로 브랜치를 나누어 구현하고 싶다.
영상을 참고하면서 만들다 보니, 전체적으로 어떤 구조로 이루어져 있고 지금 만드는 것이 어떤 기능인지 몰라 따라하기에 급급했다. 기능별로 브랜치를 나누는 연습을 해보고 싶었는데 그러지 못해서 아쉽다. - 이번에 2048을 만들게 된 계기는 좋아하는 캐릭터 이미지를 넣어서 2048을 만드는 문화(^^;;)가 있는데, 그걸 내가 좋아하는 장르로 해보고 싶었기 때문이다. 공부하려고 만드는 거였다면 시간을 좀 더 들여 궁리했을 것이다. 참고한 영상에서는 방향키를 입력 시 타일이 이동하는 함수를 방향키별로 모두 만들어 주었는데, 어떤 사람은 게임보드를 회전하여 움직임을 처리했다. 단순한 구조의 동일한 게임인데도 저마다 갖가지 방식으로 구현하고 있어서 흥미로웠다. 나는 뭐 딱히 나만의 방식! 으로 구현하고 싶진 않고… 여러 방법을 알고, 그 중에서 지금 만드는 제품에 가장 효율적인 방법이 무엇인지 알 수 있는 충분한 지식과 통찰력을 얻고 싶다.
- '2048'을 달성하면 승리 alert 표시
- 현재는 게임을 끝내려면 질 수밖에 없는 구조이다.
- 게임을 더 진행할지, 여기서 게임을 끝낼지 묻는 모달 추가
- 점수 계산 및 표시
- 실행취소 버튼 추가(최대 1회) (⭐)
- 생성 타일 확률 조정
- 경험적으로 2가 4보다 많이 생성되었던 것 같은데, 확률 조정이 필요할 것 같다.
- 각 타일에 원하는 이미지를 삽입할 수 있는 기능(⭐3)