https://github.com/1gyou1/slot-machine-react
https://github.com/1gyou1/slot-machine-react
html2canvas react-router-dom reactjs typescript
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/1gyou1/slot-machine-react
- Owner: 1GYOU1
- Created: 2024-01-15T01:22:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-27T14:47:23.000Z (over 2 years ago)
- Last Synced: 2025-05-16T08:44:00.531Z (about 1 year ago)
- Topics: html2canvas, react-router-dom, reactjs, typescript
- Language: TypeScript
- Homepage: https://1gyou1.github.io/slot-machine-react/
- Size: 1.06 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# slot-machine-react
- Typescript 기반 React.js 라이브러리 사용하여 프로필 만들기 슬롯 머신 게임 구현
- 다양한 캐릭터를 만들어주는 슬롯 머신 형식의 게임으로, 배경색, 머리, 눈, 코, 입 등 5가지 요소를 빠른 속도의 슬롯 머신을 멈추면 화살표가 가리키는 이미지가 단계별로 조합하여 캐릭터를 완성합니다.`
게임이 종료된 후에는 결과 페이지에서 만든 캐릭터를 캡처하여 이미지로 저장할 수 있도록 구현하였습니다. 이를 통해 사용자들이 자신이 만든 캐릭터를 손쉽게 저장하고 공유할 수 있도록 했습니다.
### 👀 MainPage View
### 📌 주요 기술 스택
### 📌 주요 기능
- 게임 방법
- 슬롯머신 애니메이션
- 결과 미리보기
- 결과 화면 부분 캡처, 저장
- 게임 다시하기
- 처음화면으로 돌아가기
### Github Pages
https://1gyou1.github.io/slot-machine-react/
### slot-machine-react App을 사용하기 전 행동 수칙
>$ npm install react-router-dom
>$ npm install html2canvas
>$ npm start
### work flow
1. 시작 화면
- start 버튼 클릭 시 게임 화면 진입 (✔)
- 게임 방법
ㄴ 게임 방법 버튼 클릭 시 게임 방법 팝업 노출 (✔)
ㄴ 팝업 배경 클릭 시 팝업 닫기 (✔)
ㄴ 팝업 닫기 버튼 클릭 시 팝업 닫기 (✔)
2. 게임 화면
- 화살표 좌우로 움직이는 기능 (✔)
- stop 버튼 클릭 이벤트
ㄴ 화살표 멈추기 (✔)
ㄴ class="round_1" roundCount++ 반영 (✔)
- 멈춘 위치에 따른 선택 결과 값(percent 기준) 저장 (✔)
- preview 영역에 저장한 선택 값 노출 (✔)
3. 결과 화면
- 커튼 애니메이션 추가 (✔)
- 결과 노출 (✔)
- 결과 저장 하기
ㄴ 원하는 부분만 캡처 후 저장 (✔)
- 처음부터 다시 하기
ㄴ 버튼 클릭 이벤트 생성 (✔)
ㄴ 값 reset (✔)
- 처음 화면으로 돌아가기
ㄴ 버튼 클릭 이벤트 생성 (✔)
ㄴ 값 reset (✔)