2차원 배열로 좌표를 만들고 랜덤으로 폭탄을 뿌리고 동시 주변의 정보가 정해진다. 폭탄이 아닌 곳을 클릭하면 칸이 동시에 오픈되고 주변에(8칸) 폭탄이 몇 개 있는지 볼 수 있다. 폭탄을 클릭하면 폭탄이 다 오픈되고 죽는다.
for문으로 div을 생성한 후 borad에 style로 width를 주고 document.setProperty로 tileSize와 boardSize를 설정한다.
tiles에 forEach로 tile에 setAttribute로 x,y좌표 주고 random_boolean 만들어서 random 값이 bomb 변수보다 작으면 true가 나오게 한다. x는 증가하게 하고 true일 때는(폭탄일 때) bombs에 x,y좌표 push하고 주변 8칸에 대한 정보를 numbers에 push. x는 총 tile 개수 만큼 증가하기 때문에 x가 한 변의 length(여기서는 tiles.length가 boardSize의 제곱근) 즉, boardSize보다 같거나 크면 x=0이 되고 y는 1이 증가한다.
tile에 두 개의 이벤트 리스너가 필요하다. 오른쪽 oncontextmenu는 깃발을 심는 것, 왼쪽 클릭은 진짜 클릭이다. 그리고 forEach 밖에 numbers에 forEach를 건다. 자동으로 폭탄이 결정되면서 주변 좌표도 결정된 상태다. 이제 좀 헷갈리는데 현재 넘버의 x,y좌표는 배열에 담겨 str이다. 타일에 넘버 정보를 입력해줘야 한다. split하고 아까 data-tile을 새로운 x,y로 업데이트 한다. (헷갈림) 그리고 dataNum 변수를 만드는데 dataNum이 없다면 dataNum은 0이다. tile에 setAttribute를 해줘서 겹치는 곳은 dataNum이 증가할 수 있게 한다. setup() 끝
click함수와 check함수가 있다. 클릭하면 check 함수가 실행되는데 재귀적으로 주변을 계속 오픈하는 것이다. 먼저 click함수는 coordinate 변수를 만들어서 tile의 data-tile attri를 가져온다. 그리고 if 문인데 만약 bombs 배열에 coordinate가 있으면 폭탄을 클릭한 것이고 else는 폭탄이 없는 곳을 클릭한 것이다. else에 num을 tile의 data-num을 가져온다. if문으로 null이 아닐 경우를 찾는다. null이 아닐 경우에 tile에 tile-checked tile.innerHTML은 num이다. 칼라는 배열에서 data-num에 근거해서 찾는다. (헷갈림) setTimemout으로 승리 함수를 실행한다. 그리고 null이 아닐 경우 retun으로 마무리 그리고 if밖에는 checkTile 함수에 파라메터로 tile과 coordinate를 넘긴다. bombs에 coordinate가 있는지 찾는 if문 밖에 tile에 tile-chcked를 추가한다.
click 함수 정리 => coordinate를 할당하고 tile에tile-clicked를 추가한다. 클리한 게 bombs가 가진 좌표인지 찾는다. 아니라면 tile의 data-num이 null이 아닌지 찾고 checkTile(tile, coordinate) 실행한다. null이 아니면 checked해주고 승리 함수도 넣어주고 return으로 마무리.
check 함수는 넘어온 tile과 coordinate를 받는다. coordinate엔 폭탄 주위 폭탄이 아닌 타일의 좌표들이 있다. (왜?) 다시 coords로 coordinate를 split하고 x, y를 coord에서 정한다. 폭탄 뿌리고 numbers 배열을 정했던 것처럼 주변 8곳을 각 변수를 만들어서 담고 각 8곳에 clickTile을 그 변수와 좌표를 넘긴다. 재귀적으로 다시 click 함수로 넘어간다. (멈추게 되는 로직을 잘 모르겠음)
end함수로 가서 data-tile에 좌표를 지정해줘야 한다. tile을 받아서 tiles.forEachd를 하고 coordinate를 정한다. 만약 bombs에 coordinate가 있으면 tile class추가 그리고 innerHtml 바꾼다.
승리 함수는 win 변수가 true로 준다. 그리고 tiles에 또 forEach로 coordinate 찾고 이번엔 두 가지 조건을 만족해야 하는 if문을 만든다. tile-checked가 없거나 bombs가 coordinate에 없으면 win은 false다.
참고 :
https://happycording.tistory.com/entry/Sass-mixin-%EA%B3%BC-include-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://wsss.tistory.com/1458
https://im-developer.tistory.com/116
https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B2%8C%EC%9E%84-%EA%B0%9C%EB%B0%9C/lecture/17211?tab=note&mm=close
