지뢰 찾기 게임의 맵이 되는 표를 그리고 지뢰를 심겠습니다. 가로 10줄, 세로 10줄, 지뢰 10개로 시작합니다. 지뢰 데이터를 표현하는 배열을 만들고 반복문을 돌면서 tbody 태그 안에 tr과 td 태그를 만들어 넣으면 됩니다.

항상 강조하지만, 데이터와 화면은 구분하는 것이 좋습니다. 데이터로 먼저 표현하고, 데이터를 화면에 반영하는 순서로 진행합니다. 데이터를 제대로 표현하지 못하면 당연히 화면도 잘못 나오게 됩니다. 데이터는 어떻게 표현하는 것이 좋을까요?

데이터에 어떤 정보가 들어가야 할지를 생각해야 합니다. 단순히 열린 칸, 닫힌 칸, 물음표 칸, 깃발 칸, 지뢰 정도라고 생각하면 곤란합니다. 생각보다 더 세세하게 나뉩니다. 물음표는 해당 칸에 지뢰가 있는지 확신하지 못할 때 표시하는 기호고, 깃발은 확실히 지뢰가 있다고 생각할 때 표시하는 기호입니다. 일반 칸에서 우클릭을 1번 하면 물음표 칸이 되고, 우클릭을 2번 하면 깃발 칸이 됩니다. 우클릭을 1번 더 하면 일반 칸으로 돌아갑니다.

열린 칸부터 생각해 보겠습니다. 열린 칸은 주변 지뢰 개수를 표시합니다. 주변 지뢰 개수는 0부터 8까지입니다. 닫힌 칸에는 지뢰가 있으면서 닫힌 칸과 지뢰가 없으면서 닫힌 칸이 있습니다. 물음표 칸과 깃발 칸도 마찬가지로 지뢰가 있는 칸과 없는 칸으로 구분됩니다. 왜 물음표 칸과 깃발 칸에서도 지뢰 존재 여부를 구분해야 할까요?