🐍 스네이크 게임 (정보 수업용)
중학교 정보 수업에서 학생들이 직접 플레이하는 PC·스마트폰 웹 기반 스네이크 게임입니다.
한 판이 끝나면 학번·성명·점수가 Firebase Firestore에 저장되고,
대시보드에서 우리 반 전체의 순위를 실시간으로 확인할 수 있습니다.
정보 수업용 스네이크 게임 PRD(v1.0) 기반 구현
주요 기능
- 시작 화면: 학번(숫자 5자리 = 학년1+반2+번호2, 예:
10130)·성명 입력, 유효성 검사
- 게임: 20×15 격자 보드, 방향키/WASD 조작, 반대 방향 즉시 전환 금지
- 사과·점수: 빈 칸 랜덤 생성, 먹으면 몸 1칸 성장 + 점수 +1
- 충돌/게임오버: 벽·자기 몸 충돌 처리
- 기록 저장: 게임 오버 시 Firestore에 학번·성명·점수·시각 저장
- 다시 하기: 같은 학생 정보로 재시작
- 사운드 on/off (WebAudio 합성, 외부 파일 불필요)
- 속도 증가: 점수가 오를수록 뱀 이동 속도 상승
- 일시정지: 스페이스바
- 실시간 대시보드:
bestScore 내림차순 순위표, 내 행 하이라이트, 반별 필터, 1~3위 메달
파일 구조
.
├─ index.html # 시작 / 게임 / 게임오버 화면
├─ dashboard.html # 실시간 순위 대시보드
├─ css/style.css
├─ js/
│ ├─ game.js # 게임 엔진(이동·충돌·렌더링, 순수 로직)
│ ├─ main.js # 화면 전환 / 입력 / 저장 오케스트레이션
│ ├─ db.js # Firestore 연동(players / scores)
│ ├─ dashboard.js # 대시보드 실시간 구독
│ ├─ sound.js # 효과음(WebAudio)
│ └─ firebase-config.js # Firebase 프로젝트 설정 (채워 넣어야 함)
├─ firestore.rules # 보안 규칙 예시
└─ firebase.json # Firebase Hosting + Firestore 설정
실행 방법 (로컬)
ES 모듈을 사용하므로 file://로 직접 열면 동작하지 않습니다. 간단한 정적 서버로 실행하세요.
# Python
python3 -m http.server 8080
# 또는 Node
npx serve .
브라우저에서 http://localhost:8080 접속.
Firebase를 설정하지 않아도 게임은 로컬로 동작합니다(기록 저장/대시보드만 비활성화).
Firebase 연동
- Firebase 콘솔에서 프로젝트 생성
- Firestore Database 활성화
- 프로젝트 설정 → 웹 앱 등록 → SDK 설정값 복사
js/firebase-config.js의 firebaseConfig 값을 교체- (권장)
firestore.rules를 배포:
npm install -g firebase-tools
firebase login
firebase deploy --only firestore:rules
Firestore 데이터 구조
players/{학번} — 학생별 최고 기록 1건
| 필드 | 타입 | 설명 |
|---|
studentId | string | 학번, 숫자 5자리 (예: 10130) |
name | string | 성명 |
className | string | 반 (예: 1-1), 대시보드 필터용 |
bestScore | number | 개인 최고 점수 |
playCount | number | 플레이 횟수 |
updatedAt | timestamp | 최고 기록 갱신 시각 |
scores/{자동ID} — 모든 플레이 로그(보조)
최고 기록 갱신은 트랜잭션으로 처리하여, 현재 점수가 기존 bestScore보다 높을 때만
bestScore/updatedAt을 갱신하고 playCount는 매판 +1 합니다.
배포 (Firebase Hosting)
firebase deploy --only hosting
또는 Vercel 등 정적 호스팅에 그대로 올려도 됩니다.
개인정보·보안
- 최소 수집: 학번·성명·점수만 수집 (생년월일·연락처 등 금지)
- 목적 제한: 수업 내 순위 확인 용도, 학기/차시 종료 후 교사가 초기화
- 공개 범위: 링크 비공개 공유 또는 인증으로 같은 수업 학생·교사만 접근
- 운영 시 점수 상한(10000) 검증 + 가능하면 Anonymous Auth 추가 권장
조작
PC (키보드)
| 키 | 동작 |
|---|
| 방향키 / WASD | 상하좌우 이동 |
| 스페이스바 | 일시정지 / 재개 |
스마트폰 (터치)
| 조작 | 동작 |
|---|
| 보드 위 스와이프 | 스와이프 방향으로 이동 |
| 화면 하단 방향 패드(▲◀▶▼) | 상하좌우 이동 |
| 가운데 ⏸ 버튼 | 일시정지 / 재개 |
방향 패드는 터치 기기 또는 좁은 화면(≤640px)에서 자동으로 나타납니다.
