🏆 사다리 게임 (당첨 조작) 웹 앱 프롬프트
목표
Tailwind CSS를 사용하여 디자인된 반응형 HTML/JS 단일 파일 웹 앱을 생성합니다. 사용자가 게임을 시작하기 전에 당첨될 모둠을 미리 지정할 수 있으며, 실제 사다리 게임 실행 시에는 지정된 모둠이 반드시 당첨되도록 경로를 조작하여 보여줍니다.
주요 기능 및 요구사항
화면 구성 (2단계)
1단계 (사전 지정 화면):
총 5개의 모둠 이름을 입력할 수 있는 필드를 제공합니다.
사용자가 5개 모둠 중 하나를 클릭하여 "당첨 모둠"으로 지정하는 버튼 목록을 제공해야 합니다.
화면 헤딩에서 '단계' 관련 문구는 제거해야 합니다.
2단계 (사다리 게임 실행 화면):
캔버스에 사다리를 그립니다. (5개 세로줄, 15개 내외의 가로줄)
1단계에서 입력된 5개 모둠 이름을 상단에 표시합니다 (읽기 전용).
당첨 모둠이 지정되었다는 어떠한 힌트 문구도 표시해서는 안 됩니다.
'사다리 타기 시작!' 버튼을 제공합니다.
경로 추적 애니메이션이 완료되면 하단에 5개 모둠의 최종 결과를 표시하고, 지정된 당첨 모둠의 결과를 시각적으로 강조합니다.
리셋 버튼의 텍스트는 **"다시 처음으로"**로 설정해야 합니다.
핵심 로직 (조작 기능)
1단계에서 사용자가 선택한 모둠이 2단계의 사다리 타기 결과에서 반드시 '당첨' 결과로 연결되도록 사다리 경로-결과 매핑을 조작해야 합니다.
경로 추적 시, 각 모둠별로 다른 색상으로 애니메이션을 순차적으로 보여주어야 합니다.
기술 및 디자인
HTML 단일 파일로 구성하며, Tailwind CSS CDN을 사용하여 아름답고 반응성이 뛰어난 UI/UX를 구현해야 합니다.
JavaScript의
alert()대신 커스텀 메시지 모달을 사용하여 최종 당첨 모둠을 알려야 합니다.
