JavaScript 입문 : 좌클릭 이벤트 - 지뢰를 클릭하면 게임종료 및 일반칸 클릭시 논리적으로 주변 지뢰갯수 세는 방법 고민

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

 

지금부터는 본격적으로 지뢰를 찾는 기능을 추가할 건데요. 좌클릭으로 지뢰가 없는 칸을 전부 열면 게임에서 이기게 됩니다. 가장 이해하기 어려운 부분인데 새롭게 나오는 이론도 있고 한번 더 생각해야 되는 시간인 것 같습니다. 

 

좌클릭 이벤트를 위해 addEventListener를 달고 함수를 만드는 과정부터 시작합니다.

 

▒ 좌클릭 이벤트 - 주변 지뢰 갯수 세기 

 

1. 좌클릭 이벤트 선언과 함수선언

 

우클릭 이벤트 밑에 좌클릭 이벤트를 선언하고 함수를 만들도록 합니다. 

 

 

 

2. onLeftClick(  ) 함수 만들기

 

순서도를 보게되면 복잡하게 만들어져 있는데 저처럼 초보자들은 코드를 풀어 나가기가 쉽지 않습니다. 우선 좌클릭 이베트의 중요 역할을 고민해 보면 지뢰가 아닌경우 주변 지뢰가 없을때까지 칸을 열고 지뢰일 경우 게임이 종료됩니다. 

 

이는 역시 우클릭 이벤트시 선언한 target을 같이 이용하고 단지 우클릭이냐 좌클릭이냐의 차이만 이용하면 될 듯 합니다. 크게는 다음과 같이 만들 수 있을겁니다. 

 

 

① 변수선언하고 지뢰칸이면 게임종료 

 

먼저 쉬운 코드부터 진행합니다. 보통 ...이면이라는 것은 if문을 사용하는 겁니다. 

 

 

 

② 일반칸이면 주변 지뢰갯수 세기 - 논리적 추론하기 

 

지뢰갯수를 세기 위한 함수선언이 필요한데요. 예제처럼 이중반복문이 사용되는 경우는 가로줄과 세로줄 즉, row와 cell의 인덱스를 확인해야 합니다. 

 

 

상기 코드를 좀 더 구체적으로 알고 갈 필요가 있습니다. 

 

일단 각 칸이 일반칸이면 그 주위를 여는데 필요한 함수는 countMIne(  ) 함수입니다. 이 떼 중요한 것은 주면에 지뢰가 있으면 주면 지뢰의 숫자를 표시하고 (count) 없으면 아무것도 표시하지 않도록 합니다. 

 

그리고 마지막으로 카운트 되어진 지뢰갯수를 데이터에 저장을 하면됩니다. 

 

여기서 하나 주의할 점이 있네요. 다음에서 사용된 논리연산자인데요. 보통 &&와 ||의 논리연산자는 수학적으로 다음과 같이 그동안 이해를 했었습니다. 

 

A && B는 A와 B가 모두 참이어야 하고 A || B는 A또는 B가 참이어야 한다라고 이해했는데 자바스크립트에서는 조금 다른 의미입니다. 

 

이전시간 간단히 정리한 논리연산자에 대한 정확한 의미를 참조 바랍니다. 

 

2022.10.27 - [컴퓨터 알아가기/JavaScript] - JavaScript 입문 : 논리연산자 AND (&&) 와 OR (||)

JavaScript 입문 : 논리연산자 AND (&&) 와 OR (||)

 

자바스크립트의 논리연산자 원칙에 따르면 다음은 count가 false면 ' '를 실행하고 count가 true면 count를 살행합니다. 즉, count가 있으면 count 없으면 빈칸으로라는 뜻이겠지요. 

 

이제 countMIne(  )에 대한 함수를 정의해 보도록 하겠습니다. 

 

지뢰 주변갯수를 표시하는 중요한 원리는 좌클릭했을 경우 클릭한 기점을 중심으로 주위 8칸을 검사해야 합니다. 그리고 지뢰가 있는 지점을 지나는 경우 지뢰갯수를 1씩 증가 시키는 원리를 생각하면 됩니다. 

 

이럴 경우 극단적인 상황에서 논리를 찾아야 합니다. 다음과 같은 그림에서 생각해 보죠. 

 

 

 

상기 그림에서 빨간색을 클릭한다고 가정하고 주변 8칸을 자동으로 열게 만들면 지뢰에 걸리는 칸에는 지뢰가 있다는 표시를 해줍니다. target을 기준으로 각각 돌면 지뢰가 감지되기 때문에 1씩 증가된 모습을 볼 수 있습니다. 

 

이러한 숫자를 만들 코드가 필요합니다. 즉, 클릭한 주변에 지뢰가 있다면 해당 지뢰를 기준으로 해당칸을 기준으로 주변 8개 칸이 지뢰에 걸리는 숫자를 표시해줘야 게임이 됩니다. 

 

이러한 논리를 바탕으로 클릭한 주변 8칸을 전부 코드에 반영을 해줘야합니다. 

 

어렵습니다. 다음시간에는 본격적으로 해당코드를 카운트하는 방법을 공부해보고 이를 위해서 optional chaining이라는 문법을 하나더 배우도록 하겠습니다.