안녕하세요 느종입니다.
오늘은 마지막으로 사다리 게임의 자바스크립트 코드를 작성해 보도록 하겠습니다. 사다리 게임도 거의 끝이 보이네요. 함께 공부해요!
1. 자바스크립트 코드
1. playLadder(idx) : 사다리 세로줄 사이에 임의적으로 가로줄을 만드는 함수입니다.
2. for(let i=0; i<lineNum - 1; i++) { : 사다리 세로줄 사이에 가로줄이 생기는 것이므로 인원수(세로줄 수)에서 1을 뺀 만큼 반복문을 돕니다.
3. for(let j=STEP; j<LADDER_HEIGHT - STEP; j+=STEP) { : 가로줄과 가로줄 사이의 간격은 20만큼으로 설정을 하였습니다. 사다리 세로줄의 크기가 400이고, 20씩 내려가면서 가로줄을 생성합니다. 맨 밑에는 가로줄을 생성하면 안 되기 때문에 세로줄에서 20을 뺀 위치까지 반복문이 돌도록 하였습니다.
4. if(usedY.has(j)) continue : 첫 번째 세로줄에서 두 번째 세로줄사이에 가로줄을 생성했다면 세 번째 세로줄 사이의 같은 높이에는 가로줄이 생성되지 않도록 체크하는 코드입니다.
5. if(Math.random() < 0.3) { : 세로줄을 내려가면서 가로줄을 만들 때 20일 때마다 만들면 안 되기 때문에 임의값이 0.3 아래 일 때만 생성되도록 하였습니다.
6. usedY.add(j) : 해당 위치에 가로줄을 생성하기 때문에 usedY set에 추가해 줍니다.
7. let horizontalLine = document.createElement('div') : 가로줄 div 태그를 생성해 줍니다.
8. horizontalLine.className = 'horizontal-line' : 가로줄 css 클래스인 horizontal-line을 추가해 줍니다.
9. horizontalLine.style.top = j + "px" : 가로줄을 그릴 위치값을 입력해 줍니다.
10. ladderWrap.children[i].appendChild(horizontalLine) : 생성된 가로줄을 사다리 영역에 추가해 줍니다.
11. ladderMap[i].push({y: j, to: i+1}) : n번째 세로줄과 n+1번째 세로줄을 연결하는 것이기 때문에 생성된 가로줄 y 위치값과 다음 세로줄에 대한 정보를 추가해 줍니다.
12. ladderMap[i+1].push({y: j, to: i}) : n+1번째 세로줄에 대해서는 현재 y 위치값과 연결된 n번째 세로줄에 대한 정보를 추가해 줍니다.
13. let path = getRoute(idx) : 사용자가 상단 버튼 중에 선택한 버튼의 index값을 가지고 와서 해당 사다리의 루트를 계산하고 그것을 path 변수에 넣어줍니다.
14. goTo(path) : 위에서 계산한 루트를 가지고 그려주는 함수입니다.
15. path.push({x, y:0}) : 경로 path 배열에 시작 지점을 추가합니다. index 값과 y위치의 초기값을 입력해 줍니다.
16. for(let y=20; y<=LADDER_HEIGHT-20; y+=STEP) { : 엇.. 지금 보니 20을 STEP 변수로 바꿨어야 됐는데 안 바꿨네요;; 앞서 가로줄을 생성할 때와 마찬가지로 세로줄을 20 크기만큼 반복문을 돕니다.
17. let branch = ladderMap[x].find(b => b.y === y) : 세로줄을 돌다가 사다리 Map에 현재 y값과 일치하는 값이 있다면 찾아서 branch 변수에 넣어줍니다.
18. if(branch) { : branch값이 있다면
19. path.push({x, y}) : 경로 path 배열에 현재 x와 y의 위치값을 추가해 줍니다.(가로줄 시작 위치)
20. x = branch.to : 그리고 x 위치를 가로줄의 끝 위치 값으로 변경해 줍니다. 대각선은 만들지 않았기 때문에 y위치 값은 동일합니다.
21. path.push({x, y}) : 변경된 x 값과 y값을 path 배열에 추가해 줍니다.
22. if(y === LADDER_HEIGHT) { : y값이 사다리 크기 값과 같을 경우(세로줄 아래에 더 이상 가로줄이 없을 경우)
23. res = x : 결과값 res에 해당 x값을 넣어줍니다.
24. path.push({x, y:LADDER_HEIGHT}) : 반복문을 다 돈 후 마지막 위치값 x, y도 path 배열에 추가해 줍니다.
25. return path : 모든 계산이 끝났다면 path 배열을 return 해 줍니다.
26. let player = document.createElement('div') : 경로를 따라서 이동해야 할 플레이어 div를 생성합니다.
27. player.className = 'player' : 플레이어에 대한 css class player을 추가합니다.
28. ladderWrap.appendChild(player) : 사다리 영역에 플레이어를 추가해 줍니다.
29. let pathNum = 0 : path 배열을 하나씩 돌면서 위치를 확인해줘야 하기 때문에 만든 변수입니다.
30. play() : setTimeout을 이용해서 특정 시간마다 계속 실행될 함수입니다. 플레이어가 위치를 확인하고 경로를 따라서 그려지는 기능을 담고 있습니다.
31. if(pathNum >= path.length) { : pathNum이 전체 배열의 숫자보다 크다면 사다리 맨 밑까지 도달한 것이기 때문에 게임이 끝나게 됩니다.
32. endFunc() : 게임이 끝나면 끝 화면을 보여주는 함수를 실행합니다.
33. return : play() 함수를 벗어납니다.
34. let x = path[pathNum].x * 60 + 30 - 10 : 세로줄과 세로줄 사이의 간격이 60이므로 해당 세로줄에 60을 곱해줍니다. 그리고 상단 버튼 중앙에 세로줄이 위치해야 되기 때문에 30을 더해줍니다. 여기다가 플레이어의 가로 크기가 20이므로 그 절반인 10을 빼주면 플레이어의 현재 x 위치값이 나오게 됩니다.
35. let y = path[pathNum].y - 10 : 플레이어의 현재 y 위치값은 플레이어의 세로 크기의 절반인 10만 빼주면 나오게 됩니다.
36. player.style.left = x + "px" : 변경되는 x 값은 style.left에 적용해 줍니다.
37. player.style.top = y + "px" : 변경되는 y 값은 style.top에 적용해 줍니다.
38. pathNum++ : pathNum을 1씩 증가시킵니다.
39. setTimeout(play, 500) : 앞서 얘기했듯이 500 밀리초마다 play() 함수가 실행됩니다.
40. play() : 처음 play() 함수를 실행합니다.
41. 각각의 버튼에 클릭 리스너를 추가합니다.
42. 사다리 게임을 시작할 때 init() 초기화 함수를 실행합니다.
이렇게 해서 사다리 게임의 모든 코드를 작성하였습니다. 사다리 게임이라고 말만 들었을 때는 제작이 어렵지 않을 줄 알았는데 만들다 보니 이것저것 신경 써야 될 부분들이 꽤 있더라고요. 사실 실생활에서 나도 모르게 사용하고 있는 다양한 기능들이 사다리 게임처럼 안으로 파고들면 복잡한 게 맞는 것 같습니다. 다음에는 새로운 콘텐츠를 가지고 오도록 하겠습니다.