안녕하세요 느종입니다.
오늘은 룰렛 뽑기(100만원을 뽑아라!) 만들기를 마무리 지어보려고 합니다. 저번 시간에 이어서 자바스크립트 코드를 작성하고, 결과 화면 페이지까지 만들어보도록 하겠습니다. 함께 공부해요!
자바스크립트 코드
[ scripts.js ]
resTitle : 결과 화면에서 사용 될 결과 제목 변수입니다.
resDesc : 결과 화면에서 사용 될 결과 내용 변수입니다.
retryBtn : 다시 하기 버튼 관련 변수입니다.
modal : 결과 화면이 표시 될 모달(팝업)창 변수입니다.
[ scripts.js ]
retryBtn.addEventListener('click', function() { : 다시 하기 버튼에 클릭 함수 리스너를 더해줍니다.
modal.classList.toggle("hidden") : 결과 화면 모달(팝업) 창을 없애기 위해 toggle을 사용
init() : 다시 시작 할 때 모든 변수 및 기능 함수 초기화
[ scripts.js ]
orderList : 룰렛을 뽑을 때 시계 방향으로 돌아가도록 하기 위한 순서 배열입니다.
0부터 시작해서 순서대로 돌아야 하기 때문에 그 순서를 배열에 담아주었습니다. 반시계 방향으로 하실 분들은 반대로 순서를 작성하시면 됩니다.
totalSteps : 룰렛을 뽑을 때 매번 같은 위치에서 멈추고, 결과가 나오면 안되므로 마지막 위치를 랜덤으로 지정해줍니다. 5바퀴를 기본적으로 돌 것이기 때문에 총 12칸에 5번을 곱하고, 나머지는 12개의 숫자 중에 랜덤으로 값을 더해줍니다. 그러면 총 돌아야 될 바퀴 수가 나오게 됩니다.
currentStep : 현재 몇 번을 움직였는지에 대한 변수입니다.
previousIndex : 이전 위치 값에 대한 변수입니다.
playingStep() : 룰렛 뽑기를 실행할 실질적인 함수입니다.
if(previousIndex !== null) { : 이전 위치 값이 null이 아니라면, 룰렛 아이템의 div 태그의 배경 색을 초기 색으로 바꿔줍니다.
let currentIndex = currentStep % orderList.length : 현재 몇 번 움직였는지에 대해 총 12칸으로 나눈 나머지만 현재 위치 값에 대한 변수에 넣어줍니다. 12번씩 반복적으로 도는 것이기 때문에 몫은 필요없고, 나머지 부분(현재 위치)만 필요합니다.
items[orderList[currentIndex]].style.backgroundColor = '#32403A' : 현재 위치에 해당하는 div 태그 배경 색을 #32403A으로 바꾸어 줍니다.
previousIndex = currentIndex : 현재 위치 값을 이전 위치 값 변수에 넣어줍니다.
if(currentStep < totalSteps) { : 현재 몇 번을 움직였는지에 대한 변수가 전체 움직인 횟 수보다 작다면
let delay = 30 + Math.pow(currentStep * 0.7, 1.5) : 처음에는 빠르게 돌다가 점점 느려지도록 하기 위해 delay 변수를 만들어서 속도 조절을 하였습니다.
currentStep++ : 현재 몇 번 움직였는지에 대한 변수에 1을 더해줍니다.
setTimeout(playingStep, delay) : 아직 위에서 정한 totalSteps에 도달하지 못했으므로 delay를 변수로 하여 setTimeout으로 playingStep 함수를 실행해 줍니다.
setTimeout(function(){ : 룰렛 돌기가 끝나자마자 결과 화면으로 이동하면 좀 그러니깐 1초 정도 기다렸다가 이동하도록 하기 위해 setTimeout을 사용합니다.
currentRes : 룰렛 뽑기를 해서 뽑은 결과 text입니다. 돈 아니면 꽝 이겠죠.
resTitle.innerHTML = currentRes : 결과 화면 제목에는 뽑은 결과 text를 넣어줍니다.
resDesc.innerHTML : 뽑은 결과 text가 100만원일 경우에는 당첨을 축하드린다는 내용을 resDesc에 넣어줍니다. 그 외에 나머지는 다시 도전해주세요!라는 문구를 넣어줍니다.
modal.classList.toggle("hidden") : 결과 화면 팝업(모달) 창을 보여주기 위해 toggle을 사용합니다.
for(let i=0; i<items.length; i++) { : 함수가 실행 될 때마다 룰렛 아이템의 div 태그의 배경 색을 초기화 해줍니다.
playingStep() : 룰렛 뽑기 함수를 실행합니다.
결과 화면 페이지
