안녕하세요 느종입니다
오늘은 무엇을 만들어볼까 생각 하다가 제가 하는 게임 안에 있는 자그마한 콘텐츠인 룰렛 뽑기를 만들어 보기로 하였습니다. 게임 안에서는 아이템을 뽑는거였지만 이번에는 100만원 뽑기를 주제로 하여 제작을 하려고 합니다. 저번 시간에 만들었던 스톱워치(목표 시간 맞추기)처럼 결과물을 팝업(모달) 형태로 보여주도록 만들 생각입니다. 그럼 바로 시작 하겠습니다. 함께 공부해요!
설계
만들고자 하는 룰렛 예시 모습입니다.
총 12개의 칸을 4 x 4 형식으로 배치하고, 시계 방향으로 돌아가는 형식으로 구성하고자 합니다.현재 위치는 색상을 달리해줘서 사용자가 한 눈에 볼 수 있도록 하였고, 정 가운데에는 룰렛 뽑기를 시작할 수 있는 시작 버튼을 두어 사용자가 바로 알 수 있도록 구성하였습니다. 총 12개의 칸에 100만원 한 개, 10000원 한 개, 1000원 한 개, 100원 한 개, 10원 한 개 그리고 나머지는 꽝으로 채워지도록 하였습니다. 그리고 매번 룰렛 뽑기를 시작할 때마다 위치는 랜덤으로 변경되도록 만들 생각입니다. 매 번 같은 위치에 있으면 다시 해도 재미가 없잖아요.
룰렛 뽑기 버튼을 누르면 시계 방향으로 도는데 5바퀴 정도 돌고 나서 랜덤으로 위치가 정해지도록 할 계획입니다. 바퀴 수는 자신의 입맛에 맞게 바꾸셔도 상관 없습니다. 너무 빠르지도 않고, 너무 느리지도 않은 5바퀴 정도면 적당하게 끝나는 것 같아 저는 5바퀴로 하였습니다. 그리고 룰렛 뽑기가 일정한 속도로 돌면 재미가 없으니깐, 처음에는 빠르게 돌다가 점점 느려지도록 만들어볼까 합니다.
뽑기가 끝나게 되면 현재 위치에 뽑은 내용을 팝업(모달)창을 통해 보여주고, 100만원을 뽑았을 경우에는 축하합니다. 메시지를 보여주고, 그 외에 나머지를 뽑았을 경우에는 실패! 다시 도전해주세요. 문구를 보여줄 예정입니다. 그리고 하단에는 다시 하기 버튼을 만들 계획입니다. 다시 하기 버튼을 누르게 되면 메인 화면으로 다시 올 수 있도록 구성할 것입니다.
해야될 내용 정리 리스트
2. 룰렛 방향은 시계 방향으로 돌아가기
3. 현재 위치는 색상 다르게 해서 보여주기
4. 정 가운데에 버튼 만들기
5. 100만원, 10000원, 1000원, 100원, 10원, 꽝 x 7 배열 만들기
6. 새로 시작할 때마다 위치 랜덤으로 넣기
7. 시계 방향으로 5바퀴 이상 돌고 난 후 랜덤 위치에 멈추기
8. 시계 방향으로 돌 때 빠르게 돌다가 점점 느리게 돌도록 하기
9. 룰렛 뽑기가 끝나고 멈춘 현재 위치의 내용을 팝업(모달) 형태로 보여주기
이번에 해야 될 내용들을 정리해보면 위와 같이 되겠네요. 하나씩 위와 같은 내용들에 대해 코드를 작성해 나간다면 금방 룰렛 뽑기 콘텐츠를 만들 수 있을 것이라 생각합니다.
혹시 더 추가하고 싶은 콘텐츠나 기능이 있으시다면 더 넣으셔도 무방합니다!
폴더 및 파일
이번에도 마찬가지로 폴더는 js와 css로 나누어서 작성하고, 파일은 scripts.js, index.html, style.css 3개로 작성하였습니다. 폴더로 나누지 않고 하나의 폴더에 3개의 파일을 넣고 하셔도 됩니다.
오늘은 이번에 만들 룰렛 뽑기(100만원 뽑아라!) 콘텐츠에 대한 설계와 간략한 예시, 그리고 해야될 작업들을 정리해 보았습니다. 무엇인가를 만들 때 그냥 스크립트 파일이나 html 파일을 만들어 놓고 그 때 그 때 생각나는데로 만들어도 상관은 없지만, 처음 시작 할 때 해야될 작업들에 대해 리스트업을 해놓으면 코드를 작성할 때 좀 더 수월한 것 같습니다. 놓치는 부분도 적고, 오류가 나올 확률도 적어지는 것 같습니다. 그럼 다음 시간에는 리스트업한 내용에 대해 실질적으로 코드를 작성해보도록 하겠습니다.