← GHMUN.COM
미니게임 · 제작기

Block Yard

Block Yard는 다른 ghmun 프로젝트들과 결이 다르다. 데이터도, 지도도, 퀴즈 문항도 없다. Three.js 하나로 88×28×88칸짜리 복셀 세계를 만들고, 마우스로 블록을 부수고 쌓게 만든 인터랙티브 랜딩 페이지다. HTML 파일 하나, 빌드 과정도 없다. 출처 대조할 공시도 없고 검증할 좌표도 없어서 편할 줄 알았다. 반은 맞았다.

원래는 44칸이었다

처음 세계는 44×28×44칸이었다. 한 바퀴 걸어서 도는 데 오래 안 걸린다. 그래서 가로세로를 두 배로 늘려 88칸으로 만들었다. 높이 28칸은 그대로다. 땅 넓이로 치면 네 배가 됐는데, 그만큼 안개가 끼기 시작하는 거리도 같이 밀어줘야 했다. 안 그러면 넓어진 땅이 안개에 가려서 넓어진 티가 안 난다. 코드 한 줄로 끝날 줄 알았던 작업이 안개 거리까지 딸려 왔다.

지형은 매번 같은 시드로 생성된다

서버에 저장된 맵은 없다. 페이지를 열 때마다 고정된 시드값(20260902)으로 지형을 그 자리에서 계산한다. 잔디·흙·돌 레이어에 나무 몇 그루를 심는 식이다. 블록 종류는 잔디·흙·돌·통나무·나뭇잎·판자·모래·유리·조명 9가지다. 대신 내가 부수고 쌓은 것은 이 브라우저에 저장된다. 다음에 들어와도 쌓아둔 탑이 그대로 있고, 없애고 싶으면 첫 화면의 "지형 초기화"를 누르면 시드 지형으로 돌아간다.

게임이 아니라 첫 화면용으로 만들었다

첫 화면 카드에는 "SHEET 01"이라는 번호와 함께 "첫 페이지를 직접 쌓아 보세요"라는 제목이 붙어 있다. 원래 게임으로 기획한 게 아니라, 어느 사이트든 첫 화면에 걸어둘 수 있는 랜딩 페이지로 만든 것이라 그렇다. 점수도 목표도 없다. 걷는 속도는 초당 5.2칸, Shift로 달리면 8.4칸, 비행 모드는 11칸이다. 유리 블록은 반투명이라 뒤가 비쳐 보이고, 조명 블록은 노란 바탕에 흰 점 네 개가 박힌 무늬다. 이름은 조명인데 실제로 주변을 비추지는 않는다. 기기가 다크 모드면 하늘도 저녁색으로 바뀐다. 블록 무늬 아홉 가지는 이미지 파일 없이 코드로 한 칸씩 그렸다. 이미지 파일을 하나도 안 쓰니 경로가 깨질 일도 없었는데, 이 장점은 나중에 이사할 때 알게 됐다.

한글 입력기가 켜져 있으면 못 움직였다

이건 내 잘못이다. 키 입력을 e.key 값으로 판정했는데, 한글 입력기가 켜진 상태에서 W를 누르면 e.key에 'w'가 아니라 'ㅈ'가 들어온다. 그래서 한국어 자판을 쓰는 사람은 WASD를 아무리 눌러도 제자리에 서 있었다. 에러도 안 난다. 그냥 조용히 안 움직인다. 한국어 사이트에서 한국어 자판을 고려 안 했다는 게 좀 민망하다. 키 문자 대신 물리적인 키 위치를 주는 e.code로 판정을 전부 바꿨다. WASD, 스페이스, Shift, F, Esc, 숫자 1~9까지 다.

block.ghmun.com은 없어졌다

처음엔 block.ghmun.com이라는 서브도메인에 따로 떠 있었다. 나중에 냥이 찾기·블룸 스도쿠·KBO 덕력이 play.ghmun.com 아래에 모이면서, 이것도 같이 play.ghmun.com/block으로 옮겼다. 옛 서브도메인은 리다이렉트 없이 지웠고, 따로 있던 저장소와 배포 프로젝트도 삭제했다. 다른 세 개는 Vite로 빌드해야 하는데 이건 파일 하나라서, 빌드 스크립트에 "빌드 없이 폴더만 복사"하는 옵션을 따로 넣었다.

아직 ghmun 옷을 안 입었다

코드 맨 위에 SITE라는 설정 객체가 따로 빠져 있어서, 워드마크와 상단 메뉴 문구만 바꾸면 다른 사이트에도 쓸 수 있게 짜여 있다. 근데 지금은 "Block Yard"라는 이름과 아무 링크도 안 걸린 "소개 / 작업 / 기록 / 연락" 메뉴가 그대로 남아 있다. ghmun.com으로 돌아가는 링크는 아직 없다.

사용법

첫 화면에서 "들어가기"를 누르면 마우스 커서가 화면에 잠기면서 조작이 시작된다. W·A·S·D로 이동하고 Shift를 누르면 달린다. 스페이스는 점프, F는 비행 모드다. 왼쪽 클릭으로 블록을 부수고 오른쪽 클릭으로 쌓으며, 쌓을 블록은 숫자 1~9나 마우스 휠로 고른다. Esc를 누르면 첫 화면으로 돌아온다. 휴대폰에서는 왼쪽 가상 스틱으로 움직이고 오른쪽 놓기·부수기·점프 버튼을 쓴다.

Block Yard 실제로 써보기 play.ghmun.com/block 가기 →