지뢰 심기

document.querySelector("#exec").addEventListener('click',function(){

    //가로,세로,지뢰 갯수 파악
    var hot = parseInt(document.querySelector("#hot").value);//가로
    var ver = parseInt(document.querySelector("#ver").value);//세로
    var mine = parseInt(document.querySelector("#mine").value);
    console.log(hot,ver,mine);
    //후보군 : js로 [x,y] 사이 랜덤한 수 생성할 때 for문 안 쓰고 하기 좋으니 외워두기를.
    //지뢰 위치 뽑기 1~100이 아니라 0~99
    var 후보군 = Array(hot * ver)//가로 X 세로 = 칸의 갯수. 만큼 배열 만든다.
    .fill()//빈 배열을 undefiend로 채운다.
    .map(function(요소,인덱스) {//1:1로 매핑.
        return 인덱스 + 1;
    });
    var 셔플 = [];
    while(후보군.length > 80) {//1부터 100까지 배열 생성=>20개만 생성
        var 이동값 = 후보군.splice(Math.floor(Math.random() * 후보군.length),1)[0];
        셔플.push(이동값);
    }
    //데이터와 화면을 따로 생각하되 둘을 일치시키는 작업이 필요. 여기서는 2차원 배열을 먼저 만들고 그것을 화면에 옮기는 작업 순서로 한다.

    //지뢰테이블 만들기
    var dataset = [];
    var tbody = document.querySelector('#table tbody');
    //세로줄(tr)을 먼저 만들고 가로칸(td)를 넣는다.
    for(var i = 0; i < ver; i+=1) {
        var arr = [];
        dataset.push(arr);
        // var tr = document.createElement('tr');
        for(var j = 0; j < ver; j+=1) {
            arr.push(1);
            var td = document.createElement('td');
            tr.appendChild(td);
            //td.textContent = 1;모든 칸에 1 입력
        }
        tbody.appendChild(tr);
    }
    console.appendChild(tr);
    //지뢰 심기
    for(var k = 0; k < 셔플.length; k++) {//예 60 -> 7번째줄 0번째칸.인덱스 잘 맞춰줘야함.
        var 세로 = Math.floor(셔플[k] / 10) ;
        var 가로 = 셔플[k] % 10;//배열엔 -1이 나오면 안됨
        console.log(세로,가로);
        tbody.children[세로].children[가로].textContent = 'X';
        dataset[세로][가로] = 'X';
        //tbody 하위에는 tr들이 유사 객체처럼 있다.
    }
});
// tbody tr td는 화면 부분.
// 입력받은 hot, ver 값에 따라 동적으로 tr,td 생성!

//피셔예이츠 셔플로 지뢰를 심을 20개 위치를 뽑는다.
//지뢰 랜덤 숫자 나오면 59->6번째줄 9번째칸, 72->8번째줄 2번째 칸 이런 식으로 바꿔줘야한다. 규칙찾기.