안녕하세요 느종입니다
저번 시간에 룰렛 뽑기(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() 함수 코드와 결과 화면 페이지에 대한 내용으로 포스팅 하도록 하겠습니다.