선을 그어 그림을 여는 게임
선을 이어 땅을 차지하면 가려진 야시장이 나타나요.
01그림을 열어 보세요
설치 없이 새 탭에서 열려요.
‘선 긋기’를 누르고 방향키나 방향 버튼으로 빈 곳을 지나 안전한 선으로 돌아오세요. 적이 그리는 선에 닿으면 목숨을 잃어요.
결과 확인42×53칸의 판에서 시작할 때 그림은 완전히 검게 가려져요. 선을 닫으면 적이 없는 쪽만 열리고, 내부 영역의 75%를 차지하면 성공해요. 다시 시작하면 그림과 점수가 처음으로 돌아가요.
02내 게임을 만들어 보세요
파일 제작은 PC에서 하면 편해요. 개인정보는 보내지 마세요. 외부 도구의 계정과 사용 한도는 별개이며, 결제 안내가 나오면 멈춰도 괜찮아요. 받은 게임이 로그인이나 불필요한 권한을 요구하면 실행하지 마세요.
긴 문장을 처음부터 준비할 필요는 없어요. 하고 싶은 일을 말하고, 답을 보고 필요한 조건을 덧붙이면 돼요.
선을 그어 영역을 차지하면 그림이 드러나는 오락실 땅따먹기 게임 만들어 줘.
이름이나 주제를 내 것으로 바꿔도 좋아요. 짧은 요청의 결과는 수업 예시와 달라질 수 있어요.
답을 받고 더 바꾸고 싶다면
결과를 보고, 원하는 것 한 가지만 더 말해 보세요. 같은 대화에 이어 보내요.
브라우저에서 열 수 있는 HTML 파일로 만들어 줘. 휴대전화 조작 버튼도 넣어 줘.
무엇을 해야 할지 모르겠다면 필요한 도움부터 물어보세요.
처음 해 보는 거야. 다음에 무엇을 하면 되는지 한 단계씩 쉽게 알려 줘.
수업 예시의 자세한 조건이 궁금하다면
아래는 예시의 조건을 자세히 적은 요청이에요. 처음부터 전부 입력할 필요는 없어요.
설치 없이 브라우저에서 하는 땅따먹기 게임을 index.html 파일 하나로 만들어 줘. 42×53칸의 맵에서 안전한 테두리를 출발해 선을 그리고, 안전한 선으로 돌아오면 적이 없는 쪽을 차지해. 적은 한 마리, 목숨은 세 개로 해 줘. 시작할 때 야시장 그림은 완전히 검게 가리고, 차지한 곳만 밝은 야시장 그림과 빛나는 점령 효과로 보여 줘. 적이 완성 전의 선에 닿으면 목숨을 잃고, 75%를 차지하면 성공하게 해 줘. 이동은 부드럽게 해 줘. 키보드 방향키와 휴대전화용 방향 버튼, 선 긋기 버튼, 다시 시작 버튼을 넣고 작은 화면에서도 맵 전체가 보이게 해 줘.
새 대화에 붙여 넣고 보내세요.
받은 전체 코드를 index.html로 저장해 브라우저에서 열어요. 기본 실습에는 HTML 한 파일만 필요해요.
결과 확인선을 닫기 전에는 점수가 오르지 않나요? 닫은 뒤에는 적이 없는 쪽만 열리나요? 목숨, 방향 버튼과 다시 시작도 확인하세요. 같은 그림이나 같은 결과는 보장하지 않아요.
예시의 속도와 점령 효과까지 만들기
예시에는 이 기능을 직접 구현했어요. 아래 추가 요청은 외부 AI에서 실행하지 않은 선택 실습이에요. 게임을 만든 같은 대화에 보내고 결과를 직접 확인하세요.
방금 만든 땅따먹기를 다음 조건으로 다듬어 줘. 앞서 만든 코드가 이 대화에 없다면 있다고 가정하지 말고 내가 첨부하도록 알려 줘. 맵은 가로 42칸, 세로 53칸이야. 테두리만 안전한 상태로 시작하고, 아직 차지하지 않은 그림은 투명도가 없는 완전한 검정으로 가려 줘. 큰 화면과 휴대전화에서 맵 전체를 보여 주고 가로 스크롤은 생기지 않게 해. 누르고 있는 방향으로 약 70ms마다 한 칸 움직이되, 칸 사이를 부드럽게 이어서 그려 줘. 적은 시작 위치 (11.25, 14.25), 가로 속도 5.72칸/초, 세로 속도 4.83칸/초로 움직여. 화면이 그려지는 횟수가 달라도 실제 속도와 충돌 결과는 같아야 해. 적은 안전한 영역에서 튕겨야 하고, 빠르게 움직여도 그리는 선을 통과하지 않게 해. 선이 닫히면 적이 있는 공간은 남기고 나머지 공간만 차지해. 이번에 얻은 칸에만 약 0.9초 동안 밝은 빛, 바깥으로 번지는 물결, 금빛 입자를 보여 줘. 새로 얻은 비율도 표시해 줘. 효과 때문에 아직 차지하지 않은 그림이 보이거나 선의 충돌 판정이 바뀌면 안 돼. 입자는 최대 48개로 제한하고, 브라우저에서 움직임 줄이기를 선택했다면 큰 물결과 입자는 생략해. 목숨은 세 개, 승리 기준은 실제 내부 영역의 75%야. 선에 맞으면 미완성 선을 지우고 출발한 안전한 칸으로 돌아가. 테두리를 걷기만 할 때는 목숨을 잃지 않아. 다른 탭으로 가거나 창을 벗어나면 이동과 게임 시간을 멈추고, 돌아오면 손을 다시 눌러야 움직이게 해. 다시 시작하면 그림, 점수, 선, 입력과 효과를 모두 처음 상태로 돌려 줘. 수정한 index.html 전체 코드를 한 코드 블록으로 보여 줘. 새 그림과 코드를 사용하고, 예시와 같은 그림이 나온다고 단정하지 마.
코드를 파일로 저장하는 방법
코드의 <!doctype html>부터</html>까지 복사해 메모장에 붙여 넣으세요. 앞뒤 설명은 빼요.
‘다른 이름으로 저장’에서 파일 형식은 ‘모든 파일’, 인코딩은 ‘UTF-8’로 정하고 index.html로 저장하세요. Chrome이나 Edge로 열어요. 글자로만 보이면 파일 이름이.html.txt로 끝나지 않는지 확인하세요.
아이폰에서는 ‘실제 게임 해보기’로 예시를 열 수 있어요. 내가 만든 파일을 아이폰에서 여는 과정은 아직 확인하지 않았어요.
이 그림을 내 게임에 넣고 싶다면
선택 실습이에요. 그림을 받아 night-market.png로 저장하고 AI 대화창에 첨부하세요. “차지한 영역에서 첨부한 그림이 보이게 해 줘. 그림은 index.html과 같은 폴더에 둘게”라고 요청해 보세요. 이 첨부 방식의 실제 생성 결과는 아직 확인하지 않았어요.
다른 그림을 쓸 때는 직접 만든 그림이나 사용 허락을 받은 그림을 고르세요. 저작권과 이용 조건을 확인하고 첨부하세요.
왜 적이 없는 쪽을 차지할까요?
선으로 나뉜 공간에서 적이 있는 곳은 남겨 두고, 적이 없는 곳만 내 영역으로 바꿔요. 선을 어디에 잇느냐에 따라 얻는 땅이 달라져요.
다음엔 어떤 그림을 열어 볼까요?
규칙은 유지하고 야시장을 우주 정거장이나 바닷속 풍경으로 바꿔 보세요.
그림과 게임 제작 기록
야시장 그림은 2026년 9월 24일 이미지 생성 도구로 새로 만든 가상의 삽화예요. 게임 규칙과 코드는 별도로 직접 작성하고 다듬었어요. 원작 게임의 그림이나 캐릭터는 사용하지 않았어요.
미리보기와 ‘실제 게임 해보기’는 같은 예시를 가리켜요. 요청문을 실행해 만든 게임과는 구분하세요. 실제 아이폰이나 초보자가 해 본 결과는 아직 확인하지 않았어요.