[simsim-arcade 팀 프로젝트]
1. 과일 슬라이서 게임 신규 추가
가장 먼저 카드 3에 해당하는 과일 슬라이서(Fruit Slicer) 게임을 새롭게 추가했다.
과일 슬라이서는 기존의 추억의 플래시 게임 느낌을 살리면서 마우스나 터치로 과일을 베어 점수를 획득하는 아케이드 방식의 게임이다.
주요 게임 구성
- Canvas API 기반으로 게임 화면 구현
- 사과, 바나나, 수박, 오렌지, 코코넛, 키위 등 과일 구현
- 폭탄 오브젝트 추가
- 마우스 드래그 및 터치 스와이프를 이용한 칼날 구현
- 칼날 이동 경로에 잔상이 남는 효과 적용
- 과일을 베었을 때 실제 절단 방향에 맞춰 2조각으로 분리
- 과일이 회전하면서 낙하하는 물리 효과 구현
- 과일 절단 시 과즙 파티클 효과 추가
- 폭탄을 베었을 경우 화면 흔들림 및 플래시 효과 적용
- 폭발 파티클과 슬로모션 연출 추가
- 폭탄 절단 시 즉시 게임 오버
- 목숨 3개 시스템 적용
- 시간과 점수에 따라 게임 난이도 상승
- 게임 오버 후 이름을 입력해 점수 등록
- 서버 API를 이용한 게임별 랭킹 등록
- 게임 내부 TOP 5 랭킹 모달 제공
특히 과일은 별도의 이미지 파일을 사용하는 방식이 아니라 Canvas에서 직접 그리는 방식으로 구현하여 게임 내부에서 과일의 움직임과 그래픽을 자연스럽게 처리할 수 있도록 구성했다.
또한 과일을 베었을 때 단순히 이미지가 사라지는 방식이 아니라 절단 방향에 따라 두 조각으로 나뉘도록 구현해 아케이드 게임 특유의 타격감을 높였다.
2. 검 스킨 및 퀘스트 시스템 추가
게임을 반복해서 플레이할 수 있도록 검 스킨과 퀘스트 시스템을 추가했다.
게임을 플레이하면서 특정 조건을 달성하면 새로운 검을 해금할 수 있도록 구성했으며, 해금 정보는 localStorage에 저장되도록 구현했다.
기본 검 퀘스트
| 조건 | 보상 |
|---|---|
| 누적 과일 50개 슬라이스 | 화염 검 |
| 한 번의 스와이프로 과일 3개 베기 | 네온 사이버 |
| 최고 점수 500점 달성 | 사쿠라 블레이드 |
| 누적 콤보 20회 | 황금의 칼날 |
이를 통해 단순히 점수를 높이는 것뿐만 아니라 여러 가지 플레이 목표를 제공하도록 게임 구조를 확장했다.
3. 전설 등급 검 5종 및 피버 타임 추가
기본 검 시스템을 확장하여 전설 등급 검 5종을 추가했다.
각 검은 단순히 이미지나 이름만 변경되는 것이 아니라 전용 이펙트를 가지고 있어 검을 해금하는 재미를 강화했다.
전설 검
| 퀘스트 | 보상 | 특징 |
|---|---|---|
| 누적 과일 500개 | 서리 여왕의 검 | 얼음빛 궤적, 눈꽃 결정, 서리 안개 |
| 한 스와이프에 5개 | 뇌신의 검 | 번개 가지, 전격 스파크 |
| 한 콤보에 7개 | 공허의 검 | 보랏빛 광채, 공허 구체 |
| 최고 점수 2000점 | 프리즘 블레이드 | 무지개 궤적, 결정 조각 |
| 피버 타임 3회 | 갤럭시 세이버 | 성운 구름, 별무리 |
전설 등급 검은 선택 화면에서 금빛 테두리와 전설 배지를 사용해 일반 검과 구분되도록 했다.
또한 기존 저장 데이터와의 호환성을 고려하여 새로운 기록값을 추가하는 방식으로 기존에 해금했던 검이 사라지지 않도록 구성했다.
4. 딸기 및 피버 타임 시스템 추가
과일 종류에 딸기를 새롭게 추가했다.
딸기 역시 Canvas를 이용해 직접 그렸으며, 외형뿐만 아니라 씨와 꼭지, 잎 그리고 잘렸을 때 보이는 내부 단면까지 구현했다.
피버 타임
게임의 핵심 플레이 요소 중 하나로 피버 타임 시스템을 추가했다.
콤보가 20에 도달하면 피버 타임이 발동하며, 피버 상태에서는 게임의 진행 속도와 연출이 크게 달라진다.
피버 타임 효과
- 10초 동안 피버 상태 유지
- 과일 점수 2배
- 칼날 판정 범위 확대
- 과일이 빠르게 등장하는 과일 러시
- 피버 중 놓친 과일에 대한 목숨 보호
- 폭탄도 안전하게 베기 가능
- 폭탄을 베면 추가 점수 획득
- 무지개 테두리 연출
- 회전하는 빛줄기 배경
- 칼날 무지개 광채
- 콤보 진행도 및 남은 시간을 표시하는 피버 게이지
단순히 점수 배율만 높이는 방식이 아니라 화면 전체의 분위기와 게임 플레이 방식이 달라지도록 구성했다.
5. 콤보 시스템을 연속 베기 방식으로 개선
기존 콤보 판정 방식을 개선했다.
기존에는 일정 시간 안에 여러 개의 과일을 베는 방식이었다면, 이번 업데이트에서는 과일을 놓치지 않고 연속으로 베어낸 개수를 기준으로 콤보를 계산하도록 변경했다.
새로운 콤보 방식
- 과일 1개 베기 → +1 콤보
- 동시에 과일 2개 베기 → +2 콤보
- 동시에 과일 3개 베기 → +3 콤보
- 과일을 놓치면 콤보 초기화
- 기존 콤보가 5 이상이었다면
COMBO BREAK표시 - 화면 상단에 현재 콤보 표시
- 콤보가 높아질수록 시각적인 강조 효과 증가
또한 콤보 10, 20, 30 등 특정 구간에 도달하면 추가 보너스 점수를 지급하도록 변경했다.
이 변경을 통해 빠르게 여러 과일을 베는 것보다 실수하지 않고 연속으로 플레이하는 것 자체가 중요한 게임 구조로 개선했다.
6. 과일과 폭탄 스폰 겹침 문제 개선
아케이드 게임의 플레이성을 떨어뜨릴 수 있었던 오브젝트 스폰 겹침 문제도 개선했다.
기존에는 여러 과일이나 폭탄이 비슷한 위치와 궤적으로 등장할 가능성이 있었기 때문에 플레이 과정에서 오브젝트가 겹치는 문제가 발생할 수 있었다.
이를 해결하기 위해 새로운 스폰 궤적 선택 로직을 적용했다.
스폰 개선 방식
- 새로운 과일이나 폭탄을 발사할 때 최대 16개의 후보 궤적 생성
- 현재 화면에서 날아가고 있는 오브젝트와 후보 궤적 비교
- 기존 오브젝트와 가장 충분한 거리를 확보하는 궤적 선택
- 폭탄과 과일 사이에는 더 넓은 안전 거리 적용
- 과일끼리도 최소 간격 확보
- 시간에 따른 위치를 샘플링하여 비행 경로 전체의 최소 거리 계산
이를 통해 단순히 생성 위치만 비교하는 것이 아니라 앞으로 이동할 궤적까지 고려해서 스폰 위치를 결정하도록 개선했다.
7. 피버 시스템과 콤보 시스템 연동
콤보 시스템 변경에 맞춰 피버 타임의 발동 조건도 함께 조정했다.
새로운 기준에서는 콤보 20 달성을 기준으로 피버 타임이 발동한다.
또한 기존 퀘스트도 새로운 콤보 시스템에 맞춰 수정했다.
변경된 퀘스트
- 황금의 칼날 → 콤보 20 달성
- 공허의 검 → 콤보 60 달성
그리고 콤보 기록을 별도의 maxCombo 값으로 관리하도록 변경했다.
기존에 해금한 검은 유지하면서 새로운 콤보 기록만 새롭게 계산할 수 있도록 처리했다.
8. 에픽 등급 검 5종 추가
전설 검에 이어 에픽 등급 검 5종도 추가했다.
전체 검 시스템을 일반 → 에픽 → 전설의 3단계로 확장했다.
에픽 검
| 퀘스트 | 보상 | 이펙트 |
|---|---|---|
| 누적 과일 200개 | 질풍의 검 | 바람 줄기, 나뭇잎 |
| 한 스와이프에 4개 | 파도의 검 | 물방울, 물보라 |
| 콤보 40 달성 | 독사의 검 | 독방울, 독액 |
| 최고 점수 1000점 | 자수정 검 | 보랏빛 결정 |
| 피버 타임 1회 | 진홍 월광검 | 초승달 검기, 붉은 스파크 |
선택 화면에서는 보랏빛 테두리와 에픽 배지를 사용하여 전설 등급과 구분했다.
현재 과일 슬라이서의 검은 총 15종으로 확장되었다.
- 일반 검 5종
- 에픽 검 5종
- 전설 검 5종
게임을 반복해서 플레이할수록 새로운 검을 수집하고 해금할 수 있도록 성장 요소를 강화했다.
9. 게임 설정 시스템 추가
게임 화면 우측 상단에 톱니바퀴 형태의 설정 버튼을 추가했다.
일시정지
게임 중 설정 버튼을 누르면 게임이 일시정지된다.
일시정지 상태에서는
- 과일 움직임
- 피버 타임
- 배경음악
등의 진행이 함께 정지된다.
계속하기 버튼을 이용해 게임을 다시 진행할 수 있으며, 키보드의 Esc 키를 이용한 일시정지도 지원한다.
또한 다른 탭이나 창으로 이동했을 때 자동으로 일시정지되도록 처리했다.
10. Web Audio 기반 사운드 시스템 추가
별도의 오디오 파일을 사용하는 방식 대신 Web Audio API를 이용해 효과음과 배경음악을 직접 합성하는 구조를 적용했다.
사운드 설정
- 전체 사운드 ON/OFF
- 효과음 볼륨 조절
- 배경음악 볼륨 조절
- 게임 효과음
- 게임 진행에 따른 사운드 연출
이렇게 구성하여 별도의 오디오 파일을 추가하지 않고도 게임에 필요한 사운드 시스템을 구현했다.
11. 게임 밝기 조절 기능 추가
게임 설정에 밝기 조절 기능도 추가했다.
세로 슬라이더 형태로 구현하여 밝기를 직접 조절할 수 있도록 했다.
지원 입력
- 마우스
- 터치
- 키보드
밝기 값은 설정값으로 저장되며, 게임을 다시 실행하더라도 기존 설정을 유지할 수 있도록 localStorage를 사용했다.
잘못된 값이 저장된 경우에는 기본 설정값으로 복구되도록 처리했다.
12. 다시 시작 / 홈 이동 안정성 개선
게임 설정에서
- 다시 시작
- 홈으로 이동
기능도 추가했다.
게임 진행 중 실수로 버튼을 눌러 현재 게임이 사라지는 것을 방지하기 위해 확인 단계를 추가했다.
또한 진행 중인 게임이 정상적으로 종료되지 않은 상태에서 홈으로 이동하는 경우 결과창이 잘못 표시되지 않도록 처리했다.
일시정지 상태에서 누르고 있던 마우스나 터치 입력이 계속 유지되는 문제도 함께 보완했다.
13. 모바일 화면 HUD 개선
모바일 세로 화면처럼 공간이 좁은 환경에서는 기존 HUD 요소가 서로 겹칠 수 있었기 때문에 화면 배치를 다시 조정했다.
특히
- 설정 버튼
- 목숨 표시
- 피버 게이지
가 서로 겹치지 않도록 배치를 수정했다.
이를 통해 PC뿐만 아니라 모바일 환경에서도 게임 화면을 보다 안정적으로 사용할 수 있도록 개선했다.
14. 과일 슬라이서 난이도 조정
기존 게임의 난이도가 빠르게 상승하는 문제를 개선했다.
기존에는 시간과 점수를 기준으로 난이도를 별도로 증가시키는 방식이었다면, 업데이트 후에는 시간과 점수를 평균적으로 반영하는 방식으로 변경했다.
난이도 완화
기존보다
- 과일 스폰 속도 완화
- 동시에 등장하는 과일 수 감소
- 폭탄 등장 확률 감소
- 최고 난이도 진입 속도 완화
- 피버 러시 강도 완화
등을 적용했다.
최고 난이도에서도 기존보다 여유 있는 플레이가 가능하도록 스폰 간격과 동시 등장 수, 폭탄 확률의 상한을 조정했다.
이를 통해 게임이 너무 빠르게 어려워지는 문제를 줄이고, 플레이어가 콤보와 피버 시스템을 충분히 활용할 수 있도록 했다.
15. 게임 썸네일을 실제 게임 화면과 통일
마지막으로 메인 화면에서 사용하는 과일 슬라이서 썸네일을 게임 내부 그래픽과 동일한 스타일로 변경했다.
기존 썸네일과 실제 게임의 과일 그래픽 사이에 차이가 있었기 때문에 게임 내부 Canvas에서 사용하는 그래픽 표현 방식을 SVG 썸네일에 맞춰 다시 제작했다.
썸네일 구성
- 수박
- 오렌지
- 사과
를 게임 내부 과일과 동일한 스타일로 표현했다.
특히 단순히 비슷한 이미지를 사용하는 것이 아니라 게임의 Canvas 렌더링 방식에 맞춰
- 과일 형태
- 그라데이션
- 좌표 비율
- 고정 시드 기반 무늬
- 하이라이트
- 과일 단면
- 수박 줄무늬
- 오렌지 껍질 점 무늬
- 사과 꼭지와 잎
등을 SVG로 옮겼다.
배경 역시 게임 내부의 도마 디자인을 기반으로
- 나뭇결
- 판자 틈
- 비네트 효과
등을 적용해 실제 게임과 썸네일 사이의 시각적인 통일성을 높였다.
16. 문제 조회 API에 category 필터 추가
게임 쪽 업데이트와 함께 백엔드 공통 API도 개선했다.
기존 문제 조회 API는 특정 게임의 문제를 랜덤으로 가져오는 방식이었다.
이번 업데이트에서는 다음과 같이 category 파라미터를 추가했다.
GET /api/games/:gameId/questions?limit=5&category=동물이제 특정 장르 또는 분류를 지정하여 해당 카테고리에 속하는 문제만 랜덤으로 가져올 수 있다.
동작 방식
category를 입력하면
quiz_item.meta.category
값과 일치하는 문제만 조회한다.
반대로 category를 입력하지 않으면 기존과 동일하게 게임 전체 문제에서 랜덤으로 문제를 가져온다.
17. category 입력값 검증 및 안전한 조회 처리
단순히 API 파라미터만 추가한 것이 아니라 서버에서 입력값 검증도 함께 적용했다.
검증 기준
category는 선택값
최소 1자
최대 30자
조건을 만족하지 않으면 공통 에러 형식으로 400 응답
또한 SQL 조건에 값을 직접 삽입하지 않고 바인딩 파라미터를 사용하도록 처리해 SQL Injection 공격 가능성도 방지했다.
즉,
json_extract(meta, '$.category') = ?
형태로 처리하여 안전하게 카테고리를 검색하도록 구현했다.
18. 공통 API 구조까지 확장 가능하도록 구현
이번 category 필터는 특정 게임만을 위한 기능이 아니라 gameId 기반의 범용 문제 조회 API에 적용했다.
따라서 앞으로 새로운 퀴즈 게임이 추가되더라도 meta.category 구조를 사용하면 동일한 API를 활용할 수 있다.
현재 프로젝트는 게임별 기능을 각각 독립적으로 구성하면서도 공통 API와 DB 구조를 공유하는 형태이기 때문에, 이러한 방식으로 공통 기능을 확장하면 새로운 게임이 추가될 때 중복 개발을 줄일 수 있다.
