세 인물로 관문 돌파하기
관우, 장비, 조운 중 한 명을 골라 강가 관문을 돌파해 보세요.
01한 판 해 보세요
설치 없이 새 탭에서 열려요.
관우는 공격 거리가 길고, 장비는 체력이 높고, 조운은 이동이 빨라요. 한 명을 고르고 오른쪽으로 이동하세요. 적이 공격 자세를 취하면 점프하거나 거리를 벌리세요.
체력은 게임 안 왼쪽 위의 HP 막대로 확인해요. 잠시 쉬려면 오른쪽 위의 일시 정지 버튼을 누르세요.
WASD 또는 방향키로 이동해요. Space는 점프, J는 공격, K는 특수 공격이에요. 휴대전화에서는 화면 안의 버튼을 누르세요.
결과 확인적 네 무리를 모두 쓰러뜨리면 관문이 열려요. 다른 인물로도 한 판 해 보세요.
02강가의 관문을 만들어 보세요
만들고 싶은 게임부터 짧게 부탁해 보세요. 먼저 작은 게임을 해 보고, 필요한 조작이나 그림을 하나씩 더해요.
HTML 한 파일로 만들어 달라고 부탁하면, 압축 파일을 따로 받을 필요는 없어요. 기본 코드부터 해 보고 그림은 나중에 더해도 좋아요.
보내기 전에 계정·요금·생성 한도를 확인하세요. 개인정보나 비공개 자료는 보내지 마세요. 받은 코드가 로그인·결제·불필요한 권한을 요구하면 실행하지 마세요.
이 요청문 전체를 외부 AI에서 다시 실행한 것은 아니에요. 새로 받은 게임에서 아래 기능을 직접 확인해 주세요.
긴 문장을 처음부터 준비할 필요는 없어요. 하고 싶은 일을 말하고, 답을 보고 필요한 조건을 덧붙이면 돼요.
관우, 장비, 조운 중 한 명을 골라 싸우는 삼국지풍 횡스크롤 액션 게임 만들어 줘.
이름이나 주제를 내 것으로 바꿔도 좋아요. 짧은 요청의 결과는 수업 예시와 달라질 수 있어요.
답을 받고 더 바꾸고 싶다면
결과를 보고, 원하는 것 한 가지만 더 말해 보세요. 같은 대화에 이어 보내요.
브라우저에서 해 볼 수 있게 해 줘. 이동, 점프, 공격과 체력 표시를 넣어 줘.
무엇을 해야 할지 모르겠다면 필요한 도움부터 물어보세요.
처음 해 보는 거야. 다음에 무엇을 하면 되는지 한 단계씩 쉽게 알려 줘.
수업 예시의 자세한 조건이 궁금하다면
아래는 예시의 조건을 자세히 적은 요청이에요. 처음부터 전부 입력할 필요는 없어요.
설치 없이 브라우저에서 열 수 있는 '강가의 관문' 2D 횡스크롤 액션 게임을 만들어 줘. 완성된 HTML, CSS, 자바스크립트와 그림을 index.html 파일 하나에 넣어 줘. 외부 그림 주소, 라이브러리, 서버 연결 없이 파일을 더블클릭하면 실행돼야 해. 기존 상업 게임의 화면이나 그림은 베끼지 마. 장면: 가로 16:9 화면에 밝은 하늘, 겹겹이 보이는 푸른 산, 강과 배, 오른쪽의 붉은 성문, 걸어 다닐 돌바닥을 그려 줘. 관문 길은 PC 화면 폭의 약 2.7배로 만들고, 카메라는 인물의 가로 이동만 부드럽게 따라가게 해. 먼 배경은 카메라 이동의 약 15%만큼 천천히 움직이되, 돌바닥과 인물은 같은 맵 좌표를 사용해. CSS 배경 위치만 바꿔 이동을 흉내 내지 마. 카메라가 따라가기 시작해도 바닥 무늬와 맵 위치가 계속 이동해야 해. 점프할 때는 카메라가 위아래로 움직이지 않게 해. 맵 끝에서 실제 이동이 멈추면 달리기 자세도 멈춰 줘. 바닥이 인물과 따로 미끄러지거나 움직임을 막는 보이지 않는 벽은 없어야 해. 그림은 HTML 안의 Canvas나 SVG로 직접 만들고, 인물마다 얼굴·옷·무기와 대기·달리기·점프·공격 자세가 구별되게 해 줘. 대기 자세와 달리기 자세를 빠르게 번갈아 표시하지 마. 주인공 세 명과 병사·관문 장수 모두 왼발 내딛기, 오른발 지나가기, 오른발 내딛기, 왼발 지나가기의 네 걷기 자세를 만들고 이동 거리에 맞춰 반복 재생해. 정지·점프·공격 그림을 걷기 그림에 섞지 마. 같은 달리는 그림을 통째로 흔들어 걷기를 흉내 내지 마. 빠르게 화면을 갱신해도 걷는 속도가 빨라지지 않게 해. 동작 그림의 머리·발·무기가 다른 칸에 걸치면 이미지를 단순히 등분하지 말고 인물별로 분리해. 각 자세는 같은 크기의 투명한 칸 안에 여백을 두고 발 위치를 맞춰, 점프하거나 공격해도 옆 칸의 그림 조각이 나타나거나 무기 끝이 잘리지 않게 해. 인물: 시작할 때 관우·장비·조운 중 하나를 고르게 해. 관우는 녹색 옷과 긴 언월도, 체력 120·공격력 24·방어력 7·이동 속도 205·공격 거리 112, 장비는 적갈색 옷과 장창, 체력 160·공격력 32·방어력 10·이동 속도 190·공격 거리 74, 조운은 푸른 옷과 창, 체력 100·공격력 20·방어력 5·이동 속도 245·공격 거리 88로 구분해. 일반 공격 간격은 각각 약 0.42초·0.51초·0.30초야. 관우는 더 멀리 넓게 베고, 장비는 약 1.5초 막고 반격하며, 조운은 짧게 돌진하는 특수 공격을 쓰게 해. 특수 공격은 다시 쓰기까지 6.5초 기다리게 해. 진행: 처음 병사 2명, 다음 3명, 그다음 3명, 마지막 관문 장수 1명을 상대해. 첫 병사는 체력 44·공격력 18·방어력 6, 다음 병사는 체력 64·공격력 22·방어력 8, 세 번째 병사는 체력 64·공격력 26·방어력 10, 관문 장수는 체력 260·공격력 30·방어력 12로 해. 피해는 반올림(공격력 × 공격 배율 − 상대 방어력)이며 최소 1이야. 일반 공격의 배율은 1, 1초 안에 이어지는 일반 공격 세 번째는 1.35, 특수 공격은 2로 해. 한 번의 돌진이 같은 적에게 두 번 피해를 주지 마. 현재 적을 모두 쓰러뜨린 뒤 오른쪽으로 가야 다음 무리가 나오게 해. 적을 지나쳐 오른쪽 끝으로 가면 남은 적이 뒤에 있다고 알려 줘. 무리 사이에는 최대 체력의 25%를 회복하되 최대 체력을 넘기지 마. 적을 모두 이기면 성공 화면, 체력이 0이면 실패 화면을 보여 주고 재도전과 인물 변경을 할 수 있게 해. 조작과 판정: PC에서는 WASD와 네 방향키 모두 이동하게 해. A·D는 좌우, W·S는 돌바닥의 위아래로 이동하며 위아래 범위는 기준 바닥에서 각각 24픽셀이야. 위아래 이동을 점프나 순간이동으로 대신하지 마. Space로 점프, J로 공격, K로 특수 공격, Esc로 일시 정지하게 해. 한글 입력 상태에서도 키의 물리적인 위치(event.code)로 조작하고, 그 값이 없으면 event.key를 사용해. 반대 방향 키를 함께 누르면 그 축의 이동은 멈추고, 키를 떼거나 창을 벗어나면 움직임이 남지 않게 해. 위아래 이동 때 인물과 충돌 바닥의 위치를 함께 갱신해 바닥을 통과하거나 이동이 두 번 적용되지 않게 해. 적은 주인공이 서 있는 위아래 위치로 접근하고, 위아래 거리가 28픽셀을 넘으면 근접 공격이 닿지 않게 해. 휴대전화에는 이동·점프·공격·특수 버튼을 게임 화면 안의 아래 양쪽에 놓아 줘. 인물이 걷는 바닥은 버튼보다 위에 두어 발과 전투를 가리지 마. 버튼에서 손가락을 떼면 이동이 바로 멈춰야 해. 점프 높이는 약 80픽셀로 하고 공중에서도 가까운 적을 공격할 수 있게 해. 일반 공격은 바라보는 방향의 적에게만 닿게 해. 적은 부드럽게 움직이고 공격 자세를 약 0.25초 먼저 보여 준 뒤에만 피해를 줘. 단순히 몸이 닿았다는 이유로 피해를 주지 마. 점프하거나 거리를 벌리면 적의 공격을 피할 수 있어야 해. 맞으면 약 0.17초 밀려나고 잠깐 다시 맞지 않게 하되, 조작 때문에 즉시 밀림이 사라지지 않게 해. 조작감과 타격감: 착지 약 0.14초 전에 점프를 눌러도 착지하면 점프하게 해. 공격 대기 시간이 끝나기 약 0.15초 전에 누른 공격은 한 번만 이어서 실행해. 특수 공격도 약 0.15초 동안 입력을 기억하고, 그 안에 공격할 수 있게 되면 한 번만 실행해. 타격 멈춤 중 눌렀다는 이유로 입력을 버리지 말고, 기존 공격 간격과 특수 공격 대기 시간은 지켜 줘. 공격 판정은 약 0.15초 동안 유지하되 같은 공격으로 같은 적을 두 번 때리지 마. 공중에서 창과 칼이 적의 몸에 닿으면 공격이 맞아야 해. 맞은 적의 공격 준비는 취소하고 약 0.19초 밀려나게 해. 공격이 맞으면 무기 궤적, 십자 모양의 짧은 충돌 섬광, 퍼지는 불꽃과 피해 숫자를 보여 줘. 맞은 인물도 짧게 밝아지게 해. 1.6초 안에 타격을 이어 가면 연속 타격 수를 게임 화면 안에 표시해. 동시에 남는 효과는 최대 32개로 제한하고, 움직임 줄이기 설정에서는 입자를 줄이고 큰 확대나 긴 이동을 생략해. 일반 타격은 약 35ms, 강한 타격은 약 55ms 동안만 동작을 잠깐 멈춰 충격을 표현해. 화면 흔들림은 짧고 약하게 하고 움직임 줄이기 설정에서는 생략해. 특수 돌진 중에 방향키를 눌러도 돌진 방향이 갑자기 바뀌거나 한 적에게 피해가 겹치지 않게 해. 일시 정지 중에는 공격·무적·특수 공격의 남은 시간이 흐르지 않아야 해. 버튼에서 손을 떼거나 창을 벗어나면 남은 입력을 지우고, 다시 시작하면 이전 공격과 효과를 모두 지워 줘. 효과음: 게임 화면 오른쪽 위에 음표 모양의 작은 '효과음' 체크박스를 넣고 처음에는 꺼 둬. 옆에는 일시 정지 버튼을 넣어 줘. 마우스를 올리거나 키보드로 선택하면 버튼의 이름을 알 수 있게 해. 사용자가 직접 켰을 때만 짧고 작은 타격·방어·피격 소리를 브라우저에서 만들어 재생해. 외부 음원은 받지 마. 동시에 울리는 소리는 최대 네 개로 제한하고, 끄기·일시 정지·재시작·페이지 이탈 때 남은 소리를 끊어 줘. 소리를 켠 뒤에도 방향키와 공격 키를 쓸 수 있어야 하고, 체크박스에서 Space를 누르면 점프 대신 체크만 바뀌어야 해. 소리를 재생하지 못해도 게임은 조용히 계속 실행해. 화면과 확인: 모든 전투 정보는 게임 화면 안에 놓고, 게임 아래 별도 본문으로 표시하지 마. 왼쪽 위에는 선택한 인물의 얼굴과 이름, 'HP 현재 체력 / 최대 체력'과 빨간 체력 막대, 작은 공격력·방어력 표시를 표시해. 위 가운데에는 적 무리 번호와 남은 적 수, 관문까지 이동한 거리를 나타내는 작은 막대를 넣어 줘. 오른쪽 아래에는 특수 공격 이름, 준비 막대와 남은 초를 보여 줘. 체력과 준비 막대는 실제 값과 바로 일치해야 해. 적이 화면 밖에 있으면 그 방향에 '남은 적' 화살표를 표시해. 상황 안내는 짧게 게임 안에 나타났다 사라지게 해. 320픽셀 휴대전화부터 넓은 PC 화면까지 인물과 그림을 찌그러뜨리지 마. PC는 가로 화면을 사용하고, 휴대전화 세로 화면은 카메라가 보여 주는 폭을 줄여 화면을 꽉 채워 줘. Canvas를 강제로 늘리거나 좌우를 잘라 맞추지 마. 휴대전화를 회전해도 카메라와 UI를 다시 맞추고, 체력·안내·버튼이 서로 겹치거나 인물 얼굴·발을 가리지 않게 해. 세 인물 모두 시작부터 관문 장수까지 이길 수 있어야 해. 코드 일부를 생략하지 말고 index.html의 전체 내용을 한 코드 블록으로 보여 줘. 끝에 이동·점프 공격·모바일 화면·승리와 재시작을 확인하는 짧은 방법도 알려 줘.
새 탭의 새 대화에 붙여 넣고 보내세요.
받은 코드의 <!doctype html>부터 </html>까지를 index.html로 저장하고 브라우저에서 열어요.
결과 확인인물을 고르고 움직여 싸울 수 있나요? 없는 기능은 필요한 것부터 더 부탁해요. 휴대전화에서도 그림 비율과 버튼 배치를 확인하세요.
코드를 파일로 저장하는 방법
PC에서 코드 블록 안의 HTML만 복사해 메모장에 붙여 넣으세요. ‘다른 이름으로 저장’에서 파일 형식은 ‘모든 파일’, 인코딩은 ‘UTF-8’로 선택하고 이름은 index.html로 저장해요.
Chrome이나 Edge로 열어요. 코드가 글자로만 보이면 파일 이름이 .html.txt로 끝나지 않는지 확인하세요.
장수와 적군 그림·동작 더 다듬기
기본 게임이 완성된 뒤 원할 때만 진행하세요. 예시의 삽화는 별도로 만든 그림이에요. 같은 얼굴이나 그림체가 나오지는 않을 수 있어요. 그림 생성 전에도 요금과 생성 한도를 확인하세요.
1. 그림 제작 시작
게임 화면을 캡처해 색감 참고용으로 보내세요. 별도로 만든 배경 원본이 있다면 함께 첨부하고, 없으면 배경부터 만들어요.
'강가의 관문' 2D 횡스크롤 게임용 그림 여섯 장을 순서대로 만들어 줘. 첨부한 게임 화면 캡처는 색감 참고용이지 배경 원본이 아니야. 별도로 만든 배경 원본을 첨부했다면 background.png로 사용하고 다시 만들지 마. 배경 원본이 없다면 먼저 가로 16:9 배경을 그려 줘: 밝은 하늘, 겹겹의 푸른 산, 강과 작은 배, 오른쪽 붉은 성문, 아래쪽 돌바닥. 인물·글자·버튼은 넣지 마. 그다음 관우(guan.png), 장비(zhang.png), 조운(zhao.png), 병사(guard.png), 관문 장수(captain.png)를 각각 별도의 이미지로 만들어 줘. 다섯 명을 한 이미지에 섞지 마. 관우는 녹색 옷·긴 검은 수염·언월도, 장비는 붉은 갈색 갑옷·굵은 수염·장창, 조운은 푸른색과 은색 갑옷·젊은 얼굴·창, 병사는 어두운 갑옷·짧은 창·붉은 천, 관문 장수는 큰 체격·자주색 갑옷·긴 무기야. 배경과 색감은 맞추되 서로 다른 얼굴과 실루엣으로 그려 줘. 특정 상업 게임의 그림은 베끼지 마. 인물 그림은 모두 투명한 PNG 한 장에 오른쪽을 보는 같은 인물의 전신 여덟 자세를 4열×2행의 같은 크기 칸으로 배치해 줘. 윗줄은 대기·이동 첫 자세·이동 다음 자세·점프 또는 돌진, 아랫줄은 공격 준비·공격·피격·방어야. 칸마다 얼굴·옷·무기를 유지하고 발 위치와 몸 크기를 맞춰 줘. 머리·발·무기가 잘리거나 옆 칸에 넘어가지 않게 하고, 글자·칸 구분선·배경은 넣지 마. 가능하면 내가 다시 요청하지 않아도 남은 그림을 순서대로 이어서 만들어 줘. 도구가 한 번에 한 장만 만들 수 있다면 만든 파일과 남은 파일을 짧게 알려 주고 멈춰 줘. 아직 만들지 않은 그림을 만들었다고 말하지 마. 모든 그림이 준비될 때까지 게임 코드를 수정하지 마.
한 장을 만들고 멈췄다면 같은 대화에 이어서 보내세요.
방금 정한 여섯 그림 중 아직 만들지 않은 다음 그림을 실제로 생성해 줘. 이미 만든 그림은 다시 만들지 마. 순서는 배경→관우→장비→조운→병사→관문 장수야. 한 장만 만들 수 있다면 이번에 만든 그림과 다음에 남은 그림을 알려 줘.
그림이 빠졌다면 한 명씩 다시 요청하기
빠졌거나 잘못 나온 그림만 다시 만드세요. 이미 받은 배경은 건너뛰고, 한 장을 확인한 뒤 같은 대화에서 다음 인물을 요청해요.
1. 배경 그림 한 장 만들기
내가 만든 '강가의 관문' 2D 횡스크롤 게임에 쓸 그림을 만들어 줘. 첨부한 게임 화면이 있으면 색감과 구도를 참고하고, 없으면 아래 설명으로 새로 그려 줘. 특정 상업 게임의 그림은 베끼지 마. 설명만 하지 말고 먼저 배경 이미지 한 장을 생성해 줘. 이번에는 background.png로 저장할 배경 한 장만 그려 줘. 가로 16:9의 넓은 강가 관문에 밝은 하늘, 겹겹이 보이는 푸른 산, 강 위의 작은 배, 오른쪽의 붉은 성문, 화면 아래 끝까지 이어지는 돌바닥이 보여야 해. 채색이 풍부한 2D 게임 삽화로 그려 줘. 인물·글자·체력 표시·버튼은 넣지 마. 인물이 움직일 중앙과 왼쪽에는 시야를 가리는 물체를 두지 마.
2. 관우 동작 그림
지금은 관우 한 명의 게임용 동작 그림을 실제로 생성해 줘. 앞서 만든 강가 배경과 어울리는 채색 삽화로, 짙은 녹색 옷과 금속 장식, 긴 검은 수염, 긴 언월도를 지닌 전신 인물로 그려 줘. 특정 상업 게임의 인물 그림은 베끼지 마. 배경이 완전히 투명한 PNG 한 장에 오른쪽을 보는 같은 관우를 4열×2행의 같은 크기 칸 여덟 개로 배치해 줘. 윗줄은 대기·달리기 첫 자세·달리기 다음 자세·점프, 아랫줄은 공격 준비·공격·피격·방어 순서야. 모든 칸에서 얼굴·옷·무기를 유지하고 발 위치와 몸 크기를 맞춰 줘. 머리·발·언월도가 잘리거나 옆 칸에 넘어가지 않게 해. 글자와 칸 구분선은 넣지 마. 이번 응답에는 관우 그림 한 장만 만들어 줘. 내가 guan.png로 저장할게.
3. 장비 동작 그림
지금은 장비 한 명의 게임용 동작 그림을 실제로 생성해 줘. 앞서 만든 강가 배경과 관우 그림의 색감은 맞추되, 얼굴과 실루엣은 구별되게 해 줘. 붉은 갈색 갑옷, 굵은 수염, 큰 체격, 무거운 장창을 지닌 전신 인물이야. 특정 상업 게임의 인물 그림은 베끼지 마. 배경이 완전히 투명한 PNG 한 장에 오른쪽을 보는 같은 장비를 4열×2행의 같은 크기 칸 여덟 개로 배치해 줘. 윗줄은 대기·달리기 첫 자세·달리기 다음 자세·돌진, 아랫줄은 공격 준비·공격·피격·방어 순서야. 모든 칸에서 얼굴·갑옷·장창을 유지하고 발 위치와 몸 크기를 맞춰 줘. 머리·발·창이 잘리거나 옆 칸에 넘어가지 않게 해. 글자와 칸 구분선은 넣지 마. 이번 응답에는 장비 그림 한 장만 만들어 줘. 내가 zhang.png로 저장할게.
4. 조운 동작 그림
지금은 조운 한 명의 게임용 동작 그림을 실제로 생성해 줘. 앞서 만든 강가 배경과 두 장수 그림의 색감은 맞추되, 얼굴과 실루엣은 구별되게 해 줘. 푸른색·은색 갑옷, 젊은 얼굴, 날렵한 창을 지닌 전신 인물이야. 특정 상업 게임의 인물 그림은 베끼지 마. 배경이 완전히 투명한 PNG 한 장에 오른쪽을 보는 같은 조운을 4열×2행의 같은 크기 칸 여덟 개로 배치해 줘. 윗줄은 대기·달리기 첫 자세·달리기 다음 자세·점프, 아랫줄은 공격 준비·공격·피격·방어 순서야. 모든 칸에서 얼굴·갑옷·창을 유지하고 발 위치와 몸 크기를 맞춰 줘. 머리·발·창이 잘리거나 옆 칸에 넘어가지 않게 해. 글자와 칸 구분선은 넣지 마. 이번 응답에는 조운 그림 한 장만 만들어 줘. 내가 zhao.png로 저장할게.
5. 병사 동작 그림
지금은 적 병사 한 명의 게임용 동작 그림을 실제로 생성해 줘. 앞서 만든 강가 배경과 장수 그림에 어울리면서도 주인공과 구별되게 해 줘. 어두운 갑옷과 짧은 창, 붉은 천 한 조각을 지닌 전신 인물이야. 특정 상업 게임의 적 그림은 베끼지 마. 배경이 완전히 투명한 PNG 한 장에 오른쪽을 보는 같은 병사를 4열×2행의 같은 크기 칸 여덟 개로 배치해 줘. 윗줄은 대기·접근 첫 자세·접근 다음 자세·돌진, 아랫줄은 공격 준비·공격·피격·방어 순서야. 모든 칸에서 얼굴·갑옷·창을 유지하고 발 위치와 몸 크기를 맞춰 줘. 머리·발·창이 잘리거나 옆 칸에 넘어가지 않게 해. 글자와 칸 구분선은 넣지 마. 이번 응답에는 병사 그림 한 장만 만들어 줘. 내가 guard.png로 저장할게.
6. 관문 장수 동작 그림
지금은 마지막에 나오는 관문 장수 한 명의 게임용 동작 그림을 실제로 생성해 줘. 앞서 만든 강가 배경과 병사 그림의 색감은 맞추되, 병사보다 큰 체격과 자주색 갑옷, 긴 무기로 강한 적임이 바로 보이게 해 줘. 특정 상업 게임의 적 그림은 베끼지 마. 배경이 완전히 투명한 PNG 한 장에 오른쪽을 보는 같은 관문 장수를 4열×2행의 같은 크기 칸 여덟 개로 배치해 줘. 윗줄은 대기·접근 첫 자세·접근 다음 자세·돌진, 아랫줄은 공격 준비·공격·피격·방어 순서야. 모든 칸에서 얼굴·갑옷·무기를 유지하고 발 위치와 몸 크기를 맞춰 줘. 머리·발·무기가 잘리거나 옆 칸에 넘어가지 않게 해. 글자와 칸 구분선은 넣지 마. 이번 응답에는 관문 장수 그림 한 장만 만들어 줘. 내가 captain.png로 저장할게.
2. 그림을 게임에 넣기
그림 여섯 장을 요청문에 적힌 이름으로 index.html과 같은 폴더에 저장하세요. 처음 만든 게임 코드가 있는 대화에 그림을 첨부한 뒤 아래 요청을 보내세요.
앞서 만든 '강가의 관문' index.html 게임에 내가 첨부한 배경과 인물 그림을 적용해 줘. 기존 게임 코드나 그림 여섯 장이 이 대화에 없다면 있다고 가정하지 말고 먼저 알려 줘. 게임 규칙, 세 인물의 능력, 적 네 무리, 조작 버튼은 유지해. 그림 파일은 index.html과 같은 폴더에 background.png, guan.png, zhang.png, zhao.png, guard.png, captain.png라는 이름으로 놓을 거야. 파일 주소는 이 이름만 사용하고 인터넷 그림 주소나 ZIP은 쓰지 마. 이번에는 그림 파일이 따로 있으니 처음의 'HTML 한 파일에 그림까지 넣기' 조건은 적용하지 않아. 배경은 가로세로 비율을 유지하고, 인물이 움직이는 돌바닥과 충돌 위치를 맞춰 줘. 달릴 때 바닥이 미끄러져 보이지 않게 해. 인물 그림은 각 PNG를 4열×2행, 왼쪽 위부터 오른쪽으로 읽는 여덟 칸으로 잘라 사용해. 달릴 때는 윗줄 둘째·셋째 자세를 번갈아 보여 주고, 점프·공격 준비·공격·피격에도 해당 칸을 보여 줘. 단순히 그림 전체를 흔드는 대신 자세가 실제로 바뀌어야 해. 왼쪽으로 갈 때만 그림을 좌우 반전하고, 발이 바닥에서 뜨거나 무기가 옆 인물에 겹치지 않게 크기와 기준점을 맞춰 줘. 적의 공격 준비 자세는 피해를 주기 전에 보여 줘. 그림을 못 읽으면 빈 화면 대신 기존 코드 그림으로 계속 플레이하게 해. 수정한 index.html 전체 코드를 빠짐없이 보여 줘. 끝에는 여섯 PNG의 정확한 파일 이름, 같은 폴더에 저장하는 순서, 대기·달리기·점프·공격 그림이 바뀌는지 확인하는 방법을 짧게 적어 줘. 예시와 똑같은 얼굴이나 그림체가 나온다고 단정하지 마.
결과 확인다섯 인물이 서로 다르고, 달리거나 공격할 때 자세가 바뀌나요? 그림이 빠졌다면 파일 이름과 저장 위치부터 확인하세요.
그림과 게임 제작 기록
예시의 강가 관문과 다섯 인물, 동작 그림은 2026년 9월 24일 이미지 생성 도구로 만든 가상의 삽화예요. 이동과 충돌에는 Phaser 3.90.0을 사용했어요. 특정 상업 게임의 그림·소리·코드는 사용하지 않았어요.
예시의 걷는 그림은 2026년 10월 11일 기존 인물을 참고해 새로 만들었어요. 인물마다 네 걷기 자세를 이동 거리에 맞춰 반복하고, 멈추거나 점프·공격할 때는 기존 그림을 사용해요. 아래 추가 그림 요청은 걷기 두 자세를 포함한 여덟 자세를 만드는 방법이라 예시와 동작 수가 달라요.
Phaser 배포 파일과 MIT 허가문은 예시 게임의 vendor 폴더에 함께 있어요. 예시는 별도 그림과 라이브러리를 쓰지만, 기본 제작 요청은 외부 파일 없이 HTML 한 파일로 만드는 방법이에요.