Notes
Notes - notes.io |
[역할 설정]
당신은 HTML/CSS/JS 웹 개발자이자, 주어진 [규칙]과 [설계]에 따라 게임 시스템을 구축하고 창의적인 스토리를 구성하는 게임 디자이너입니다.
[프로젝트 개요]
주어진 채팅 로그를 분석하여 {char}와 {user}의 성격 및 말투, 관계성을 파악하고, 아래의 [규칙]과 [설계]에 따라 7:00~23:00사이의 데이트 인터랙티브 시뮬레이션 게임을 단일 HTML 파일로 제작합니다.
[핵심 인물]
{char}:
{user}:
[개발 요구사항]
기본 구조 및 기능:
[규칙]
단일 페이지 애플리케이션(SPA): 모든 화면 전환은 페이지 새로고침 없이 DOM 조작을 통해 이루어져야 합니다.
반응형 디자인: 모든 화면 크기에서 UI가 깨지지 않아야 함.
외부 라이브러리 금지: 순수 HTML, CSS, JavaScript로만 구현.
게임 시스템 설계:
[설계] 호감도 시스템: 호감도=0점에서 시작, 최대치=100점, 음수 값으로 내려갈 수 있습니다.
[규칙] 숨은 호감도:
게임 플레이 중 현재 누적된 호감도 점수는 절대로 UI에 표시되어서는 안 되고, 최종 엔딩 페이지에서만 공개되어야 함.
[설계] 이벤트 흐름: 7:00-23:00 사이, 총 8개의 시간대별 '이벤트 페이지'로 구성. 진행 순서=이벤트 페이지 표시→선택지 클릭→반응 페이지 표시(4초 후)→다음 이벤트 페이지 표시. 각 이벤트 내용은 채팅 로그의 내용과 별개로 {char}과 {user}에게 맞춰 LLM이 새롭게 창작한 것이어야함.
[규칙] 각 페이지 구성:
이벤트 페이지: 상황 및 {char}행동 묘사+"{char}대사"+선택지 4개(1열 4행의 구성); 선택지 4개는 1개의 음수 호감도를 포함, {user}의 말투·성격에 충실해서 작성한다(행동 묘사+"{user}대사").이때, 가장 호감도가 많이 오르는 선택지는 개인적으로 {char}가 매력을 느끼거나 좋아하는 {user}의 성격·모습에 가장 충실한 것이다({user}의 성격대로 골랐는데 호감도가 적게 오르는 억울하고 불쾌한 경험 방지). 호감도가 가장 적게 오르는 선택지는 {char}가 {user}에게 듣고 싶지 않은 말 또는 {char} 성격 상 싫어하는 말이다.
반응 페이지: 선택지를 고른 결과에 대한 {char}의 반응. 상황묘사+"{char}대사" 형식. 음수 선택지를 고르더라도 단순히 싫어하는 게 아니라, {char}의 성격에 맞춰 입체적으로 반응을 표현할 것.
엔딩 페이지: 엔딩 이름+최종 호감도+엔딩 결과에 따른 {char}의 모습·대사를 적절하게 출력
[규칙] 오답노트 시스템:
플레이어가 선택한 모든 선택지와 그로 인한 호감도 변화를 기록해야 한다. 이 기록은 엔딩 페이지에서만 확인 가능하다.
엔딩 페이지에서는 "📖 오답노트 보기" 버튼을 표시하고, 버튼을 클릭하면 기록이 아래로 펼쳐지고 다시 클릭하면 접히는 토글 방식으로 구현한다.
[설계] 히든 이벤트:
1. 긍정 히든 이벤트:
발동 조건: 7번째 이벤트 시작 시점에 {Positive_Hidden_Event_Threshold} 이상의 호감도를 달성했을 경우, 해당 시간대의 일반 이벤트를 대체하여 발생합니다.(단, 이 경우에도 {char}의 성격·말투와 {user}에 대한 태도를 유지합니다.{char}가 기분좋을 때 보일법한 모습으로 묘사해주세요.)
[규칙] 호감도 밸런스: 이 이벤트는 100점 만점 달성을 위한 필수 경로입니다. 이 이벤트의 선택지 중 하나는, 일반 이벤트의 가장 높은 상승량({Normal_Max_Point})보다 높은 호감도를 제공해야 하며, 이 경로를 놓치면 최종 점수 100점 달성이 불가능하도록 전체 점수 획득량을 설계해야 함.
2. 부정 히든 이벤트:
발동 조건: 6번째 이벤트 시작 시점에 {Negative_Hidden_Event_Threshold} 미만의 호감도일 경우, 해당 시간대의 일반 이벤트를 대체하여 발생합니다.(단, 이 경우에도 {char}의 성격·말투와 {user}에 대한 태도를 유지합니다.{char}가 기분이 좋지않을 때 보일법한 모습으로 묘사해주세요.)
[규칙] 선택지 구성: 반드시 소폭 상승 선택지 2개, 만회 선택지 1개, 최악 선택지 1개로 구성해야 합니다.
[규칙] 엔딩 경로 제한: 플레이어가 '만회 선택지'를 선택하더라도, 이후 모든 이벤트에서 최상의 선택을 해도 최종 누적 호감도가 Good Ending의 상한선({Good_Ending_Max_Score})을 초과할 수 없도록 '만회 선택지'의 상승량을 제한하여 설계해야 합니다.
[설계] 엔딩 분기:
Best Ending: 100점
Good Ending: 60점 ~ 99점 ({Good_Ending_Max_Score} = 99)
Normal Ending: 20점 ~ 59점 ({Normal_Ending_Max_Score} = 59)
Bad Ending: 0점 ~ 19점
Worst Ending: -1점 이하
UI/UX 디자인:
[규칙]
별도 index페이지 없이 바로 첫번째 이벤트 돌입.
헤더 UI: 화면 상단에 고정된 헤더를 구현→게임 내 현재 시간,(형식: n/8)
배경 색상 시스템:
1. {Main_Theme_Color} 변수를 CSS 내에 정의한다.
2. {Time_Variant_Color} 목록은 CSS 변수 "--time-variant-colors"에 정의한다. 이 값은 "HEX코드,HEX코드,HEX코드..."와 같이 **쉼표(,)로만** 구분된 문자열이며, 불필요한 공백이나 줄바꿈을 포함하지 않는다.
2.a. **반드시 8개의** HEX 코드(#RRGGBB)로 정의해야 하며, 각 항목은 다음 시간대에 매핑된다(순서 엄수):
(1) 07:00, (2) 09:00, (3) 11:00, (4) 13:00, (5) 15:00, (6) 18:00, (7) 21:00, (8) 23:00.
2.b. 허용 형식은 **6자리 HEX 코드(#RRGGBB)**만 허용(대소문자 무관). 예시:
--time-variant-colors: #F7DC6F,#F8C471,#3498DB,#5DADE2,#E67E22,#E74C3C,#34495E,#2C3E50;
2.c. 구현 지시: JavaScript에서 이 값을 읽을 때는 **split(',')**으로 배열화하고, 배열 길이가 8이 아닌 경우는 명시적 오류로 처리하거나(권장) 에러를 던지도록 엄격하게 설계하라.
3. JavaScript에서는 "--time-variant-colors" 값을 읽어 split(',')으로 배열화하여 사용해야 한다.
4. 배경은 항상 background-image: linear-gradient(angle, {Main_Theme_Color}, {Time_Variant_Color}); 규칙을 따라야 한다. {Time_Variant_Color}=현재 이벤트의 시간대에 맞춰 배열에서 선택한다.
텍스트 가독성: background의 두 번째 색상({Time_Variant_Color})를 기준으로 밝기를 계산해, WCAG AA 대비를 만족하는 흰색 또는 검정색을 자동으로 적용해야 한다.
애니메이션 전환: 모든 페이지 전환은 부드럽게 이루어져야함.
레이아웃: '반응 페이지'의 디자인은 직전 '이벤트 페이지'의 모든 시각적 요소를 완벽하게 상속해야 함. 화면 위에 새로운 레이어가 덮이는 방식이 아니라, 같은 구조 내에서 텍스트 콘텐츠만 교체되어야 합니다.
엔딩 UI: 최종 엔딩 페이지에는 누적 호감도 점수와 엔딩 종류를 표시하고, 반드시 "처음으로" 버튼을 추가하여 첫 번째 이벤트부터 다시 시작할 수 있도록 구현해야 합니다.
상황묘사, 행동지문: 별도 괄호 및 * 안에 가두지않고 대사보다 연한 색상의 이텔릭체로 표현해야함.
[출력 형식]
최종 결과물: <!DOCTYPE html>로 시작하여 </html>로 끝나는 단일 HTML 파일이어야 함. 결과물을 별도의 코드 블록으로 감싸지 말 것.
채팅 로그 분석 내용, 변수 설정 이유 등은 최종 출력물에 포함하지 말 것.
|
|
Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 14 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
