🎮 Code of Legends (WP-5)

전설의 기사여, 모험을 떠나라!

웹 프로그래밍 지식을 테스트하는 교육용 브릭브레이커 게임입니다.

🎯 게임 소개

HTML, CSS, JavaScript, jQuery에 대한 퀴즈를 해결하며 전설의 장비를 모으는 액션 퍼즐 게임입니다.

🏆 수집 가능한 전설의 장비

• 전설의 검 (Stage 1) - HTML & CSS 마스터
• 전설의 갑옷 (Stage 2) - JavaScript 마스터
• 전설의 용 (Stage 3) - jQuery 마스터

🚀 실행 방법

1. 개발 환경 설정

# 의존성 설치
npm install

# 개발 서버 실행 (자동 새로고침)
npm run dev

# 또는 기본 서버 실행
npm start

2. 직접 실행

브라우저에서 index.html 파일을 직접 열어서 실행할 수 있습니다.

🎮 게임 조작법

• 마우스: 패들 조작
• 클릭: 메뉴 및 퀴즈 선택

🛠️ 기술 스택

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• 라이브러리: jQuery 3.6.0
• 게임 엔진: HTML5 Canvas API
• 오디오: Web Audio API
• 개발 도구: Node.js, Live Server

📁 프로젝트 구조

WP-5/
├── index.html          # 메인 HTML 파일
├── script.js           # 게임 로직
├── style.css           # 스타일시트
├── img/                # 이미지 리소스
├── sound/              # 사운드 파일
│   ├── 배경음악/       # BGM 파일들
│   └── 효과음/         # 효과음 파일들
├── package.json        # Node.js 설정
└── README.md          # 프로젝트 문서

🎵 사운드 시스템

배경음악

• 선택 가능한 2가지 BGM
• 마왕 조우 테마
• 엔딩 테마

효과음

• 벽돌 충돌음 (일반/퀴즈 구분)
• 공 튕기는 소리
• 퀴즈 정답/오답 사운드
• UI 클릭음

🎓 교육 콘텐츠

Stage 1: HTML & CSS 기초

• HTML 태그와 구조
• CSS 스타일링과 속성

Stage 2: JavaScript 핵심

• 변수와 함수 선언
• DOM 조작
• 이벤트 처리

Stage 3: jQuery 활용

• 셀렉터와 메서드
• 이벤트 핸들링
• AJAX 기초

🏃‍♂️ 사용 가능한 스크립트

npm start          # 개발 서버 시작
npm run dev        # 파일 변경 감지하는 개발 서버
npm run serve      # HTTP 서버로 실행
npm run build      # 프로젝트 빌드 준비

👥 팀 정보

Team WP-5 - 웹 프로그래밍 팀 프로젝트

📄 라이선스

ISC License

---

즐거운 코딩 학습 되세요! 🎉