- 순수 바닐라 자바스크립트로 캡슐 뽑기 구현
- 인트로 애니메이션
- 캡슐 뽑기 애니메이션
- 동전 드래그 앤 드롭
- 인벤토리 창
- 퀴즈 맞추기
- 리셋
https://1gyou1.github.io/Gotcha/gotcha-vanilla/gotcha-vanilla.html
2023년 5월 1~2주차
- 디자인 (완료 ✔︎)
- html, css, scss 작성 (완료 ✔︎)
- start 버튼 클릭, 메인 영역('.main_area') 노출 (완료 ✔︎)
2023년 5월 3~4주차
- 애니메이션 효과 (완료 ✔︎)
- 드래그 앤 드롭 기능 구현 (완료 ✔︎)
- 동전 이미지 위치 초기화 (완료 ✔︎)
- 동전 몇 번 넣었는지 카운팅 ++ (완료 ✔︎)
- 가격과 넣은 동전의 갯수가 같을 때 애니메이션 실행 (완료 ✔︎)
- 뽑은 캡슐 클릭 시 딤처리, 확대 효과, 캡슐 오픈, 이어서 하기 버튼 클릭 이벤트 (완료 ✔︎)
2023년 6월 1주차
- 랜덤 배열을 이용한 결과 이미지 도출 (완료 ✔︎)
- for문 캡슐 이미지 태그 생성 (완료 ✔︎)
- 드래그 앤 드롭 터치 이벤트 추가 (완료 ✔︎)
- 리셋버튼 추가, 인벤토리 팝업 이벤트, 퀴즈 팝업 (완료 ✔︎)
2023년 6월 2주차
- 퀴즈 맞춰야 동전 지급 기능 (완료 ✔︎)
- 캡슐 이미지 불러오는 방식 createBallImg() 수정 (완료 ✔︎)
- 뽑기 열기 전에 인벤토리 창 열면 결과 이미지 보이는 오류 해결 (완료 ✔︎)
- 핸들 돌리면 플레이 카운트++ 해주는 방식에서
뽑은 캡슐 오픈 클릭 후에 플레이 카운트++ 해주는 방식으로 수정하여 해결.
- 핸들 돌리면 플레이 카운트++ 해주는 방식에서
- 문제 팝업 클릭 이벤트 중복 오류 해결 (완료 ✔︎)
- 해결 전 : quizPopCheck.forEach((e)=>{//동전 지급 이벤트
e.addEventListener("click", quizAnswerSelectEvent);
해결 후 : quizPopCheck.forEach((e)=>{//동전 지급 이벤트 e.addEventListener('click', () => coinPlusEvent(e)) })
화살표함수 형식으로 매개변수 전달하기. - 해결 전 : quizPopCheck.forEach((e)=>{//동전 지급 이벤트
e.addEventListener("click", quizAnswerSelectEvent);
- 넣은 동전 갯수 카운트 html, js 추가하기 (완료 ✔︎)
2023년 6월 3주차
- 화살표, 이어서 계속하기, 리셋 버튼 이미지 변경 (완료 ✔︎)
- 퀴즈 문제 풀이 부분 object 형식으로 변경 (완료 ✔︎)
- 리셋 버튼 클릭시 값 초기화
2023년 6월 4주차
- 인트로 애니메이션 만들기 (완료 ✔︎)
- React.js 라이브러리 사용하여 캡슐 뽑기 구현
React.js 버전 이어서 보기 -> https://github.com/1GYOU1/Gotcha-react