[입사 개발과제] Node.js를 이용한 지뢰찾기 개발하기

최근 이직을 준비하면서 한 회사에 이력서를 넣은 경험이 있습니다.

OO회사 (이름을 밝히면 왠지 모르게 안될것같아 비공개로 하겠다)에서 서류통과 후 개발과제를 전달받았습니다.

참고로 저의 인생 첫 회사는 게임회사였는데, 그곳에서는 Android앱으로 테트리스를 만들어보라는 과제를 받았었죠.

- 신입의 실력이었지만 어째뜬 기능구현은 완벽했었습니다! (?그랬을거에요)

(사실 지금 그 프로그램을 구동해보고, 소스를 보고있노라면 .... 정말 늅늅이 개발자였구나.. 싶다)

다시 본론으로 돌아와서... 과제는 지뢰찾기를 만들어보라는 것이었습니다.

게임회사가 아니었기에 지뢰찾기라는 게임을 만들어보라는 과제는 다소 생소했지만, 만들어보았습니다.

사실 지뢰찾기는 인터넷에 검색해도 내용도 많고, 쉽다. 무엇보다 구현이 어렵지 않아요

다른곳에서도 많은 흔한 소스이지만 여기에서도 정리해보았습니다.

우선 개발 과제에 대한 조건

1. 자료형 포함 모든 구성은 마음대로!

2. 지뢰찾기는 10x10의 크기

3. 지뢰의 개수는 10개로 가정하고, 임의위치 혹은 지정위치로 두어도상관없다.

- 지뢰의 위치를 넣는것이 아닌 지뢰 찾는 로직에 중점을두어 보겠다! 라는 내용인듯하네요

4. 모든 사각형에 대한 숫자를 구하여라 (기본이죠)

자 그럼 시작해볼게요.

우선 저는 Node.js를 사용하는 Back-End개발자로 지원했기 때문에 Node.js를 사용하여 개발해보겠습니다.

간단히 js파일 하나만 있어도 되겠지만, 저는 세팅했어요. 웹을.. 네

프로젝트 구성품(?).

구조를 보시면 뭐.. 기본적인 폴더구조입니다.

참고로, Node.js + Express + EJS (View) 를 사용하였어요

(개발하는데 10분 걸린듯한데, 포스팅이 더 오래걸리는건 기분탓일까요)

자 시작해볼까요

우선 기본적인 변수를 선언해줍니다.

var GAME_SIZE = 10;

var BUMB_COUNT = 10;

var GAME_ARR = new Array(GAME_SIZE);

GAME_SIZE 는 지뢰찾기의 가로/세로 크기를 정해줍니다. 

- 저는 기본적으로 과제에서는 10x10이라고 했으나, 이렇게 변수로 주는 편입니다. 숫자만 바꿨을때 판이 커지면 좋잖아요?

BUMB_COUNT 는 폭탄개수. 위에 말처럼 더 넣고싶을때가 있을지도 모르니까!

GAME_ARR 가장 중요한 게임판 배열이지요.

for(var i=0; i<GAME_ARR.length; i++){

GAME_ARR[i] = new Array(GAME_SIZE);

for(var j=0; j<GAME_ARR[i].length; j++){

GAME_ARR[i][j] = 0;

}

}

젤먼저 배열의 공간을 만들어줍니다. 기본으로 0으로 모두 초기화시켰습니다.

그리고 재귀호출을 위한 함수를 만들어줍니다.

사용처는 폭탄을 넣어줄겁니다. 임의의 위치에.만약 임의의 좌표 x, y를 가져왔는데 그 자리가 이미 폭탄이라면 다시 x, y를 뽑아야 하기 때문에

재귀호출로 호출합니다.

초보자(신입)분들께서 간혹 x,y 를 생성 후 리턴받고, 그 위치에 폭탄이라면 다시 함수를 호출하는 ?? 과정으로 개발하시는분들이 있는데

재귀호출은 코딩의 꽃!! 이라고 누가 그랬던것같아요. 많이 사용합니다.

function setBumb(cnt, incallback){

if(GAME_SIZE * GAME_SIZE < BUMB_COUNT){

incallback({code:"0000", msg:"BUMB_COUNT ERR!"});

return;

}

var x = parseInt(Math.random()*10);

var y = parseInt(Math.random()*10);

if(GAME_ARR[x][y] != "*"){

GAME_ARR[x][y] = "*";

cnt += 1;

if(cnt ==BUMB_COUNT)

incallback({code:1000});

}

setBumb(cnt, incallback);

}

if(GAME_SIZE * GAME_SIZE < BUMB_COUNT){

incallback({code:"0000", msg:"BUMB_COUNT ERR!"});

return;

}

사실 없어도 되는 부분이에요. 쉽게설명드리면 10x10 최대 폭탄개수는 100개 이겠지요.

게임판 개수보다 폭탄개수가 많으면 재귀호출에서 무한루프가 돌게 됩니다!

그래서 넣어두었어요. (위 설정된 값으로는 없어도 되는 부분이지만.. 폭탄개수를 혹시 조절할까싶어서 넣어보았어요)

그리고 Math.random()을 이용해 0~9 임의의 값 2개를 가져옵니다.

그리고 GAME_ARR[x][y] 위치에 이미 폭탄이 아니라면 폭탄을 설치하고

설치개수 cnt를 1개 증가시켜줍니다.

그리고 목표했던 폭탄개수만큼 설치가 끝나면 if(cnt ==BUMB_COUNT) 종료되는 함수입니다.

간단하죠?

이제 폭탄설치는 끝났고.

2단계로 폭탄을 찾아보겠습니다.

사실간단합니다.

x, y좌표에서

지뢰찾기는 해당 좌표 둘레에 있는 8개의 박스에 숫자를 채워주면 됩니다.

for(var i=0; i<GAME_ARR.length; i++){

for(var j=0; j<GAME_ARR.length; j++){

if(GAME_ARR[i][j] == "*")

setBumbCount(i, j);

}

}

간단하게 2중 for문을 돌면서 해당 좌표자리의 숫자를 채워주는 부분입니다.

setBumbCount를 살펴볼게요.

function setBumbCount(i, j){

for(var x = i-1; x <= i+1; x++){

for(var y = j-1; y <= j+1; y++){

if(x >= 0 && x < GAME_SIZE && y >= 0 && y < GAME_SIZE && GAME_ARR[x][y] != "*"){

GAME_ARR[x][y]++;

}

}

}

}

이게 다입니다.

정말 간단하죠!?

검사하는 셀이 "*" 즉 폭탄이면 주변 8칸의 숫자를 1씩 더해줍니다.

이렇게 하면 간단하게 프로그램이 완료됩니다.

잉 벌써끝..?

View단은

GAME_ARR을 그냥 출력만 해주면 끝나는 부분이니.. 생략하겠습니다.

 Table을 이용해 조금 보기좋게 꾸며보았어요

위에 신입/초보자 라고 언급을 했지만

저 역시도 배울게 많은 신입아닌 신입입니다.

소스의 지적도 감사하고, 수정이 필요하다면 조언도 감사합니다!!

즐코딩하세요