🐤 출동! 동물 특공대 - FRONTENDBOOTCAMP-13th/JS-07-7zzang-Arcade GitHub Wiki

1. 프로젝트 설계

📌 프로젝트 개요

귀여운 동물 캐릭터가 좌우로 이동하며 하늘에서 떨어지는 장애물을 피하는 게임으로, 점수가 오를수록 난이도가 증가하는 방식입니다.

🧑‍💻예상 개발 난이도

🟡보통

🎮 기능 개요

• 캐릭터 이동 시스템 → 좌우 이동 (방향키)
• 장애물 등장 시스템 → 일정 패턴으로 떨어지는 장애물 생성
• 점수 시스템 → 점수가 오를수록 장애물 속도 증가
• 일정 점수마다 캐릭터 진화 및 배경 전환 연출로 성취감 제공

🛠 기술 스택

기술	설명
HTML	게임 UI 구성
CSS	픽셀 스타일 디자인 적용
TypeScript	게임 로직 및 점수 시스템 구현

⚡ 추가 기능 및 확장성

• 캐릭터 진화 시스템 → 일정 점수 도달 시 모습 변화
• 난이도 선택 → 쉬움/보통/어려움 모드 제공

---

2. 작업 계획

날짜	작업 내용 (기본 난이도 버전)	상위 버전 기능 (여유 시 도전)	리소스 / 비고
5/12 (월)	- 프로젝트 구조 세팅 및 기획 정리- 게임 구조 흐름 / 레이아웃 설계		index.html, style.css, script.js 기본 구성
5/13 (화)	- 배경 이미지 삽입- 병아리 캐릭터 배치- 좌우 이동 기능 구현	캐릭터 선택 기능 (병아리 → 토끼/개구리)	캐릭터 이미지(PNG), 이동 범위 제한 포함
5/14 (수)	장애물 생성 (랜덤 위치/속도 조절)	다양한 패턴의 장애물 추가 (빠른 장애물, 연속 떨어짐 등)	도토리, 나뭇잎 등 장애물 이미지, 랜덤 위치/속도
5/15 (목)	충돌 판정 + 게임 오버 로직 처리	부딪힘 시 애니메이션 / 무적 아이템 추가
5/16 (금)	- 점수 시스템 / 생존 시간 측정- 배경 스크롤 구현	배경 테마 전환 (낮→저녁→밤)	시간 경과 → 점수 증가, 점수 localStorage 포함, position-X 조정
5/17 (토)	- 캐릭터 진화 시스템 (조건 분기, 이미지 교체, 진화 상태 관리)- 시작/종료 UI 화면 정리 (스타트 버튼 등)	시작 시 캐릭터 선택 화면 구성	진화 이미지 추가(1~2장)버튼 디자인, 폰트 적용, UI 전환 처리
5/18 (일)	디버깅 / 리팩토링- UI 세부 조정- 진화 알림 연출 추가- 이미지 경로 확인- 불필요 코드 제거- 시작/재시작 상태 전환 시 깔끔하게 초기화 되는지 확인- 최고 점수 (localStorage) 갱신 로직 테스트		- “진화했습니다!” 텍스트 표시 연출- 충돌 판정, 점수 누락, 게임 오버 조건 등 전반 확인- 변수 네이밍, 중복 함수 제거, 이벤트 분리- 시작/종료 화면 정렬, 버튼 위치, 텍스트 가독성 조정- 로컬/배포 환경에서 잘 불러오는지 경로 점검 (배포 환경은 21일 테스트 가능)- 테스트 임시 로직 제거
5/19-20 (월, 화)	배경 BGM, 효과음 추가(게임 오버)+ 리소스 정리	효과음 on/off 설정, BGM 추가	8bit 사운드

---

3. 캐릭터 디자인 컨셉

스타일	요소
기본 병아리	노란 동글 캐릭터, 당근모자 or 도토리백 메고 있음
픽셀풍 병아리	눈은 검은 점, 깡총깡총 뛰는 2프레임 애니메이션
의상 아이디어	꽃모자 / 곰돌이 모자 / 파자마 등 (성장형 아이템)
이펙트	점프 시 ‘삐약!’ 텍스트 효과 / 무적 시 반짝반짝 효과

---

4. 기본 레이아웃 구조

┌─────────────────────────────┐
│ 출동! 동물특공대       🏆 최고 기록: 38초 │ ← 헤더
├─────────────────────────────┤
│                             │
│          🐤                 │ ← 캐릭터 (좌우 이동)
│       🌑      💥       🌟     │ ← 장애물(떨어지는 중)
│                             │
│                             │
├─────────────────────────────┤
│ ⌨ 조작: ← → 이동 / Esc: 종료 │ ← 푸터
└─────────────────────────────┘

• 상단: 타이틀 + 최고 기록 표시
• 중단: 플레이 영역 (캐릭터는 하단 고정, 장애물은 위에서 아래로)
• 하단: 조작 안내

5. UI 설계