안녕하세요 느종입니다.
오늘은 사다리 게임의 내부적인 기능과 함수에 대한 코드를 작성해 보도록 하겠습니다. 함께 공부해요!
1. 자바스크립트 코드
1. startPage : 시작 화면 페이지를 담는 변수입니다.
2. minusPerson : 인원수를 한 명씩 감소시키는 버튼에 대한 변수입니다.
3. plusPerson : 인원수를 한 명씩 증가시키는 버튼에 대한 변수입니다.
4. inputPerson : 인원수를 표시하는 input 태그에 대한 변수입니다.
5. startBtn : 시작하기 버튼에 대한 변수입니다.
6. selectButtonGroup : 사다리 게임 상단에서 사용자가 선택할 수 있는 버튼 그룹에 대한 변수입니다.
7. ladderWrap : 사다리 게임이 그려지는 곳입니다.
8. resultGroup : 사다리 게임 하단에 표시되는 결과 그룹에 대한 변수입니다.
9. endPage : 끝 화면 페이지를 담는 변수입니다.
10. resValue : 사다리 게임의 결과를 담는 변수입니다.
11. reStartBtn : 다시 하기 버튼에 대한 변수입니다.
12. LADDER_HEIGHT : 사다리 높이에 대한 변수입니다. 저는 400으로 하였습니다.
13. STEP : 사다리의 가로줄 사이의 간격을 나타내는 변수입니다. 저는 20으로 하였습니다.
14. person : 인원수를 나타내는 변수입니다. 초기값은 2로 하였습니다.
15. lineNum : 사다리의 세로줄 수를 나타내는 변수입니다.
16. ladderMap : 사다리에 대한 내용을 담는 Map입니다.
17. usedY : 사다리 가로줄이 계속 이어져서 나타나지 않게 하기 위해서 사용하는 변수입니다.
18. res : 사다리를 따라가다가 마지막으로 도착한 곳의 세로줄 번호를 담는 변수입니다.
19. resArr : 사다리 게임 하단에 생성된 임의적인 결과 값들을 담는 배열입니다.
20. setMinusPerson() : 시작 화면에서 인원수를 한 명씩 감소시키기 위한 버튼을 누르면 실행되는 함수입니다.
21. if(person <= 2) { : person이 2보다 작거나 같을 경우에는 인원수에 대한 변화 없이 alert를 이용하여 알림 창을 띄어줍니다.
22. } else { : person이 2보다 클 경우에는 person 변수를 하나씩 감소시키고, input 태그의 숫자도 업데이트해 줍니다.
23. setPlusPerson() : 시작 화면에서 인원수를 한 명씩 증가시키기 위한 버튼을 누르면 실행되는 함수입니다.
24. if(person >= 5) { : person이 5보다 크거나 같은 경우에는 인원수에 대한 변화 없이 alert를 이용하여 알림 창을 띄어줍니다.
25. } else { : person이 5보다 작을 경우에는 person 변수를 하나씩 증가시키고, input 태그의 숫자도 업데이트해 줍니다.
26. startFunc() : 시작하기 버튼을 누를 시 실행되는 함수입니다.
27. startPage.classList.add("hidden") : 시작 화면 페이지를 없애기 위해 hidden 클래스를 추가해 줍니다.
28. endPage.classList.add("hidden") : 끝 화면 페이지를 없애기 위해 hidden 클래스를 추가해 줍니다.
29. lineNum = inputPerson.value : 시작 화면 input 태그에서 설정한 인원수 값을 lineNum 변수에 넣어줍니다.
30. setSelectButton() : 사다리 게임 상단에 위치한 사용자가 선택하는 버튼을 만드는 함수입니다.
31. createLadder() : 사다리를 만드는 함수입니다. 초기에는 세로줄만 만들어서 사용자에게 보이도록 할 것입니다.
32. setResultDiv() : 사다리 게임 하단에 위치한 결과 값을 만드는 함수입니다.
33. endFunc() : 사다리 게임이 끝날 경우 실행되는 함수입니다.
34. endPage.classList.remove("hidden") : 끝 화면 페이지가 나타나야 되므로 class 목록에서 hidden class를 지워줍니다.
35. resValue.innerHTML = resArr[res] : 끝 화면 페이지에서 사다리 게임 결과 값을 표시하기 위해서 resValue에 결과 배열의 해당하는 결과 값을 넣어줍니다.
36. showResFunc() : 사다리 게임이 끝났을 경우 하단 결과 배열에 결과 값들을 표시하기 위한 함수입니다. 자신이 선택한 번호에 대한 결과뿐만 아니라 모든 번호에 대한 결과를 보여주기 위함입니다.
37. restartFunc() : 사다리 게임을 다시 시작하는 함수입니다.
38. startPage.classList.remove("hidden") : 시작 화면 페이지가 다시 보여야 하므로 class 목록에서 hidden class를 삭제해 줍니다.
39. endPage.classList.add("hidden") : 끝 화면 페이지가 사라져야 하므로 class 목록에 hidden class를 추가해 줍니다.
40. init() : 각 변수들을 초기화해 줍니다.
오늘은 사다리 게임 안에서 동작하는 기능과 함수들에 대해서 코드를 작성해 보았는데요. 나머지 부분에 대해서는 다음 시간에 이어서 마저 작성해 보도록 하겠습니다.