JavaScript 입문 : 지뢰찾기 게임 - 순서도

이 글은 제로초 TV의 지뢰찾기 게임을 참조로 정리한 글입니다. 

 

머리속에 잘 남아있지 않지만 그래도 자바스크립트를 공부하고자 했던 마음 가다듬고 조금 더 훈련을 해 보고자 합니다. 무작정 따라 하는 것보다 복습하고 이해할려고 하니 어느정도는 업그레이드가 되는 느낌은 있는데 어떨때는 쉽게 포기할 수도 있겠구나 하는 생각도 들긴합니다. 

 

각설하고, 좀 더 매진해야겠습니다. 

 

이번에는 지뢰찾기 게임을 도전해 보는데요. 우선 지뢰찾기 게임이 뭔지 알아야 할 듯 합니다. 사실 저같이 나이가 있는 사람은 과거 컴퓨터 윈도우에 기본으로 깔려있는 게임인데요. 잘 모르는 분들은 구글에서 지뢰찾기를 검색하면 바로 게임할 수 있습니다. 아주 단순한 1차원적 게임이죠. 그렇지만 게임에 대한 큰 흐름을 알아야 순서도를 만들고 그에 따른 코딩을 할 수 있기에 정리를 하면서 가보도록 하겠습니다. 

 

1. 지리찾기 게임 원리 

 

다음 그림을 기준으로 원리를 보겠습니다. 

 

 

바둑판같은 사각형 배열에 임의로 클릭을 하면 클릭한 지점을 기준으로 자신을 둘러싼 8개의 면에 지뢰가 있으면 숨어있는 지뢰의 숫자가 표시되고 없으면 빈칸으로 나옵니다. 

 

예를 들어 1이 나온지점을 중심으로 360도 돌면서 지뢰가 숨어있으면 숨어있는 갯수가 나오지요. 이런 원리를 기준으로 지뢰를 터트리지 않고 빈칸을 전부 클릭하면 승리하는 게임입니다. 몇번 정도 구글 화면에서 게임을 하는편이 이해하기가 편합니다. 

하나만 생각하시면 됩니다. 지뢰를 누르면 게임종료, 지뢰가 없는 곳을 누르면 누른 기점으로 8개 면에서 지뢰갯수 표시와 동시에 없는 칸은 전부 오픈이 됩니다. 

 

2. 지뢰찾기 순서도 

 

그럼 순서도를 고민해 보겠습니다. 아직까지는 완벽하게 그릴 실력은 안되네요. 강좌의 도움을 받아 완성해 보도록 하겠습니다. 

 

 

순서도에서 고민해 볼 사항은 다음과 같이 정리할 수 있겠습니다.

 

① 처음시작

 

이 곳은 랜덤하게 지뢰를 섞는 곳입니다. 전체 배열수를 고민하고 그 가운데 랜덤하게 지뢰의 갯수를 심어서 기본적인 게임판을 만들면 됩니다. 

 

② 우측 클릭

 

우측 클릭을 하면 그 칸에 지뢰가 의심스러운 경우 물음표, 확실하다 판단할 경우에는 느낌표로 만들어 주는 곳입니다. 물론 아무것도 아닌곳이라 판단되면 다시 원상태로 복귀할 수 있는 기능을 주는 곳이라고 보면 되는데 순서도 상 왼쪽 클릭보다는 프로그램이 간단하기 때문에 먼저 하도록 하겠습니다. 

 

③ 좌측 클릭

 

가장 어려운 과정을 보여주는 곳인데요. 빈칸인지, 물음표를 표시했던 곳인지, 아니면 깃발을 표시했던 곳인지에 따라 다른데 결국 좌측 클릭에서 가장 중요한 역할은 칸을 여는데 있습니다. 클릭이벤트가 발생이 되는 곳이죠. 지뢰가 있는 곳을 열면 게임이 종료되고요. 

 

즉, 순서도가 완성이 되는 것은 최종 완성된 프로그램을 보고 만드는 것이지만 사실 코딩을 진행하면서 지속적으로 업그레이드 되야 될 것으로 보여집니다. 가장 중요한 점은 각각의 분야에서 어떤 역할이 메인인지 이해가 먼저로 보여지고 코딩을 해 나가면서 순서도도 업데이트 되야 될 것으로 보여집니다.