안녕하세요 느종입니다
저번 시간에 룰렛 뽑기(100만원을 뽑아라!) 콘텐츠의 외형을 만들었습니다.
오늘은 자바스크립트를 활용하여 기능과 함수들을 만들어보도록 하겠습니다.
함께 공부해요!
자바스크립트 코드
[ scripts.js ]
startBtn : 시작 하기 버튼 관련 변수
startPage : 시작 화면 페이지 관련 변수
mainPage : 메인 화면 페이지 관련 변수
goBtn : 룰렛 뽑기 시작 버튼 관련 변수
items : 룰렛 뽑기 배열에 사용된 div 태그들 관련 변수
shuffleCashList : 게임을 새롭게 시작할 때마다 돈과 꽝의 위치가 임의적으로 변경되어야 하므로 변경된 돈과 꽝의 배열을 담는 배열
init() : 초기화 함수
shuffleCashList = [] : 초기화 함수 안에서 위에 설명했던 shuffleCashList 배열을 초기화 해줍니다.
for(let i=0; i<items.length; i++) { : 새롭게 게임을 시작할 때에는 룰렛 아이템의 배경도 초기화시켜주어야 하기 때문에 반복문을 사용해 줍니다.
items[i].style.backgroundColor = '#587066' : 앞서 말한 룰렛 아이템의 배경색을 초기 배경색으로 초기화시켜줍니다.
setOrderList() : 4 x 4의 룰렛 뽑기 판에 본인이 지정한 아이템들(저는 돈과 꽝을 사용하였습니다.)을 임의적으로 배치하는 함수입니다.
startBtn.addEventListener('click', function() { : 시작 하기 버튼에 클릭 함수 리스너를 더해줍니다.
startPage.classList.toggle("hidden") : 시작 하기 버튼을 누르면 시작 화면은 숨기도록 합니다.
mainPage.classList.toggle("hidden") : 시작 하기 버튼을 누르면 메인 화면은 나타나도록 합니다.
goBtn.addEventListener('click', function() { : 룰렛 뽑기 시작하기 버튼에 클릭 함수 리스너를 더해줍니다.
playFunc() : 룰렛 뽑기를 시작하는 함수입니다.
[ scripts.js ]
cashList : 룰렛 뽑기에 사용할 아이템 배열입니다. 저는 100만원, 10000원, 1000원, 100원, 10원 그리고 나머지는 꽝으로 개수를 채웠습니다. 자신이 하고 싶은 아이템을 아무거나 넣어도 상관없습니다.
shuffleCashList = shuffleArray(cashList) : 위에서 설정한 아이템들을 무작위로 섞기 위해서 가장 일반적인 방법인 피셔-에이츠 알고리즘을 사용하였습니다. 배열의 맨 뒤부터 시작하여 무작위로 요소를 선택하고 현재 요소와 바꾸는 알고리즘입니다.
step : 4 x 4 전체 배열을 돌면서 값을 넣어야 하는데 가운데 버튼이 있는 부분을 제외해야 되기 때문에 사용한 변수입니다.
if(!items[i].classList.contains("not-show")) { : 전체 items 배열을 돌면서 클래스에 not-show가 포함되어 있지 않은 item에만 값을 넣기 위한 if문입니다.
items[i].innerHTML = shuffleCashList[step] : 해당 item에 앞서 무작위로 섞은 shuffleCashList 배열의 해당 값을 넣어줍니다.
step++ : 현재 item에 해당 값을 넣었다면 다음 item으로 넘어가야 되므로 step에 1을 더해줍니다.
for (let i = array.length - 1; i > 0; i--) { : 앞서 말한 것처럼 피셔-에이츠 알고리즘을 배열 맨 뒤의 요소부터 반복문을 실행해 나갑니다.
const j = Math.floor(Math.random() * (i + 1)) : 임의 값을 정합니다.
[array[i], array[j]] = [array[j], array[i]] : 현재 값과 교환합니다.
return array : return은 배열로 해줍니다.
오늘은 룰렛 뽑기에 대한 자바스크립트 코드를 1차적으로 작성해보았습니다. 아직 playFunc() 함수에 대한 코드를 작성하지 않았는데요. 다음 시간에는 playFunc() 함수 코드와 결과 화면 페이지에 대한 내용으로 포스팅하도록 하겠습니다.