## 프로젝트 개요 JavaScript, HTML, CSS를 사용해 브라우저에서 동작하는 가위바위보 게임 레시피입니다. 세 개의 선택지와 컴퓨터 난수를 기반으로 승패를 판정하고, 점수 또는 연승 시스템을 더해 확장할 수 있습니다. ## 필수 기능 * 가위 / 바위 / 보 선택 버튼 * 컴퓨터 랜덤 선택 생성 * 승 / 패 / 무승부 판정 * 라운드 결과 표시 * 현재 점수 또는 승리 횟수 표시 * 리셋 버튼 ## 선택 기능(보너스) * 연승 카운트 * 애니메이션 효과 * 모바일 터치 최적화 * 이모지 또는 이미지 카드 스타일 UI * 승패 통계 저장 ## 학습 목표 * JavaScript 조건문과 함수 설계 이해 * 이벤트 리스너와 상태 관리 이해 * 랜덤 값 생성과 결과 판정 로직 이해 * 단순 게임 UI를 구성하는 방법 이해 ## 제약 조건 * 바닐라 HTML, CSS, JavaScript 사용 * 외부 프레임워크 없이 구현 * 한 번의 클릭으로 결과가 즉시 표시되어야 함 * 모바일에서도 쉽게 누를 수 있는 큰 버튼 필요 ## 구현 상세 ### 1\. 기본 구조 * 선택 버튼 3개를 배치 * 결과 영역과 점수 영역을 분리 * 리셋 버튼과 안내 문구 추가 ### 2\. 컴퓨터 선택 * `Math.random()`으로 가위, 바위, 보 중 하나 선택 * 선택값을 문자열 또는 숫자 상수로 관리 ### 3\. 승패 판정 * 사용자의 선택과 컴퓨터 선택을 비교 * 승리 조건과 패배 조건을 함수로 분리 * 무승부 조건도 별도 처리 ### 4\. 상태 관리 * 현재 점수, 승리 수, 연승 수를 변수로 관리 * 라운드가 끝날 때마다 결과 UI 업데이트 * 리셋 시 모든 상태 초기화 ### 5\. UI 개선 * 결과 메시지를 색상으로 구분 * 승리 시 강조 효과 추가 * 버튼 hover / active 상태 제공 ### 6\. 확장 아이디어 * 최고 점수 저장 * 3판 2선승제 모드 * 컴퓨터 패턴 분석 모드 * 게임 난이도에 따른 응답 속도 차이 ## 기대 결과 * 사용자가 버튼을 누르면 즉시 결과가 표시됨 * 승패 판정이 명확하게 작동함 * 점수와 연승 수가 갱신됨 * 리셋 시 처음 상태로 돌아감 ## 프롬프트 레시피 ### STEP 1 - 기본 가위바위보 골격 만들기 가위, 바위, 보 버튼 3개, 결과 영역, 점수 영역, 리셋 버튼이 있는 가위바위보 게임의 기본 골격을 만들어주세요. 바닐라 HTML, CSS, JavaScript로 작성하고, 버튼을 클릭하면 즉시 결과가 표시되도록 해주세요. ### STEP 2 - 승패 판정 로직 구현 컴퓨터의 랜덤 선택을 추가하고, 사용자의 선택과 비교해서 승리 / 패배 / 무승부를 판정하는 로직을 구현해주세요. 결과 메시지와 점수가 매 라운드마다 갱신되어야 합니다. ### STEP 3 - 완성도와 확장 리셋 버튼을 추가하고, 연승 카운트나 애니메이션 같은 보너스 요소를 넣어주세요. 모바일에서 누르기 쉬운 큰 버튼과 시각적으로 보기 좋은 상태 메시지도 부탁합니다.