JavaScript 입문 : 지뢰찾기 게임 - 본격적인 지뢰심기

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

 

지난시간 다음과 같이 랜덤하게 10개의 지뢰 인덱스를 뽑았습니다. 물론 이 인덱스는 새로고침 할때마다 변경이 되겠지요. 하여간 랜덤하게 뽑힌 10개의 인덱스와 지뢰를 연결하도록 하겠습니다. 

 

 

▒ 본격적인 지뢰심기

 

1. 전체를 지뢰가 없다는 가정하에 NORMAL로 코드숫자 부여  

 

지뢰는 총 10개로 하고자 했습니다. 총칸은 100칸이고요. 지난 시간까지는 해당칸에 대한 그림을 인덱스로 나타내었지만 본격적으로 생명을 불어넣기 위해서는 각 인덱스와 연결을 시켜야 합니다. 여기서는 코드숫자와 연결을 시켜야겠지요.

 

먼저 전체 100칸에 지뢰가 없는 NORMAL인 상태로 만들어 줍니다. 코드숫자는 -1로 하기로 했구요. 10 X 10은 이중반복문을 돌며 코드 숫자를 심으면 됩니다. 

 

항상 줄 (row)를 반복시키고 다음에  칸을 만들면 됩니다. 

 

 

이중 반복문을 통한 콘솔데이터를 보면 다음과 같이 총 100개의 -1이 적용된 배열을 볼 수 있습니다. 

 

 

여기에 랜덤하게 뽑은 10개를 지뢰코드인 -6을 연결시키는 작업을 해봅니다. 

 

2. 지뢰코드인 -6을 랜덤하게 나온 인덱스에 적용

 

이 부분이 저희같은 초보에게는 머리가 아픈 부분입니다. 

 

지난시간 지뢰 인덱스는 shuffle에 반영을 한 것은 기억하시겠죠. 이 shuffle의 위치를 파악하는게 급선무인데 파악된 위치를 찾아내서 전체 NORMAL로 된 -1중 10개가 -6으로 만들어 줘야 합니다. 

 

결국 data 배열에 반영을 해야하는데 위치를 나타내기 위해서는 data[10의 자리, row기준][1의 자리, cell기준]를 반영해 줘야합니다. 

 

전체가 -1인 콘솔을 보고 특정한 값을 찾는다고 가정을 하면서 공통된 코드를 찾아내 보도록 하겠습니다. 

 

다음 주황색 칸의 위치가 랜덤하게 돌린 지뢰의 위치라고 가정하겠습니다. 

 

 

주황색 위치는 row로 따지면 3번째 줄입니다. cell로 따지면 3번째칸입니다. 이는 인덱스 기준이기때문에 2번째 줄과 2번째 칸입니다. 다음과 같이 찾을 수 있을겁니다. 10의 자리를 찾기위해서 10으로 나누고 소수점 없애고 1의 자리는 나머지 구하는 공식으로 하면 될듯합니다. 

 

즉, data[2][2]를 찾고자 하면 다음과 같이 만들 수 있습니다. 

 

 

결국 이 로직을 보편화 시키는게 코드인데 결국 shuffle[ k ]안에 있는 k를 만들면 됩니다. 다음과 같이 반복문을 사용하고 최종적으로 data[rowTen][cellOne]에 적용시켜주면 지뢰심기가 됩니다. 

 

 

관련된 data를 콘솔에서 보게되면 다음과 같이 10개의 -6 (지뢰)가 반영이 된 것을 확인할 수 있습니다. 

 

 

3. 화면에 반영하기 

 

데이터가 변하면 화면에도 항상 같이 반영을 해 주어야 합니다. 지뢰 데이터를 만들었으면 startGame(  )내 화면에 반영하면 되는데 우리가 HTML에서 table태그만 만들었습니다. 결국 100칸을 만든다는 것은 <tr>태그 먼저 10개 <td>태그 10개를 만들어야 합니다. 자바스크립트에서 만드는 이유는 지뢰찾기 게임의 기본칸을 나중에는 사용자로부터 입력받아 만들고자 하는 이유이기 때문이죠. 

 

결국 다음 plantMine(  )  함수 다음에 화면에 반영하는 코딩이 필요합니다. 

 

 

역시 이중반목문으로 만들어줘야 되겠지요. 여기서는 forEach(  ) 반복문으로 사용 하겠습니다. 이유는 data 객체와 연결해야 되기 때문이죠. 

 

여기서 중요한 점은 plantMIne(  ) 함수에 데이터를 반영하는 것이기 때문에 변수 선언하는 곳에 지뢰데이터 변수를 만들고 이 곳에 forEach(  ) 반복문을 적용해 줍니다. 다음을 참조하세요. 

 

① 변수선언 

 

지뢰변수 만듭니다. 

 

 

② 지뢰변수와 화면연결

 

이제는 지뢰변수와 화면을 연결합니다. 

 

 

이제 브라우저를 보면 기본적인 그림이 완성이 되었네요.