JavaScript 입문 : 지뢰찾기 게임 - 주변지뢰 갯수 찾기(카운트)와 Optional Chaining

지난 시간에 이어 지뢰를 감싸는 주변칸에 지뢰갯수를 나타내는 코드에 대해 고민하고 있습니다. 지뢰가 없다고 확신하는 칸을 클릭하면 주면 8개를 동시에 열어 닫힌칸을 열어가는 게임인데 이에 대한 논리를 고민해 보겠습니다. 

 

본 글은 제로초 TV의 자바스크립트 강좌를 기본으로 공부하고 있습니다. 

 

일단 다음과 같이 지뢰가 있는 경우에 대하여 변수를 만들고 시작 하겠습니다. 

 

 

 

위 변수 mines는 코드숫자로 지뢰가 있는 경우를 지칭합니다. 이 변수에 클릭한 주변으로 지뢰가 있다면 카운트를 하는 방식을 고민해 보도록 하겠습니다. 

 

1. 지뢰 주변 갯수 세기

 

우선 다시한번 그림을 그려 주변을 나타내는 경우를 고민하고 공통된 코드를 도출해 보도록 하겠습니다. 다음 그림을 기준으로 설명하겠습니다. 

 

 

그림을 설명하자면

 

회색번호로 되어 있는 부분이 줄(rowIndex)과 열(cellIndex)에 대한 인덱스입니다. 만일 빨간색 칸(cellData)을 클릭한다면 countMine(3, 2)를 클릭하는 경우인데 빨간색을 중심으로 주변 8칸을 검색하는 코드를 고민하면 됩니다. 

 

그렇다면 그 주위(회색 계통)의 인덱스를 찾아내서 지뢰의 코드숫자와 연결시키면 되는데 다음 그림을 참조 하면 됩니다. 

 

 

이를 코드로 나타내면 다음과 같습니다. 

 

 

위 구체적 데이터를 기준으로 공통된 코드를 다음과 같이 만들어 봅니다. rowIndex와 cellIndex가 각각 (3, 2)이기 때문에 수식을 만들어 보면 다음과 같습니다. 

 

 

 저장하고 브라우저에서 실행해 보면 잘 되는데 맨 좌측위나 우측끝 등 극단적 상황에서 에러가 납니다. 

 

 

그럼 다시 아래 그림에서 노란색을 클릭하거나 주황색을 클릭할 경우 에러가 나는데 이러한 극단적인 상황을 고민해야만 공통된 코드가 작성이 됩니다. 

 

 

즉, 노란색을 클릭하거나 주황색을 클릭하면 범위를 벗어나는 영역은 녹색칸입니다. 이 부분을 해결하는 코드 문법이 자바스크립트에서는 Optional Chaining이라고 부릅니다. 

 

 

2. Optional Chaining

 

위 그림에서 노란색을 클릭한다는 가정하게 설명을 드리면 노란색은 data[0][0]이겠죠. 그런데 녹색1번 인덱스로는 (-1, -1)은 data[-1][-1]이겠죠. 콘솔에서 보게되면 다음과 같습니다. 

 

 

즉, data[-1][-1]는 범주에 벗어나기때문에 에러가 나는겁니다. 좀 더 정확히 말하면 앞 [-1]이 undefined이기 때문에 undefined와 같이 사용하면 에러가 납니다. 

 

좀 더 예를 보면 다음과 같습니다.

 

 

 

이를 해결하기 위해서는 undefined가 있다면으로 해주면 가능한데 다음과 같이 한번 써보죠. 

 

 

일단 에러없이 undefined값을 반환하네요. 이렇듯 앞에 조건이 undefined가 나올 경우 조건식으로 나타내는 방식을 optional chaining이라고 부르며 기호로는 '?.'를 같이 써주면 됩니다. 

 

 

이제 코드를 전부 고쳐주면 에러없이 주면 지뢰갯수 세는 코드를 만들 수 있습니다.

 

 

브라우저를 보면 작동이 되고 있습니다. 

 

 

그런데 사실 지뢰찾기 게임은 빈칸을 하나씩 여는게 아니라 지뢰가 없는칸은 한번에 쫙 열어줘야 하는데 그 부분에 대해서는 다음시간에 다시 업데이트 하도록 하겠습니다.