(3 in 5)^2 퍼즐 / Rubik's Race / 루빅스 레이스

게임 하러 가기: https://joonas-yoon.github.io/rubik-s-race/

(3 in 5)^2 puzzle

2048 게임을 수정하여 다른 게임으로 만들었다.

게임 화면

빈 칸(어두운 색의 칸)으로 다른 타일을 옮겨서, 큰 판에 있는 중앙 3x3칸의 타일 배치를 (위에 있는) 작은 판의 3x3 타일 배치와 똑같게 만들면 게임에 승리한다. 더 적은 움직임으로 맞출수록 고득점이다.

사실 저번 주말, 카톡 단체 채팅방에서 우연히 아래 짤이 올라왔다.

실제 퍼즐 게임

머하는거지... 하고 보다가 오! 했다. 갑자기 이걸 코딩하겠다는 이야기도 나오고 해서 나도 솔깃했고 다음날 저녁 간단한 프로토타입을 만들었다.

우선, 처음부터 만들기엔 힘드니까 자주 하던 2048 게임을 클론해서 수정해보기로 했다!
생각보다 커스터마이징하기 쉽게 코드가 깔끔하게 되어있었고, 수월하게 개발을 시작했다.

 

먼저 그리드 크기를 4x4에서 5x5로 늘렸고,
빈 칸을 제외한 24개의 타일을 채우도록 하였고, 타일이 합쳐지는 기능을 제거했다.

다음으로는 빈 칸과 인접한 타일이 swap 되도록 했다.
각 타일에 색깔을 입혔고 숫자를 숨겼다.

24개의 (생성된) 타일들 중 9개를 선택해 정답 타일(3x3 크기)로 저장했고 화면에 작은게 표시되도록 했다.

모바일 기기에서도 보일 수 있도록 가로 520px 이하의 반응형 CSS도 작성했다.

 

이후 지인들에게 주소를 알려주고 플레이하는 것을 지켜보았다.
2048 게임을 접해본 사람은 곧장 키보드로 했지만, 그렇지 않은 사람들은 마우스로 클릭/드래그를 하는 등의 행동을 했다. 그래서 마우스 드래그를 지원하도록 수정했다.

카톡으로 공유하다보니 모바일로 하는 사람도 많았다. 다행히 2048 게임 자체가 터치까지 지원하고 있었다.

재밌는 기능과 버그 발견은 환영합니다! 구현까지 해주시면 더 감사합니다!
저장소에서 기여하기! : https://joonas-yoon.github.io/rubik-s-race/

 

---

+Updated. 2020. 03. 25.

찾아보니 우연히 보았던 짤 속 게임의 이름은 "Rubik's Race" 였다.

총 25개의 칸 중, 하나의 빈칸과 6가지의 색상이 4개씩 총 24개의 색깔칸으로 이루어지는 규칙이 있었다.
Git repo와 주소를 모두 변경하고, 규칙에 맞도록 게임을 수정하였다.

개발 단계에서 N*N 크기의 grid도 가능하도록 개발해서 순조로웠다. \(n^2 - 1 = (n-1)(n+1)\) 이므로 \(n+1\)개의 색상이 \(n-1\)개씩 있도록 구성하면 되었다.