안녕하세요 느종입니다
저번 시간에 이어서 사다리 게임 기능과 함수에 대한 자바스크립트 코드를 작성해 보도록 하겠습니다. 함께 공부해요!
1. 자바스크립트 코드
1. setSelectButton() : 사다리 게임 상단에서 사용자가 선택할 수 있는 버튼을 만드는 함수입니다.
2. for(let i=0; i<lineNum; i++) { : 시작 화면 페이지에서 설정한 인원수가 lineNum 변수에 들어가 있기 때문에 lineNum 수만큼 만들어주기 위해 반복문을 사용합니다.
3. let selectBtn = document.createElement('button') : HTML 구문에서는 버튼이 들어갈 수 있는 영역만 만들어줬기 때문에 반복문을 돌면서 버튼 태그를 생성해 줍니다.
4. selectBtn.innerHTML = i+1 : 각각의 버튼에는 1부터 인원수만큼의 번호가 들어갑니다.
5. selectBtn.addEventListener('click', function() { : 버튼 태그를 만들었으니 각 버튼에 클릭 리스너도 추가해 줍니다.
6. playLadder(i) : 선택한 번호부터 해당 경로에 맞게 사다리를 타고 내려가는 함수입니다.
7. selectButtonGroup.appendChild(selectBtn) : 버튼 태그를 생성했으면 버튼이 들어가는 영역에 추가해 줍니다.
8. setResultDiv() : 사다리 게임 하단에서 사다리 게임의 결과 값을 만들어주는 함수입니다.
9. let rand = randomResFunc(lineNum) : 사용자가 설정한 인원수 범위 내에서 임의적인 숫자를 계산하는 함수입니다.
10. for(let i=0; i<lineNum; i++) { : 상단 버튼과 똑같이 인원수만큼 반복문을 돕니다.
11. let resDiv = document.createElement('div') : 하단에도 인원수만큼 div 태그를 생성해 줍니다.
12. resDiv.innerHTML = "?" : 생성된 div 태그에 기본적으로 ? 값을 넣어줍니다.
13. resultGroup.appendChild(resDiv) : 하단 결과 영역에 생성된 div 태그를 붙여줍니다.
14. if(rand === i) : 앞서 뽑았던 임의적인 번호 rand가 i와 같다면
15. resArr.push("당첨") : 결과 값 배열 해당 위치에 당첨 문구를 추가합니다.
16. else : 같지 않은 나머지에는
17. resArr.push("꽝") : 결과 값 배열에 꽝 문구를 추가합니다.
18. init() : 게임을 시작할 때 변수를 초기화해 주는 함수입니다.
19. randomResFunc(max) : 0부터 max 사이의 값 중에서 임의적으로 값을 뽑아내는 함수입니다.
20. showResFunc() : 사다리를 타고 하단 까지 다 내려왔을 시에 하단 div 태그에 결과 값을 보여주는 함수입니다.
21. for(let i=0; i<resultGroup.children.length; i++) { : 하단 div 태그만큼 반복문을 돌면서
22. resultGroup.children[i].innerHTML = resArr[i] : 앞서 저장했던 결과 값 배열에서 순서대로 값을 입력합니다.
23. createLadder() : 사다리를 만드는 함수입니다.
24. for(let i=0; i<lineNum; i++) { : 인원수만큼 반복문을 돕니다.
25. let verticalLine = document.createElement('div') : 처음에는 세로줄을 만들고 보여줄 것이기 때문에 div 태그를 생성합니다.
26. verticalLine.className = 'vertical-line' : css에서 vertical-line으로 설정한 class를 추가해 줍니다.
27. ladderWrap.appendChild(verticalLine) : 사다리 영역에 사다리 세로줄 div 태그를 추가해 줍니다.
28. ladderMap.push([]) : 사다리의 세로줄을 생성한 만큼 맵에 배열을 추가해 줍니다.
저번 시간에 이어서 오늘은 사다리를 생성하는 것까지 코드를 작성해 보았습니다. 다음 시간에는 사다리의 가로줄을 생성하고, 경로를 계산하는 함수 등 나머지 코드를 작성하고 사다리 게임을 완성시켜 보도록 하겠습니다.