SMASH YSC

용인예술과학대학교를 3D로 부수는 브라우저 게임입니다. 시험 기간 스트레스 해소용입니다.

학교와 관계없는 비공식 팬 게임입니다.

바로 하기: https://hong-iron.github.io/SMASH-YSC/

하는 법

• 건물을 누르면 고른 도구로 부숩니다. 떨어진 조각을 또 누르면 더 잘게 부서집니다.
• 도구는 여섯 가지입니다. 숫자 키 1~6으로도 바꿀 수 있습니다.
  • 폭탄: 넓게 날려 버리고, 땅에 떨어지면 구덩이를 팝니다.
  • 야구 배트: 거대한 배트로 쳐서 덩어리를 멀리 날립니다. 도구판 아래 막대로 크기를 ×0.5~×3(길이 약 18~110 m)으로 바꿀 수 있고, 클수록 한 번에 많이 날립니다. 70 m 넘게 날아가면 홈런 보너스를 받습니다.
  • 레이저: 화면을 끌어 선을 그으면 하늘이 어두워지며 충전한 뒤, 세 겹의 굵은 빔이 그 선을 훑습니다. 지나가는 곳마다 연쇄 폭발이 일어나고 양옆 건물이 튕겨 날아가며, 땅에는 녹아 빛나는 홈이 남습니다. 톡 누르면 한 점만 태웁니다.
  • 운석: 카메라가 떨어지는 운석을 따라가고, 부딪힌 곳에 큰 구덩이가 생깁니다.
  • 지진: 누른 곳이 진원이 되어 3초 동안 흔들립니다. 도구판 아래 막대로 규모 4.010.0을 고를 수 있습니다(옆에 진앙의 대략적인 진도도 보여 줍니다). 규모 45는 땅만 흔들리고, 6~7은 건물 일부가 떨어지고, 8 이상은 땅이 출렁이며 건물이 통째로 주저앉고 캠퍼스 전체가 무너집니다.
  • 핵폭탄: 카메라가 떨어지는 핵폭탄을 따라가다가, 터지는 순간 느린 화면과 섬광, 거대한 버섯구름이 나옵니다. 반경 380 m 안이 통째로 날아가고 깊은 구덩이가 생깁니다.
  • 운석과 핵폭탄 연출 중에 화면을 누르거나 Esc를 누르면 건너뜁니다.
• 부술 때마다 스타일 랭크가 D → C → B → A → S → SS → SSS로 오르고 점수가 쌓입니다.
  • 도구를 바꿔 가며 빠르게 부수면 배율이 붙습니다. 같은 도구만 계속 쓰면 깎입니다.
  • 공중에 뜬 조각을 치면 공중 콤보, 건물 하나를 다 무너뜨리면 붕괴 보너스를 받습니다.
  • 휴대폰에서는 한 손가락으로 끌어 화면을 옮기고, 두 손가락으로 돌리거나 확대합니다. 레이저를 고르면 한 손가락 끌기가 레이저 선 긋기로 바뀝니다.
  • 잠시 손을 놓으면 랭크가 서서히 내려갑니다.
• 땅을 계속 파면 흙 → 지각 → 맨틀 → 외핵 → 내핵을 지나 지구 중심까지 내려갑니다. 화면 아래 깊이 표시는 실제 깊이(km)로 바꿔 보여 줍니다.
• 되돌리기(Ctrl+Z, Mac은 ⌘Z)는 한 단계씩, 전부 복구는 처음 상태로 돌아갑니다. 되돌릴 때는 날아간 조각이 거꾸로 날아와 제자리에 박히고 판 땅도 다시 메워지는 되감기 장면이 나옵니다.
• 공유 버튼을 누르면 지금 화면에 점수, 최고 랭크, 파괴율, 무너진 건물 수를 얹은 결과 카드 이미지를 만듭니다. 카카오톡·인스타그램 버튼을 누르면 휴대폰에서는 공유 목록이 열려 바로 보낼 수 있고, 컴퓨터에서는 카드 이미지를 저장하고 링크를 복사해 줍니다. config.json의 kakaoKey에 카카오 개발자 JavaScript 키를 넣으면 카카오톡은 카드와 '나도 부수러 가기' 버튼이 달린 메시지로 보내집니다.
• 밤 버튼(또는 N 키)을 누르면 밤 모드가 됩니다. 별과 달이 뜨고 창문과 가로등에 불이 켜지며, 폭발과 레이저가 밤하늘을 밝힙니다.
• 다른 학교는 왼쪽 위 제목 옆 다른 학교 버튼이나 SMASH 대학교에서 고를 수 있습니다.
• 화면 조작: 끌기는 돌리기, 오른쪽 끌기는 옮기기, 휠은 확대입니다.

학교 랭킹과 방문 통계

• 게임에서 얻은 점수는 3분마다(페이지를 떠날 때는 바로) 학교 점수로 모이고, 화면 오른쪽 위 점수 아래에 우리 학교의 오늘 전국 순위와 바로 윗 순위까지 남은 점수가 나옵니다. 전체 순위는 SMASH 대학교에서 볼 수 있습니다. 오늘 순위는 매일 자정(한국 시간)에 새로 시작합니다.
• 랭킹 서버(Supabase)에는 학교 코드, 점수, 무너뜨린 건물 수만 보냅니다. 이름이나 기기 정보는 보내지 않습니다. 너무 자주 보내는 것을 막으려고 IP 주소를 날짜와 섞은 해시로 바꿔 2분 동안만 둡니다.
• 방문 수는 쿠키를 쓰지 않는 GoatCounter로 셉니다. 공유·응원·다른 학교 버튼을 누른 횟수도 함께 셉니다.

개발자 응원하기

재미있게 하셨다면 커피 한 잔으로 응원해 주세요.

• 카카오페이: https://qr.kakaopay.com/FKcOJKyOy1f405462
• Buy Me a Coffee (해외 카드): https://buymeacoffee.com/hongiron

데이터와 출처

• 캠퍼스 경계, 건물 모양과 층수, 도로, 녹지: © OpenStreetMap 기여자 (ODbL). data/campus.json도 ODbL을 따릅니다.
• 땅 높이: AWS Terrain Tiles (Mapzen terrarium 형식, SRTM 30 m 기반).
• 학교 건물 윤곽·층수·높이, 학교용지 경계, 지붕 색: 국토교통부 디지털트윈국토(브이월드) 건물통합정보·연속지적도·항공영상, 공공누리 제1유형(출처표시). 지붕 색은 항공영상에서 건물마다 잰 대표색 값만 쓰고, 영상 자체는 쓰지 않습니다.
• 건물 11동 가운데 3동은 OpenStreetMap에 없어 브이월드 건물통합정보에서 더했습니다. 층수는 9동이 OpenStreetMap이나 건물통합정보에 적힌 값이고, 나머지는 넓이로 어림했습니다. 지붕 색은 10동을 항공영상에서 쟀습니다. 지도 자료에는 있지만 이 학교 건물이 아니거나 항공사진에 없는 건물 5동은 항공사진과 학교 안내 자료로 확인해 뺐습니다.
• 건물 색: 8동은 학교 공식 캠퍼스맵·건물 안내 사진과 위키미디어 공용 사진을 보고 벽·유리·창틀 색만 골랐습니다(사진 자체는 쓰지 않습니다). 창문, 벽돌, 유리 무늬는 코드로 그린 일반 재질입니다.

만든 방법

• 같은 방식으로 만든 다른 학교는 SMASH 대학교에서 볼 수 있습니다.
• 3D는 three.js r160(CDN), 소리는 Web Audio로 합성합니다. 소리 파일은 없습니다.
• 학교 이름, 주소, 미리보기 문구는 config.json에 있습니다. 사진을 보고 고른 건물별 색(look: 벽·지붕·유리·창틀 색, 창 간격, 경사 지붕 여부)과 건축물대장 조회용 지번(parcels)도 config.json에 넣을 수 있습니다.
• 랭킹 서버 주소와 공개 키(supabaseUrl, supabaseKey), 방문 통계 주소(goatcounter)도 config.json에 있습니다. 랭킹 서버의 표와 함수는 SMASH 저장소의 supabase/에 있습니다.
• 페이지 만들기: src/app.html + data/campus.json + config.json → python3 tools/assemble.py → site/index.html
• 건물 겉모습은 코드가 OpenStreetMap 윤곽과 이름으로 자동으로 꾸밉니다. 지붕은 항공영상에서 잰 색을 쓰고(못 잰 건물은 회색·흰색 위주에 초록 방수 도장이 다섯에 하나꼴), 경사 지붕은 사진으로 확인해 config.json의 look에 hip: true로 적은 건물에만 얹습니다. 1층은 화강석 기둥과 유리이고, 가장 가까운 도로 쪽 벽에 유리문과 차양이 붙습니다. 창은 벽 안으로 들어가 보이도록 그늘과 굴곡을 넣습니다. 기숙사·연구동·도서관은 이름을 보고 창 모양을 고릅니다.
• 바닥은 도로와 건물 둘레만 포장하고 나머지 빈 땅은 잔디로 칠합니다. 학교 밖 땅은 학교와 건물 둘레 26 m까지만 남깁니다.
• PC에서는 구석 음영(N8AO, CDN)을 켭니다. N8AO가 불러오는 postprocessing 라이브러리는 쓰지 않아서 site/pp-stub.js 한 줄로 대신합니다. 주소 끝에 ?ao=0/?ao=1을 붙이면 끄고 켜고, ?fps를 붙이면 화면 위에 프레임 수가 나옵니다.
• 화면이 멈춰 있으면 1초에 한 번만 다시 그리고, 그림자는 건물이나 조각이 움직일 때만 다시 계산합니다.
• 미리보기 그림: site/og.png(1200×630, 공유 미리보기)를 새로 찍으면 tools/make_card.py로 site/card.webp(SMASH 대학교 카드용, 600×315)도 다시 만듭니다.
• 데이터 다시 만들기 (numpy, matplotlib 필요):
  1. python3 tools/fetch.py way 1013701109 raw
  2. python3 tools/build_campus.py raw raw/campus_raw.json
  3. python3 tools/add_trees.py raw/campus_raw.json data/campus.json
  4. python3 tools/fix_terrain.py data/campus.json — 땅 높이 정리: 높이 자료의 빈칸(음수 값)을 메우고, 높은 건물이 언덕처럼 찍힌 자국을 지우고, 호수와 연못을 평평한 수면으로 맞춥니다.
  5. (선택) python3 tools/floors.py — 국토교통부 건축물대장(공공데이터포털 건축HUB 건축물대장정보 서비스)에서 층수와 높이를 받아 이름이 맞는 건물에 넣습니다. config.json의 parcels(시군구 코드, 법정동 코드, 번, 지)가 있어야 합니다. 키는 저장소 맨 위 .env에 DATA_GO_KR_KEY=...로 넣고, .env와 받은 data/floors.json은 git에 올리지 않습니다. 이름으로 못 맞춘 건물은 의 에 직접 적습니다.