Keyzzle

Keyzzle는 6글자 단어 세종대학교 개발 동아리 GREEDY를 맞히는 게임입니다. 정답을 맞출 때까지 도전할 수 있으며, 게임 진행 시간에 따른 점수를 획득할 수 있습니다.

---

🎮 게임 특징

• ✅ 정답 단어: GREEDY (고정)
• ⏱ 실시간 타이머로 플레이 시간 표시
• 🔠 6글자 입력 블록 (원형 UI)
• 🎨 정답 여부에 따라 색상 피드백 (초록/노랑)
• ⌨️ 가상 키보드 UI로 랜덤 키보드 값 확인 가능
• 🔁 정답을 맞출 때까지 무한히 시도 가능
• ⌨️ 키보드의 입력은 랜덤!! 어떤 Key가 G, R, E, D, Y를 입력할 수 있는지 찾아야 합니다!

---

🎯 게임 규칙

1. 게임 시작 전 4자리 고유 번호를 입력해야 합니다.
2. 게임이 시작되면 1.5초 동안 모든 랜덤 키보드가 표시됩니다.
3. 키를 누르고 있는 동안 매핑된 랜덤 값이 키보드에 출력됩니다.
4. 정답 글자와 입력 글자의 값과 일치하면 정답 글자가 초록색으로 표시됩니다.
5. 정답 글자와 입력 글자의 위치만 다른 경우에는 노란색으로 표시됩니다.
6. 정답을 맞추면 클리어 시간이 기록되며, 짧을수록 높은 순위를 기록합니다.

---

🎮 게임 조작

• A to Z 키를 눌러 입력할 수 있습니다.
• Backspace 키를 눌러 입력한 값을 모두 지울 수 있습니다.
• Enter 키를 눌러 게임을 시작할 수 있습니다.

---

🛠 사용 기술

• React (Create React App)
• JavaScript
• CSS

---

🚀 시작하기

1. 환경 요구사항

• Node.js 16.0.0 이상
• npm 7.0.0 이상

2. 프로젝트 클론

git clone https://github.com/gxuoo/keyzzle.git

3. 폴더로 이동

cd keyzzle

4. 의존성 설치

npm install

5. 환경 변수 설정

프로젝트 루트 디렉토리에 .env 파일을 생성하고 다음 내용을 추가합니다:

REACT_APP_API_BASE_URL=your_base_url_here
REACT_APP_TOKEN=your_api_token_here

6. 개발 서버 실행

npm start

개발 서버가 실행되면 자동으로 브라우저가 열리고 http://localhost:3000에서 게임을 플레이할 수 있습니다.

⚠️ 주의사항

• API 토큰은 반드시 .env 파일에 설정해야 합니다.
• .env 파일은 절대로 Git에 커밋하지 마세요.
• 게임을 실행하기 전에 모든 의존성이 올바르게 설치되었는지 확인하세요.