사다리타기

사다리타기 게임 만들기 (JavaScript 구현)

이 예제는 HTML Canvas와 JavaScript를 활용하여 만든 사다리타기 게임입니다. 인원수를 입력하고 결과 항목을 설정하면, 자동으로 사다리가 생성되고 각 참가자의 이동 경로를 애니메이션으로 확인할 수 있습니다.

Canvas 위에 세로선과 가로선을 그리고, JavaScript로 경로를 계산하여 참가자가 어떤 결과에 도착하는지 보여주는 구조입니다.

사다리 설정

인원수 (최대 10명)

선물(결과) 입력

Player 1

선물1

사용 방법

1. 인원수를 입력합니다. 최소 2명부터 최대 10명까지 설정할 수 있습니다.
2. 사다리 생성 버튼을 누르면 인원수에 맞게 결과 입력칸이 만들어집니다.
3. 각 입력칸에 선물, 벌칙, 메뉴, 팀 이름 등 원하는 결과를 입력합니다.
4. 1번부터 시작 버튼을 누르면 1번 참가자부터 순서대로 사다리를 타기 시작합니다.
5. 각 참가자의 이동 경로가 색상 선으로 표시되고, 도착한 결과가 팝업으로 나타납니다.
6. 모든 참가자가 완료되면 버튼이 전부 완료 상태로 바뀝니다.

결과를 다시 정하고 싶다면 인원수나 결과 항목을 수정한 뒤 사다리 생성 버튼을 다시 누르면 됩니다.

활용 예시

• 점심 메뉴 정하기
• 벌칙 정하기
• 선물 추첨하기
• 팀 배정하기
• 발표 순서 정하기

사다리타기 게임은 단순한 놀이처럼 보이지만, JavaScript의 배열 처리, Canvas 그리기, 이벤트 처리, 애니메이션 로직을 함께 학습할 수 있는 좋은 예제입니다.

웹 개발을 처음 배우는 분들도 이 구조를 따라가면 인터랙티브한 웹 도구를 만드는 흐름을 이해할 수 있습니다.