안녕하세요 느종입니다.
오랜 만에 글을 쓰게 되네요. 이런 저런 일들이 많아서 포스팅 작성이 늦었습니다.
오늘은 저번 시간에 이어서 실질적인 룰렛 뽑기 코드를 작성해보도록 하겠습니다. 일단 자바스크립트 코드보다 외형적인 틀을 만들기 위한 index.html과 style.css 코드를 작성하도록 하겠습니다. 저번 시간에 언급한 해야 될 내용 정리 리스트에 있는 항목들을 하나씩 코드로 바꿔 보도록 하겠습니다. 함께 공부해요!
해야될 내용 정리 리스트
1. 4 x 4 형식의 12개의 칸 만들기2. 룰렛 방향은 시계 방향으로 돌아가기
3. 현재 위치는 색상 다르게 해서 보여주기
4. 정 가운데에 버튼 만들기
5. 100만원, 10000원, 1000원, 100원, 10원, 꽝 x 7 배열 만들기
6. 새로 시작할 때마다 위치 랜덤으로 넣기
7. 시계 방향으로 5바퀴 이상 돌고 난 후 랜덤 위치에 멈추기
8. 시계 방향으로 돌 때 빠르게 돌다가 점점 느리게 돌도록 하기
9. 룰렛 뽑기가 끝나고 멈춘 현재 위치의 내용을 팝업(모달) 형태로 보여주기
시작 화면 페이지
시작 화면은 앞서 만들었던 콘텐츠들과 항상 비슷합니다.
콘텐츠 제목과 콘텐츠를 설명하는 내용을 담고 있고, 시작하기 버튼으로 구성하도록 합니다.
저는 100만원 뽑기 룰렛으로 주제를 잡아서 만들었지만, 자신의 입맛에 맞게 당첨 아이템들을 바꾸셔도 무방합니다. 시작하기 버튼을 누르면 룰렛 화면이 나오는 메인 화면 페이지로 넘어가도록 구성하였습니다.
[ index.html ]
메인 화면 페이지
[ index.html ]
메인 화면 페이지 입니다.저번 시간에 설계한 이미지 그대로 만들었습니다.
앞서 해야 될 목록 리스트 중에 첫 번째가 4 x 4 형식의 배열을 만드는 것이었습니다. div 태그로 총 16개의 칸을 만들어 주었고, 가운데에는 버튼이 위치할 것이기 때문에 버튼도 div 태그로 만들어 주었습니다. 룰렛 배열 위에 버튼이 와야 되게 때문에 div 태그는 같은 층에 위치하도록 하였습니다.
[ style.css ]
[ style.css ]
css는 위와 같이 작성하시면 됩니다.
총 16개의 바둑판 형식으로 div 태그를 나열하였습니다.
저는 display: flex를 사용하여 배열을 만들었지만 display: grid나 table을 사용하셔도 상관 없습니다.
가운데에 큰 버튼을 두기 위해서 가운데 4개의 div 태그는 보이지 않도록 하였고, 16개의 바둑판 배열 위에 버튼이 올 수 있도록 하기 위해 position: absolute와 position: relative를 사용하였습니다.
저는 룰렛이 돌아갈 때 div 태그의 배경 색상이 변하도록 하였는데, 테두리 색을 변경해도 괜찮을 것 같습니다. 자신의 입맛에 맞게 변경하시면 될 것 같습니다.
룰렛 뽑기에 대한 결과물을 보여주기 위해서 팝업(모달)창을 활용하고자 css코드는 추가해 놓았습니다. 깜빡하고 index.html 부분에는 캡쳐한 부분이 빠졌네요. 이 부분은 결과 화면 페이지를 만들 때 다시 설명하도록 하겠습니다.
오늘은 저번 시간에 언급했던 룰렛 뽑기 (100만원을 뽑아라!)를 주제로 한 콘텐츠 외형에 대한 부분을 다뤄 보았습니다. 해야 될 항목 중에 대부분이 자바스크립트 코드로 작성을 해야 되는 부분이라 별로 한 것이 없어 보이지만 그래도 머릿속으로 구상한 이미지대로 외형을 만들었다는 것에 큰 뿌듯함(?)이 있네요. 다음 시간에는 룰렛이 시계 방향으로 돌아가는 기능과 총 몇 번을 돌고 멈출 것인지, 처음에는 빨랐다가 점점 느려지게 돌아가도록 하는 기능, 내가 정한 아이템을 게임을 새로 시작 할 때마다 임의의 위치에 가도록 하는 기능, 결과 물에 대한 팝업(모달)창으로 보여주기 등의 기능들을 자바스크립트 코드로 작성해 볼 것입니다. 리스트업한 내용들을 하나씩 지워나가다 보면 금방 이번 콘텐츠인 룰렛 뽑기가 완성이 되어 있을 것입니다. 다음 시간에도 하나씩 코드를 작성해 볼게요!