Castmorrow

프로젝트 소개

배를 타고 여울·암초·먼바다를 탐험하며 물고기 도감을 채우는 웹 낚시 게임입니다. 항구에서 시간과 채비를 고르고 출조해 물고기를 낚습니다. 조과는 도감과 추억 수첩에 기록되며 배를 꾸밀 수 있습니다.

주요 작업

1. 01

   낚시 조작과 물고기 힘겨루기

   마우스를 낚싯대처럼 움직여 캐스팅하고 챔질하도록 구현했습니다. 물고기가 걸린 뒤에는 릴을 감으며 텐션을 조절합니다.

   • ·마우스를 누른 시간, 위로 휘두른 속도와 놓는 위치를 조합해 캐스팅을 처리하고, 물 표면을 기준으로 거리와 방향을 계산했습니다.
   • ·어종별로 짧은 저항, 바닥 버티기, 연속 돌진과 탈진 패턴을 구성했습니다.
   • ·휠로 릴을 감고 물고기의 저항 반대 방향으로 낚싯대를 움직여 텐션을 낮추도록 구현했습니다.
2. 02

   항해 상태와 저장·복원

   항구 선택부터 항해, 낚시와 출조 종료까지 게임 상태를 나누고 상태에 맞게 입력을 처리했습니다.

   • ·월드 좌표와 배의 속도·관성, 해안·암초 충돌, 해역 발견과 빠른 이동을 구현했습니다. 정박 중에는 이동 입력과 관성을 차단했습니다.
   • ·출조 기록, 도감, 배 꾸미기와 조작 감도를 localStorage에 저장하고, 복원할 때 좌표·어종 ID·결과 배열·캐스팅 횟수 등을 검사했습니다.
   • ·같은 날짜와 포인트에서 같은 바다와 물고기 추첨 결과가 나오도록 구성했습니다.
3. 03

   픽셀 3D 렌더링과 모바일 입력

   Three.js의 저분할 모델과 낮은 내부 렌더 해상도로 픽셀 스타일 장면을 구성했습니다.

   • ·flatShading과 nearest 필터를 적용하고, 디더링·팔레트 스냅·깊이 기반 외곽선으로 색면을 정리했습니다.
   • ·GLSL로 파도와 하늘을 표현하고 시간대에 따라 하늘·수평선·바다의 팔레트를 바꿨습니다.
   • ·모바일에서는 왼쪽 스틱으로 배를 움직이고 터치 스와이프로 캐스팅·챔질, 릴 버튼으로 감기를 처리했습니다. 세로·가로 화면의 HUD와 safe area도 대응했습니다.

그 외 작업

• 캐릭터·배·물고기와 물결을 코드로 구성하고 Web Audio API로 효과음을 만들었습니다.
• 캐스팅·힘겨루기·항해·충돌·저장·터치 입력을 자동 테스트 48개로 검증했습니다. Chromium 데스크톱과 모바일 에뮬레이션에서 플레이 흐름도 확인했습니다.
• 로딩 화면, SEO와 GA4 이벤트를 구성하고 Vercel에 배포했습니다.