113 lines (86 loc) · 4.35 KB

Gotcha-project

2. Gotcha-React version

React.js 라이브러리 사용하여 캡슐 뽑기 구현

MainPage View

주요 기능

인트로 애니메이션
캡슐 뽑기 애니메이션
동전 드래그 앤 드롭
인벤토리 창
퀴즈 맞추기

Github Page : https://1gyou1.github.io/Gotcha-react

Gotcha-React App을 사용하기 전 행동 수칙

npm start

npm install react-router-dom

프로젝트 진행 과정

2023년 6월 5주차

React 세팅(완료 ✔︎)
Intro.js
- 애니메이션 반응형 수정 (완료 ✔︎)
- 애니메이션 후 Start.js 컴포넌트로 자동 랜딩 (완료 ✔︎)
Header.js
- Start.js에서 부터 고정 노출 (완료 ✔︎)
Start.js
- 버튼 클릭 시 애니메이션 추가 (완료 ✔︎)
- 버튼 클릭 시 일정 시간 후 Main.js 컴포넌트로 랜딩 (완료 ✔︎)

2023년 7월 1주차

Main.js
- (1) 초반 진입 업데이트 변수 정리, 업데이트 (완료 ✔︎)
- (2) 랜덤 결과(랜덤 배열 생성) (완료 ✔︎)
- (3) 캡슐 통 이미지 생성, 이미지 업데이트 (완료 ✔︎)
- (4) 동전 드래그 이벤트 (완료 ✔︎)
- (5) 동전 넣는 영역에 진입했는지 체크 (완료 ✔︎)

2023년 7월 2주차

Main.js
- (6) 넣은 동전 카운트 (완료 ✔︎)
- (7) 동전 위치 초기화 (완료 ✔︎)
- (8) 캡슐 뽑기 애니메이션 실행 (완료 ✔︎)
- (9) 출구에 뽑은 캡슐 이미지 노출 (완료 ✔︎)
- (10) 뽑은 캡슐 딤처리 (완료 ✔︎)
- (11) 딤처리에 뽑은 캡슐 이미지 노출, 캡슐 오픈 결과 이미지로 변경 (완료 ✔︎)
- (12) 오픈 후 이어서하기 버튼 생성 (완료 ✔︎)
- (13) 캡슐 오픈 후 값 업데이트, 딤처리 해제, 뽑기 캡슐 이미지 제거(이어서 뽑기) (완료 ✔︎)
- (14) 인벤토리 팝업 오픈, 딤처리 (완료 ✔︎)
- (15) 인벤토리 팝업 리스트 생성, 플레이(뽑기) 횟수에 따라 결과 이미지 변경 (완료 ✔︎)
- (16) 인벤토리 팝업 닫기, 딤처리 해제 (완료 ✔︎)

2023년 7월 3주

Main.js
- 퀴즈 리스트 팝업
  - (17) 리스트 팝업 오픈, 딤처리 (완료 ✔︎)
  - (18) 리스트 팝업 li 생성 (완료 ✔︎)
  - (19) 리스트 팝업 닫기 (완료 ✔︎)
- 퀴즈 문제 풀이 팝업
  - (20) 문제 풀이 팝업 오픈 (완료 ✔︎)
  - (21) 문제 풀이 팝업 제목, 문제, 정답 리스트 생성 (완료 ✔︎)
  - (22) 문제 풀이 정답 체크
    - 선택한 문제 리스트 li에 class off 추가 (완료 ✔︎)
    - 정답이면 동전 추가 지급 (완료 ✔︎)
  - (23) 문제 풀이 팝업 닫기, 딤처리 제거 (완료 ✔︎)

2023년 7월 4주차

Main.js
- 리셋 (완료 ✔︎)
- 컴포넌트 분리
  - 퀴즈 팝업 Quiz.js (완료 ✔︎)
  - 인벤토리 팝업 Inventory.js (완료 ✔︎)
- 값 업데이트 점검 (완료 ✔︎)
- UI 개선 화살표 추가, css 수정 (진행중 ~)

1. Gotcha-vanilla version

순수 바닐라 자바스크립트로 캡슐 뽑기 구현

vanilla.js 버전 이어서 보기 -> https://github.com/1GYOU1/Gotcha