원반을 회전시켜 원반에 표시된 길을 목적지까지 하나로 잇는 게임. 게임 화면 구성, 플레이 시간 기록, 스테이지 조작, 클리어 판정 등 주요 핵심 기능들을 모두 JavaScript 및 jQuery로 구현했다.
- Back-end 및 빌드 도구
- Java 8
- Spring Framework 3.1.1
- Maven 4.0.0
- Front-end
- HTML5(JSP 2.1), CSS3, JavaScript(ECMAScript6), jQuery(3.6.0)
- Database
- Oracle Database(11g Release2 Express edition)
- MyBatis(3.5.7)
- 메인 페이지
- 메뉴 버튼을 표시하고, 사용자가 선택한 언어 설정값을 세션에 저장하여 화면을 동적으로 표시한다.
- 게임 방법 페이지
- 게임 방법을 소개한다.
- 게임 시작 페이지
- START 버튼을 클릭하면 자바스크립트를 통해 게임 요소를 동적으로 생성, 화면에 표시하고 플레이 시간을 기록한다.
- 상하좌우 버튼을 이용해서 조작할 원반을 선택하고 회전시킬 수 있다.
- 모든 길을 맞춰 현재 스테이지를 클리어하면 다음 스테이지로 이동할 수 있는 버튼을 표시한다.
- 랭킹 보기 페이지
- 클리어 스테이지 수, 클리어 시간 순으로 상위 10명의 기록을 표시한다.
- 스테이지 구조
- 1개의 원반은 4개의 검은색 길 모양이 그려져 있으며, 1개의 길은 좌우 한쌍의 길 조각으로 구성된다. 따라서, 1개의 원반은 8개의 길 조각으로 구성된다.
- 각각의 길 조각 모양에 따라 고유의 정수 값을 부여한다. ( ┗┓ 1 2 // ┏┛ 3 4 // ┗┛ 5 6 // ┏┓ 7 8 // ┃ 9 )
- 원반에 표시된 길 조각 모양에 따라, 각각의 길 조각 값을 12시 방향부터 시계 방향 순서로 배열에 저장한다.
- 예1)
이 원반은 [1, 2, 5, 6, 3, 4, 7, 8]로 표현된다. - 예2)
이 원반은 [4, 7, 8, 1, 2, 5, 6, 3]으로 표현된다.
- 예1)
- 가장 중심의 목표 지점 원반까지 총 5개의 배열을 차례대로 구성한다.
- 원반 조작
- 상하 버튼을 클릭하거나 키보드의 상하 화살표키를 입력하면, 커서 이미지를 알맞게 바꾸고 현재 선택 중인 원반의 번호 값을 증가/감소시킨다.
- 좌우 버튼을 클릭하거나 키보드의 좌우 화살표키를 입력하면, 원반 이미지를 방향에 맞게 회전시키고 해당 배열의 값을 회전한 만큼 한 칸씩 재설정한다.
- 예) [1, 2, 5, 6, 3, 4, 7, 8] =(반시계 회전)> [2, 5, 6, 3, 4, 7, 8, 1]
- 원반이 아직 회전 중일 때는 추가로 조작을 입력받아도 무시하도록 설정한다.
- 클리어 판정
- 일종의 커서를 사용한다. 커서는 다음의 3개의 변수로 구성된다.
- 현재 선택 중인 원반의 번호
- 원반의 12시 방향부터 해서 몇 번째의 길을 선택하고 있는지 나타내는 값
- 판정 진행 방향
- 가장 바깥쪽 원반의 12시 방향 길 조각부터 시작해서, 길 조각 값을 이용하여 커서를 이동시킨다.
- 원반의 회전이 발생할 때마다 클리어 판정 함수를 재귀적으로 실행해서 클리어 여부를 판정한다.
- 커서가 가장 안쪽 원반의 목표 길까지 도달하면 해당 스테이지를 클리어한 것으로 판정한다.
- 일종의 커서를 사용한다. 커서는 다음의 3개의 변수로 구성된다.
- 모든 이미지는 직접 제작함.
- 조작 시 재생되는 사운드는 오픈 소스를 사용함.