추적 (pt1)
2024년 10월 첫 프로젝트 작업물로 방탈출 웹게임이다.
개인 프로젝트로 약 일주일의 시간동안 작업하였다.
기획 스토리
처음 진행하는 프로젝트에서 일반적인 웹 페이지가 아닌 웹 게임을 제작하여 JS에 더 익숙해지고, 다양한 기능을 사용해보고자 하였다.
스토리 개요
미술관에서 발생한 살인 사건에 대하여 현장 조사를 진행하며, 단서를 수집하여 범인을 추적한다.
사용 기술 & API
JavaScript, HTML, CSS, GoogleMap API
Main.
- 마우스 hover에 대하여 효과음, 애니메이션 부여
- 분위기 형성을 위한 타이틀 fadeout 적용
- CRUD에 대한 학습 이전으로 유사 CRUD 기능 구현
Section1.
- 게임 진행을 위한 스토리 프롤로그
- 리플레이 버튼을 통해 프롤로그 첫화면으로 돌아가기 기능 구현
Section2.
- 이미지 위에 투명한 div 생성 후, 클릭 이벤트 발생
- 단서를 메모하고 조합하여 답안 검증 후 다음 Section 이동
Section3.
- 구글 맵 기반 단서 수집 후, 범인 신상 확보 이벤트 발생
Section4.
- 토글에 대한 검증 이벤트
- 클릭에 대한 애니메이션 기능 & 랜덤 문구 출력
- 다음 챕터로 이동 이벤트 발생
이 될 사람