자바스크립트 #08 지뢰찾기

자바스크립트 #08 지뢰찾기

지뢰찾기게임 구현

10 by 10의 크기를 가지는 지뢰찾기를 구현합니다.

틱택토때 했던 2차원배열을 이용한 테이블 구성을 작성합니다.

var dataSet = [];
     var tbody = document.querySelector('#table tbody');
     for(var i = 0; i < ver; i++)
     {
         var tr = document.createElement('tr');
         var arr = [];
         dataSet.push(arr);
         for(var j = 0; j < hor; j++)
         {
             var td = document.createElement('td');
             tr.appendChild(td);
             arr.push(1);  
         }
         tbody.appendChild(tr);
     }

hor, ver에 데이터를 입력받으면, 해당 크기만큼의 테이블을 구성합니다.

이후 입력받은 갯수만큼의 지뢰를 생성합니다.

이때 지뢰는 10 by 10 랜덤한 위치에 생성하도록 합니다.

이는 로또추첨기에서 했던 셔플방식으로 데이터를 삽입합니다.

 var numCandidate =  Array(hor * ver)
    .fill()
    .map(function(val, index){
        return index;
    });

hor * ver만큼의 배열을 선언하고, undefined로 초기화 한 다음, return되는 index값으로 value를 지정해줍니다.

0~99까지의 값을 갖는 numCandidate 배열이 만들어집니다.

후보군 배열을 생성했다면 그 다음은 0~99중 입력된 지뢰갯수만큼 랜덤한 위치에 지뢰를 위치할 것입니다.

그러기 위해서 지뢰를 위치할 좌표들을 갯수만큼 뽑습니다.

    while(numCandidate.length > len - mine)
    {
        var tmp = numCandidate.splice([Math.floor(Math.random() * numCandidate.length)], 1)[0];
        mineTmpArr.push(tmp);
    }
    mineArr = mineTmpArr.slice(0, mine + 1);

0~99까지 중에서 랜덤하게 지뢰 갯수만큼 뽑은 데이터를 지뢰를 놓을 좌표를 가지는 mineArr에 저장합니다.

이제 해당 원소값을 계산해 좌표를 구할 수 있습니다.

좌표값은 나누기와 나머지연산으로 구합니다.

x좌표는 원소값에 나누기 10을하고, y좌표는 나머지 10을해서 나머지값으로 구할 수 있습니다.

   for(var i = 0; i < mineArr.length; i++)
     {
        var y = Math.floor(mineArr[i] / 10);
        var x = mineArr[i] % 10;
        console.log(y,x);
        tbody.children[x].children[y].textContent = 'X';
        dataSet[x][y] = 'X';

     }

tbody의 childen을 이용해 구해진 좌표값들로 지뢰위치를 표시할 수 있습니다.로

tbody에 속한 tr은 tbody의 children이고 배열로 접근할 수 있습니다. 그리고 tr의 자식인 td도 마찬가지로 접근가능합니다.

이를통해 2차원배열처럼 table의 요소에 접근할 수 있습니다.