주어진 색상 선택지를 합성하여 제시된 정답 색상을 맞추는 게임.
- Back-end
- Python 3.9.5
- Flask 2.0.2
- Front-end
- HTML5, CSS3, JavaScript(ECMAScript6)
- jQuery 3.6.0
- Bootstrap 5.1.3
- Framework
- Phaser 3.55.2
- 메인 페이지
- 게임 화면으로 이동할 수 있다.
- 게임 방법을 모달 형태로 확인할 수 있다.
- 게임 화면
- 화면 상단에 정답 색상을 표시한다.
- 화면 좌, 우측에 색상 선택지를 표시한다.
- 화면 가운데에 색을 칠할 수 있는 바탕 이미지를 표시한다.
- 위/아래 화살표 키를 사용해서 색칠할 바탕을 지정할 수 있다.
- 왼쪽/오른쪽 화살표 키를 사용해서 왼쪽/오른쪽 색상 선택지를 회전시킬 수 있다.
- 선택된 바탕에 대해, 해당 바탕에 이미 칠해진 색상과 왼쪽/오른쪽 선택지의 색상을 합성했을 때의 예상 색상을 번갈아가며 표시한다.
- 스페이스 키를 사용해서 왼쪽/오른쪽 선택지의 색상을 합성하고 지정된 바탕에 적용한다.
- 모든 바탕의 색상을 정답 색상과 동일하게 색칠하면 게임 클리어 메시지를 표시한다.
- 색상 데이터 생성
- 임의의 정답 색상 데이터 3개를 생성한다.
- 각각의 색상 데이터는 [0, 255] 범위의 rgb 값으로 구성한다.
- 정답 색상 데이터를 기반으로 선택지 색상 데이터 6개를 생성한다.
- 정답 색상 데이터 1개를 선택한다.
- 임의의 차이 값을 생성한다. 단, 차이 값은 선택된 정답 색상 데이터에서 더하거나 뺐을 때 [0, 255] 범위 이내의 값으로 되도록 한다.
- 하나의 선택지 색상 데이터는 정답 색상 데이터에서 차이 값을 빼고, 나머지 하나의 선택지 색상 데이터는 정답 색상 데이터에서 차이 값을 더한다.
- 이를 통해 지정된 두 색상의 rgb 값의 평균이 정답 데이터와 일치하도록 구성한다.
- 나머지 정답 색상 데이터들에게도 똑같은 방식을 적용하여 선택지 색상 데이터를 생성한다.
- 생성된 정답 및 선택지 색상 데이터를 배열에 저장하고 순서를 임의로 섞는다.
- 임의의 정답 색상 데이터 3개를 생성한다.
- 색상 설정
- 게임 화면을 로딩할 때, 색상 데이터가 저장된 배열을 읽어서 정답 이미지 및 왼쪽/오른쪽 선택지 이미지들을 배정된 색상으로 모두 초기화한다.
- 위/아래 화살표 키를 입력하면 색칠할 바탕을 지정할 수 있다. 기존에 지정된 바탕에 대한 커서를 비활성화하고 새로 지정된 바탕에 대한 커서를 활성화한다.
- 왼쪽/오른쪽 화살표 키를 입력하면 왼쪽/오른쪽 팔레트를 회전시킬 수 있다. 화면에 표시된 왼쪽/오른쪽 팔레트의 색상을 이용해서 합성된 색상 값을 계산하고 커서에 적용한다.
- 스페이스 키를 입력하면 커서에 적용된 색상을 지정된 바탕에 적용한다.
- 클리어 판정
- 선택지 회전이 발생할 때마다, 정답 색상과 바탕 색상이 일치하는지 하나씩 검사한다.
- 검사를 모두 통과하면 모달 창을 통해 게임 클리어 메시지를 표시한다.