한 번에 두 미로

프롬프트

AI가 읽는 제작 지시문입니다. 맨 위 [바꿀 곳]의 값을 바꿔 붙여 넣어도 됩니다.

완성된 HTML 파일 하나의 원문만 답하세요. 설명과 코드 울타리는 붙이지 마세요. 코드를 실행하지 말고 아래 조건에 맞는 HTML 소스만 작성하세요. 파일을 읽거나 쓰고 검색하거나 다른 도구를 호출하지 마세요. 이 답변 지시는 작품 화면에 표시하지 마세요.

[핵심 아이디어]
한 번의 방향 입력으로 두 말을 움직여 서로 다른 도착점에 보냅니다.

[바꿀 곳]
제목: 한 번에 두 미로
부제: 같은 한 걸음, 다른 두 길
강조 색: #B47758

[크기]
창 전체에 맞추는 화면. 1440×900에서는 넓고 정돈된 배치, 390×844에서는 넉넉한 세로 배치입니다. 폭 350~390·높이 460~520인 작은 프레임에서도 글씨와 조작부가 잘리지 않도록 높이에 맞춰 여백·도형·조작부를 함께 줄이거나 재배치합니다. 스크롤은 없습니다.
주요 형상은 화면 폭의 65% 이상으로 크게 보입니다. 첫 화면부터 작품이 충분히 보이고 첫 1초 안에 분명히 움직입니다. 글씨와 형상 사이에 여백을 두고 모든 한글이 잘리지 않게 합니다. 시스템 글꼴의 굵기와 크기 차이로 차분한 타이포를 만듭니다.

[장면]
고정된 5×5 미로 두 개를 그립니다. A의 다섯 행은 '.....', '.##..', '...#.', '.#...', '.....'입니다. B는 '.....', '..##.', '.#...', '...#.', '.....'입니다. 점은 빈칸, #은 벽입니다. 좌표는 왼쪽 위 (0,0). A 시작 (0,0)·목표 (4,4), B 시작 (4,0)·목표 (0,4)입니다. 두 말은 같은 화살표 입력을 받지만 각자의 벽과 경계에 막히면 그 말만 정지합니다. 목표에 도달한 말도 다음 입력으로 움직일 수 있습니다. 두 말이 동시에 목표 좌표에 있어야 완료입니다. 입력 한 번에 정확히 한 칸 이동하고 키 반복과 단추도 같은 함수를 사용합니다.
창 전체를 채우는 배경 캔버스는 따로 두고 pointer-events:none으로 둡니다. 아래 공통 구현의 전체 화면 캔버스 지시는 이 배경에 적용하며, 두 게임판은 각각 정사각형 크기를 유지합니다. 미로 각각은 별도 canvas[data-board][tabindex="0"]로, 문서 순서는 A와 B입니다. 캔버스 전체가 정확히 5×5 격자이며 바깥 여백은 캔버스 밖에 둡니다. A 말은 불투명 #B47758, B 말은 불투명 #647B68 원으로, 반지름은 칸 크기의 36%입니다. 벽은 차가운 회색 #B7C0C4, 빈칸은 거의 흰 회색 #F4F6F7, 목표는 굵기3px의 먹색 고리입니다. 두 말의 색은 유지하되 두 말에는 각각 작은 흰 점 하나·둘을 넣어 색만으로 구별하지 않아도 됩니다. 점들은 중앙의 아주 작은 영역만 차지하고 원의 대부분은 불투명 원래 색입니다. 폰390×844에서는 두 미로와 제목·시간·상태·방향 단추·처음으로·자동 재생·소리 단추 전부가 한 화면 안에 들어와야 합니다. 높이를 감으로 더하지 말고 화면을 머리 영역 / 남은 공간의 두 미로 / 상태와 모든 조작부의 세 구획으로 나눕니다. 전체 높이는 100dvh(미지원이면 실제 innerHeight)이며 바깥 위아래 안전 여백을 각각 최소12px, 좌우16px 확보합니다. CSS grid의 가운데 행은 minmax(0,1fr), 머리와 조작부는 실제 높이를 차지하게 하고 모든 flex/grid 자식은 min-height:0으로 둡니다. 제목·안내가 줄바꿈된 실제 높이와 조작부의 전체 높이를 먼저 빼고, 남은 가운데 영역의 높이에서 두 판 사이 간격까지 뺀 값의 절반을 판 한 변의 최대값으로 사용합니다. 390×844에서 각 판 한 변은 약220~240px이면 충분하며 예전280px 최소 높이를 강제하지 않습니다. 두 판을 세로로 쌓되 보드 이름은 판 바깥 간격 안에 놓고 그 높이도 계산합니다. 화면 높이가700px 미만이면 두 판을 나란히 줄여 전체 조작부 공간을 먼저 보장합니다. 방향 단추는 최소44px 누름 영역의 한 줄 네 칸으로 놓아 세 줄 십자 배치의 불필요한 높이를 없앱니다. #status와 다음 판 단추의52px 구획은 항상 예약하며 완료 때도 조작부가 화면 아래로 밀리지 않습니다. 조작부를 overflow:hidden으로 가려 맞추거나 화면 밖에 두지 않습니다. 판 크기는 사용 가능한 공간에서 계산한 하나의 값으로 CSS 크기와 캔버스 해상도에 함께 적용하며, 캔버스 기본300×150 크기가 배치를 밀지 않게 합니다. 최초 렌더·창 회전·크기 변경마다 같은 계산을 하고 실제 모든 단추의 아랫변이 화면 높이-12px 안쪽에 남게 합니다. 데스크톱은 한 변 480~520px인 두 미로를 나란히 크게 배치합니다. 말의 중심은 입력한 칸으로 바로 이동하고 잔상이나 고리만 짧게 움직입니다.
[놀이의 흐름]
처음부터 잘 보이는 안내는 ‘두 말을 함께 도착점으로 · 한 판 3분’입니다. 제한 시간은 180초이고 직접 플레이를 시작하기 전에는 줄지 않습니다. #status에 짧은 안내를 보이고 두 말이 실제 목표에 도달했을 때만 ‘완료’를 표시합니다. 이동 수는 사용자가 누른 방향 입력만 셉니다. 자동 시연·상태 복원·시간 경과가 이동 수를 늘려서는 안 됩니다.
첫 화면에서만 자동 시연으로 0.25초에 D, 0.65초에 U를 움직여 ‘같이 움직이되 각자 벽에 막힌다’는 규칙을 보여 줍니다. 그 다음에는 시작 자리에서 짧은 고리 잔상만 반복합니다. 시연에서 정답 경로나 도착점을 향한 긴 행진은 절대 보여 주지 않습니다. #demo-toggle은 글자 ‘자동 재생’만 넣은 단추이고 aria-pressed=true/false로 상태를 표시합니다. 멈춤 아이콘과 상태 글자를 섞지 않습니다. 시연을 끄면 두 말은 시작점, 이동 수0, 남은 시간180초인 내 판을 즉시 준비합니다. 첫 직접 방향 입력은 그 방향을 놓치지 않고 한 번 처리합니다.
#reset의 글자는 ‘처음으로’. 어느 상태에서 눌러도 현재 판의 시작점·이동 수0·남은 시간180초로 돌아가며 자동 재생은 반드시 꺼진 상태입니다. 리셋 직후 시간은 첫 방향을 넣기 전까지 줄지 않습니다. 초기화 함수와 자동 재생 시작 함수는 분리합니다.
총3판입니다. 1판은 앞에서 지정한 정확한 두 미로·시작점·도착점, 2판은 양쪽 미로·시작점·도착점을 모두 가로 반사(x→4-x), 3판은 1판을 모두 세로 반사(y→4-y)해 풀 수 있는 판을 보장합니다. 화면에 ‘1 / 3’처럼 현재 판을 표시합니다. 완료 때 두 말과 목표는 계속 보인 채 두 판 바깥 테두리가 크게 환해지고, 바깥 여백으로 작은 종이 조각이 1초 동안 퍼집니다. #status에는 눈에 띄는 크기의 ‘두 길 모두 완료!’와 이동 수가 나옵니다. 게임판 위를 가리는 팝업·덮개·체크 표시는 쓰지 않습니다. 완료 즉시 큰 ‘다음 판’ 단추가 나타나 다음 판을 시연 없이 시작합니다. 마지막 판은 ‘첫 판부터’ 단추를 줍니다. 완료 뒤 방향 입력도 다음 판의 첫 이동으로 처리하며 입력을 잠그지 않습니다.
화면의 방향 단추에는 data-dir="R", "D", "L", "U"를 각각 달고 접근 가능한 한국어 이름, 최소44px 누름 영역을 줍니다. 터치와 클릭 모두 같은 이동 함수를 사용합니다. 폰에서는 게임판에서 상하좌우 쓸어 넘기기로도 이동합니다. 한 손가락의 시작점과 끝점 차이 중 큰 축을 골라24px 넘으면 정확히1칸 이동하고, 탭·방향 단추와 중복 이동하지 않습니다. 터치 기기 안내는 ‘쓸어 넘기거나 아래 화살표를 누르세요’, 키보드 기기에서만 ‘방향키로 두 말을 움직이세요’를 보여 줍니다. 소리는 초기 무음이며 음소거 단추에는 키 이름을 쓰지 않습니다.

[색과 배치]
바탕은 안개 같은 차가운 회색 #E4E7E8, 먹색 #30383C, 게임판은 #F4F6F7입니다. 크림·갈색 종이 배경과 세이지 장식은 쓰지 않습니다. 색은 두 말에만 작은 점처럼 쓰며 전체 화면의10% 이내입니다. PC에서는 맨 위 한 줄에 왼쪽 제목, 가운데 짧은 규칙, 오른쪽 시간·이동 수를 정렬하고 아래에 두 큰 정사각 미로를 나란히 둡니다. 폰은 제목과 판 번호를 한 줄에, 그 아래 작고 읽기 쉬운 규칙·시간을 두고 세로 미로 두 개와 방향 단추를 꽉 차게 배치합니다. 큰 가운데 제목·작은 가운데 부제 틀은 쓰지 않습니다. 첫3초에 두 말의 짧은 동시 움직임과 목표의 선명한 고리로 바로 손을 대고 싶게 만듭니다. 모든 장식은 판의 읽기를 돕고 글자와 겹치지 않습니다.

[구현]
- HTML 파일 하나로 만든다. 바깥 파일·글꼴·라이브러리·네트워크 요청을 쓰지 않는다(미리보기 칸에서 막힌다).
- 첫 <script> 맨 앞에 CONFIG 객체를 두고 [바꿀 곳]의 값과 이 글에 나온 숫자(속도·크기·색·시간)를 이름 붙여 모은다.
- 게임 진행은 requestAnimationFrame 의 타임스탬프로 고정 시간 간격(1/120초) 갱신을 돌린다. 한 프레임에 밀린 시간은 0.1초까지만 따라잡는다. setTimeout·setInterval·CSS 애니메이션으로 움직이지 않는다.
- 난수는 시드 고정 난수(mulberry32 등)만 쓰고, 판마다 시드를 하나씩 늘린다. Math.random 은 쓰지 않는다.
- 캔버스는 늘 창 전체 크기다. 창 크기가 바뀌면 다시 맞추고, 게임판 비율이 정해진 게임은 판을 가운데 두되 남는 곳에도 배경을 그린다(빈 띠를 두지 않는다). 스크롤이 생기지 않게 한다. devicePixelRatio 는 2 까지만 선명도에 반영한다.
- 키보드와 터치를 둘 다 받는다. 키 입력은 window 의 keydown·keyup 으로 받아, 화면을 먼저 누르지 않아도 첫 키가 먹게 한다. 짧게 눌렀다 뗀 키도 놓치지 않게 keydown 때 처리하거나 기록해 둔다. 터치는 페이지 스크롤·확대가 일어나지 않게 막는다(touch-action: none).
- 점수·상태를 window.__game = { state, score } 에 두고 매 프레임 갱신한다. state 는 'demo'(자동 재생)·'play'·'over' 셋 중 하나, score 는 숫자다.
- 열리자마자 'demo' — 규칙만 짧게 보여 주는 자동 재생와 「눌러서 시작」 안내. 첫 키 입력이나 탭이면 새 판 'play'. 판이 끝나면 'over' 화면, 거기서 키 입력이나 탭이면 새 판. 'over' 화면은 뜨자마자 키 입력·탭을 받는다(입력을 막는 대기 시간을 두지 않는다). 끝나는 연출이 있으면 그동안은 state 를 'play' 로 두고, 연출이 끝나 입력을 받을 수 있게 된 때 'over' 로 바꾼다.
- 첫 직접 방향 입력부터180초가 지나면 시간 종료로 판이 끝난다. 시작 전에는 충분한 시간을 미리 안내하고 기다리는 동안 시간이 줄지 않는다.
- 브라우저 저장소(localStorage·sessionStorage·IndexedDB·쿠키)를 쓰지 않는다 — 미리보기 칸에서 막혀 오류가 난다. 최고 점수는 메모리에만 둔다.
- 소리는 WebAudio 로 합성한 소리만, 첫 입력 뒤에만 낸다. 화면 구석에 소리 끄기 단추(M 키도)를 둔다.
- 탭이 숨으면 멈추고 돌아오면 이어서 한다.
- 글자는 시스템 글꼴만 쓴다: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif.
- 모든 함수·상수를 먼저 정의하고, 시작(초기화와 첫 requestAnimationFrame)은 스크립트 맨 끝에서 한 번만 부른다.
- 콘솔에 오류가 나지 않게 한다. 스스로 대조하는 표는 console.table, 어긋남은 console.warn 으로만 낸다.

[하지 말 것]
실존 인물·사진·개인 이름, 사람 캐릭터·막대 인간, 남청색·검푸른색·고채도 바탕, 외부 글꼴·이미지·오디오, 시작 전 빈 화면, 스크롤, 잘린 글자, 타이머 기반 애니메이션은 넣지 마세요.

ChatGPT에서 사용

1. 새 대화에 위 프롬프트 전체를 붙여 넣습니다.
2. 완성된 HTML 파일을 받아 PC 브라우저로 엽니다. 코드로 나오면 전체를 UTF-8 result.html로 저장해 엽니다.
3. 대화 안에 미리보기가 있으면 그 자리에서 볼 수 있습니다. 지원 여부는 앱과 버전에 따라 다릅니다.

이 작품은 ChatGPT에서 직접 돌려 보지는 않았습니다. 모델과 추론 강도 선택 화면도 확인하지 않았습니다. 폰에서는 미리보기가 없으면 PC에서 파일을 여세요.

Codex에서 사용

새 빈 작업 폴더의 새 요청에 같은 프롬프트를 넣고 GPT-6.1 Sol · High로 실행합니다. 완성 HTML을 저장해 브라우저로 엽니다. Codex CLI 자체에는 시각 미리보기가 없습니다.

추가 요청 예시

결과가 나온 뒤 같은 대화에서 이어서 요청하면 해당 부분만 수정됩니다.

• 두 말의 색과 미로 벽의 밝기를 바꿔 주세요.
• 제한 시간을 3분에서 5분으로 늘려 주세요.
• 완료할 때 퍼지는 종이 조각의 수를 줄여 주세요.