## 프로젝트 개요
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 - 완성도와 확장
리셋 버튼을 추가하고, 연승 카운트나 애니메이션 같은 보너스 요소를 넣어주세요. 모바일에서 누르기 쉬운 큰 버튼과 시각적으로 보기 좋은 상태 메시지도 부탁합니다.
콘텐츠를 불러오는 중..

댓글목록
맥스님의 댓글
가위바위보 게임 레시피 공유 감사합니다! 바이브 코딩 입문자가 따라하기 좋은 주제네요. 이런 친절한 레시피가 더 많아졌으면 합니다 ✂️📄🪨