지진에서 살아남기
와석초등학교 학생용 지진 안전교육 인터랙티브 게임 (태블릿용).
나른한 5교시에 지진이 나고, 우리 반 교실에서 운동장까지 대피하며 다친 친구를 돕는 이야기예요.
"지진해일에서 살아남기"(v1.3.0)와 같은 엔진을 쓰고, 3D 대피 미니게임을 더했어요.
빌드 과정이 없는 정적 사이트라서 Vercel에서 Framework Preset을 "Other"로 두고 그대로 배포하면 돼요.
파일 구성
| 파일 | 하는 일 |
|---|
index.html | 화면 모양 (미니게임 화면 포함) |
engine.js | 게임 엔진: 대본 실행, 하트·세이브, 뒤로/건너뛰기/다시, 소리, 랭킹 |
story.js | 이야기: 등장인물, 카드뉴스, 안전수칙, 대본 |
quake3d.js | 3장 3D 대피 미니게임 |
school.js | 학교 건물 배치와 반별 공식 대피로 (tools/build_school.py가 만들어요) |
school.src.js | school.js의 원본 (대피로 표는 여기서 고쳐요) |
img/ | 배경 그림, img/face/ 인물 얼굴 |
supabase/schema.sql | 랭킹 표 |
3D 대피 미니게임
- 시작 화면에서 고른 학년·반의 교실에서 출발해, 학교 공식 대피 계단까지 1인칭으로 걸어가요.
- 계단도 직접 걸어서 한 층씩 내려가요 (예: 5층 교실이면 5→4→3→2층, 2층에서 1층 계단을 거의 다 내려오면 끝).
- 여진이 오면 3초 안에 '머리 보호!' 버튼(키보드: 스페이스)을 누르면 감점이 없어요. 조이스틱을 누르고 있어도 다른 손가락으로 누를 수 있어요.
- 건물 배치는 와석초 3D 배치도의
data/rooms.json과 같아요.
- 반별 대피로는 2026학년도 교실배치도(안)의 빨간 화살표를 옮겨
school.src.js의 put(...) 줄에 적어 두었어요.
- 실수(창문 가까이, 떨어진 물건 밟기, 승강기, 흔들릴 때 머리 보호 안 함, 계단 뛰기)는 하트 대신 50점씩 깎고, 모두 합쳐 최대 200점까지만 깎아요.
- 1층 교실(1-6, 1-7)은 계단 없이 별관 출구까지 가고, 4장도 복도에서 일어나요.
교실 배치가 바뀌면
- 3D 배치도 저장소의 새
data/rooms.json을 받아요.
python tools/build_school.py <rooms.json 경로> 로 school.js를 다시 만들어요.- 대피로가 바뀌었으면
school.src.js의 put('중앙', '6-1 6-2 …') 줄을 고친 뒤 2번을 다시 해요.
랭킹 보드 (Supabase)
지진해일 게임과 같은 Supabase를 써요. 게임별로 game 칸(earthquake)으로 나뉘어요.
이 게임을 처음 올릴 때 한 번: Supabase 대시보드 → SQL Editor → supabase/schema.sql 전체를 붙여 넣고 Run.
3D 감점을 저장하는 mini 칸과 새 점수 규칙이 들어가요. (지진해일 게임 기록은 그대로예요)
점수 = 기본 1000 + 남은 하트×200 − 틀린 횟수×100 − 힌트×50 − 3D 대피 감점 (최고 1600점)
배경 그림
스토리보드 문서의 프롬프트로 만든 AI 배경 14장이 모두 들어 있어요. 바꾸고 싶으면 같은 이름의 jpg로 바꾸면 돼요.
버전 기록
v1.2.0
- 배경 음악 4곡을 새로 만들어 모두 7곡이 됐어요: lazy(나른한 교실 왈츠), alarm(대피·큰 여진), relief(운동장 자장가), brave(구급대 행진곡).
- 장면마다 음악을 다시 붙였어요: 1장·2주 뒤 lazy, 3장·6장 여진 alarm, 운동장 relief, 구급차 brave.
v1.1.0
- 3D 미니게임: 계단을 직접 걸어서 한 층씩 내려가요. 층마다 장면이 바뀌고 계단참에 'N층' 표지판이 있어요.
- 머리 보호 버튼 고침: 조이스틱을 누른 채로 여진이 오면 바로 실패하던 문제를 고쳤어요. 3초 안에 누르면 감점 없음 (실제 시계 기준, 버튼에 3·2·1 표시).
- 계단 옆·끝에 난간을 세워 계단참으로만 내려갈 수 있어요. 떨어진 물건은 복도 너비에 맞춰 놓고, 초록 화살표는 그것을 피해 가요.
v1.0.1
- AI 배경 그림 14장(구급차, 1층 복도 포함)을 모두 넣고, 그림에 맞게 반짝임·먼지·바람 움직임을 맞췄어요.
v1.0.0
- 첫 버전: 1~8장 이야기, 3D 대피 미니게임(반별 출발, 공식 대피로), 행정안전부 지진 국민행동요령 카드, 랭킹(3D 감점 포함).
- 엔진에 더한 것: 미니게임 단계
MINI, 상태에 따라 나오는 선택지 when, 교실·운동장 배경 소리.
