사다리 타기 게임 만들기
HTML, CSS, JavaScript만으로 구현하는 간단한 사다리 타기 미니 프로젝트
1. 프로젝트 소개
사다리 타기 게임은 친구들이나 직장 동료들끼리 내기를 할 때 자주 사용되는 게임인데요. 카카오톡이나 네이버에서도 쉽게 접할 수 있는 게임입니다.
오늘은 HTML, CSS, JavaScript만으로 참가자 이름과 결과를 연결하는 사다리 게임을 직접 만들어봅니다.
2. HTML 기본 구조
시작 페이지 - 메인 페이지 - 끝 페이지 이렇게 3개로 나눠서 만들었습니다.
시작 페이지에서 input 태그와 버튼을이용해서 인원수를 정하고 난 뒤 시작하기 버튼을 누르면 사다리 게임이 진행되도록 하였습니다.
사다리 게임이 들어가는 메인 페이지에는 외형만 만들어 놓고, 사다리 부분은 자바스크립트에서 만들었습니다.
3. JavaScript 핵심 로직
- 시작 페이지에서 설정한 인원수에 맞게 세로줄을 생성합니다. 인원수는 최소 2명부터 최대 5명까지로 설정하였고, 그 이하나 그 이상을 입력했을 때는
alert()을 이용해서 사용자가에 알림이 뜨도록 하였습니다. - 생성한 세로줄은
ladderMap에 추가합니다. - 가로줄과 가로줄 사이의 간격을 20으로 하고, 전체 세로줄 - 1만큼 반복문을 돌면서 가로줄을 생성합니다.
- 가로줄을 생성할 때 모든 좌표마다 가로줄을 생성하면 안되므로,
Math.random()함수를 이용하여 0.3값 아래 일 때만 가로줄을 생성하도록 합니다. 사다리를 더 많이 생성하고 싶으시거나 더 적게 생성하고 싶으시면 이 값을 조절하시면 됩니다. - 예를 들어 세로줄1과 세로줄2에 가로줄을 생성하였는데, 같은 좌표 세로줄3에 가로줄이 또 생성이 되면 한줄로 보이기 때문에 이 점을 방지하고자 반복문을 통해 세로줄을 돌 때 가로줄이 만들었던 위치를 기억하고, 그 위치에는 가로줄이 생기지 않도록 하였습니다.
usedY.has(j)이 부분입니다. 기존에 가로줄이 생성되어 있다면 넘어가고, 아니면 가로줄을 생성하게 하였습니다. ladderMap에 가로줄의 시작 위치와 끝 위치가 포함된 값을 추가합니다. 그래야 두 부분이 연결이 되었다는 것을 알 수 있습니다.- 사용자가 버튼을 누른 위치부터 Map을 검색하고, 경로를 설정합니다.
getRoute(idx)함수를 통해서 경로를 설정합니다. 세로줄의 y좌표가 20부터 전체 길이의 - 20까지 돌면서 y좌표값이 있으면path에 추가하고, 그 y좌표 값에 연결된 세로줄(x좌표)로 이동한 후에 해당 x, y좌표값도path에 추가합니다.getRoute(idx)을 통해 구해진 경로를 따라서 이동하고, 그려줍니다.- 사용자가 눈으로 사다리의 경로를 확인할 수 있도록 플레이어를 하나 만들고,
path를 따라서 좌표를 변경하고, 이동할 수 있도록 구현하였습니다. - 이 때 너무 빨리 이동하는 것을 방지 하기 위해서,
setTimeout()함수를 이용해서 delay를 주었습니다.
/**
* 사다리 만들기
*/
function createLadder() {
// 세로줄
for(let i=0; i<lineNum; i++) {
let verticalLine = document.createElement('div');
verticalLine.className = 'vertical-line';
ladderWrap.appendChild(verticalLine);
ladderMap.push([]);
}
}
/**
* 사다리 게임 함수
*/
function playLadder(idx) {
// 가로줄
for(let i=0; i<lineNum - 1; i++) {
for(let j=STEP; j<LADDER_HEIGHT - STEP; j+=STEP) {
if(usedY.has(j)) continue;
if(Math.random() < 0.3) {
usedY.add(j);
let horizontalLine = document.createElement('div');
horizontalLine.className = 'horizontal-line';
horizontalLine.style.top = j + "px";
ladderWrap.children[i].appendChild(horizontalLine);
ladderMap[i].push({y: j, to: i+1});
ladderMap[i+1].push({y: j, to: i});
}
}
}
let path = getRoute(idx);
goTo(path);
}
/**
* 경로 함수
*/
function getRoute(idx) {
let path = [];
let x = idx;
path.push({x, y:0});
for(let y=20; y<=LADDER_HEIGHT-20; y+=STEP) {
let branch = ladderMap[x].find(b => b.y === y);
if(branch) {
path.push({x, y});
x = branch.to;
path.push({x, y});
}
if(y === LADDER_HEIGHT) {
res = x;
}
}
path.push({x, y:LADDER_HEIGHT});
return path;
}
function goTo(path) {
let player = document.createElement('div');
player.className = 'player';
ladderWrap.appendChild(player);
let pathNum = 0;
function play() {
if(pathNum >= path.length) {
endFunc();
return;
}
let x = path[pathNum].x * 60 + 30 - 10;
let y = path[pathNum].y - 10;
player.style.left = x + "px";
player.style.top = y + "px";
pathNum++;
setTimeout(play, 500);
}
play();
}
4. 실행 예시
아래 사진은 실행했을 때 이미지입니다.
인원수를 입력한 후에 사다리 게임을 시작하고, 상단에 위치한 번호 버튼을 클릭하면 사다리 게임이 실행됩니다.
해당 번호에 맞는 경로를 따라서 플레이어가 움직이는 모습을 볼 수 있습니다.
5. 확장 아이디어
- 플레이어가 움직이는 경로를 따라서 색상을 변경하는 기능
- 가로줄을 직선 뿐만아니라 대각선도 추가하여 변경
- 하단 버튼에 결과도 사용자가 설정할 수 있도록 변경
- 플레이어를 아기자기한 캐릭터가 움직이는 모습으로 변경
- 모바일 반응형 스타일 적용