text: const table = document.createElement("table");
  const section = document.querySelector("section");
  const levelButton = document.querySelector("#levelbutton");
  const modal = document.querySelector("#modal");
  const timer = document.querySelector("#timer");
  const span = document.querySelector("#close");
  const easyset = document.querySelector("#easy");
  const normalset = document.querySelector("#normal");
  const hardset = document.querySelector("#hard");
  const userset = document.querySelector("#user");
  
  let gameLevel = 'easy';
  let rows;
  let cells;
  let mines;
  let data = [];
  let openCount = 0;
  let startTime;
  let interval;
  
  const STAT = {
      NORMAL: -1,
      FLAG: -2,
      FLAG_MINE: -3,
      MINE: -4,
      OPENED: 0
  }
  
  levelButton.addEventListener("click", openModal);
  span.addEventListener("click", closeModal);
  easyset.addEventListener("click", setLevel);
  normalset.addEventListener("click", setLevel);
  hardset.addEventListener("click", setLevel);
  
  function openModal() {
      modal.style.display = "block";
  }
  
  function closeModal() {
      modal.style.display = "none";
  }
  
  function setLevel(event) {
      if (event.target.id === 'easy') {
          gameLevel = 'easy';
      } else if (event.target.id === 'normal') {
          gameLevel = 'normal';
      } else if (event.target.id === 'hard') {
          gameLevel = 'hard';
      }
      closeModal();
      initialize();
  }
  
  function initialize() {
      table.textContent = '';
      data = [];
      openCount = 0;
      timer.textContent = '000초';
      if (gameLevel === 'easy') {
          rows = 10;
          cells = 10;
          mines = 10;
      } else if (gameLevel === 'normal') {
          rows = 15;
          cells = 15;
          mines = 40;
      } else if (gameLevel === 'hard') {
          rows = 20;
          cells = 20;
          mines = 99;
      }
      plantMine();
      drawTable();
      flagnavi.textContent = mines;
      startTime = new Date();
      interval = setInterval(() => {
          const time = Math.floor((new Date() - startTime) / 1000);
          const setTime = String(time).padStart(3, "0");
          timer.textContent = `${setTime}초`;
      }, 1000);
  }
  
  function plantMine() {
      const newArray = Array(rows * cells).fill();
      const candidate = newArray.map((elem, i) => i);
      const shuffle = [];
      while (candidate.length > rows * cells - mines) {
          const randomNum = Math.floor(Math.random() * candidate.length);
          const chosen = candidate.splice(randomNum, 1)[0];
          shuffle.push(chosen);
      }
      for (let i = 0; i < rows; i++) {
          const rowData = [];
          data.push(rowData);
          for (let j = 0; j < cells; j++) {
              rowData.push(STAT.NORMAL);
          }
      }
      for (let i = 0; i < shuffle.length; i++) {
          const rowIndex = Math.floor(shuffle[i] / cells);
          const cellIndex = shuffle[i] % cells;
          data[rowIndex][cellIndex] = STAT.MINE;
      }
      return data;
  }
  
  function drawTable() {
      data.forEach((rows) => {
          const tr = document.createElement("tr");
          rows.forEach((cells) => {
              const td = document.createElement("td");
              tr.appendChild(td);
          });
          table.appendChild(tr);
          table.addEventListener('click', onLeftClick);
          table.addEventListener('contextmenu', onRightClick);
          section.appendChild(table);
      });
  }
  
  function onLeftClick(event) {
      const target = event.target;
      const rowIndex = target.parentNode.rowIndex;
      const cellIndex = target.cellIndex;
      const cellData = data[rowIndex][cellIndex];
      if (cellData === STAT.FLAG && STAT.FLAG_MINE) {
          return;
      } else if (cellData === STAT.MINE) {
          target.textContent = '';
          target.className = 'mineopened';
          clearInterval(interval);
          table.removeEventListener('click', onLeftClick);
          table.removeEventListener('contextmenu', onRightClick);
          setTimeout(() => {
              alert('패배했습니다! 다시 시작하세요!');
              initialize();
          }, 500);
      } else if (cellData === STAT.NORMAL) {
          openaround(rowIndex, cellIndex);
      }
  }
  
  function onRightClick(event) {
      event.preventDefault();
      const target = event.target;
      const rowIndex = target.parentNode.rowIndex;
      const cellIndex = target.cellIndex;
      const cellData = data[rowIndex][cellIndex];
      if (cellData === STAT.NORMAL) {
          if (countFlag() !== mines) {
              data[rowIndex][cellIndex] = STAT.FLAG;
              target.className = 'flag';
          }
      } else if (cellData === STAT.FLAG) {
          data[rowIndex][cellIndex] = STAT.NORMAL;
          target.className = '';
      } else if (cellData === STAT.MINE) {
          if (countFlag() !== mines) {
              data[rowIndex][cellIndex] = STAT.FLAG_MINE;
              target.className = 'flag';
          }
      } else if (cellData === STAT.FLAG_MINE) {
          data[rowIndex][cellIndex] = STAT.MINE;
          target.className = '';
      }
      countFlag();
  }
  
  function openaround(rowIndex, cellIndex) {
      setTimeout(() => {
          const count = open(rowIndex, cellIndex);
          if (count === 0) {
              openaround(rowIndex - 1, cellIndex - 1);
              openaround(rowIndex - 1, cellIndex);
              openaround(rowIndex - 1, cellIndex + 1);
              openaround(rowIndex, cellIndex - 1);
              openaround(rowIndex, cellIndex + 1);
              openaround(rowIndex + 1, cellIndex - 1);
              openaround(rowIndex + 1, cellIndex);
              openaround(rowIndex + 1, cellIndex + 1);
          }
      }, 0);
      countFlag();
  }
  
  function open(rowIndex, cellIndex) {
      if (data[rowIndex]?.[cellIndex] >= STAT.OPENED) return;
      const target = table.children[rowIndex]?.children[cellIndex];
      if (!target) return;
      const count = countMine(rowIndex, cellIndex);
      target.textContent = count || '';
      target.className = 'opened';
      data[rowIndex][cellIndex] = count;
      openCount++;
      if (openCount === rows * cells - mines) {
          const time = (new Date() - startTime) / 1000;
          clearInterval(interval);
          table.removeEventListener('click', onLeftClick);
          table.removeEventListener('contextmenu', onRightClick);
          setTimeout(() => {
              alert(`승리했습니다! ${time}초가 걸렸습니다.`);
              initialize();
          }, 500);
      }
      return count;
  }
  
  function countMine(rowIndex, cellIndex) {
      const mine = [STAT.MINE, STAT.FLAG_MINE];
      let count = 0;
      mine.includes(data[rowIndex - 1]?.[cellIndex - 1]) && count++;
      mine.includes(data[rowIndex - 1]?.[cellIndex]) && count++;
      mine.includes(data[rowIndex - 1]?.[cellIndex + 1]) && count++;
      mine.includes(data[rowIndex][cellIndex - 1]) && count++;
      mine.includes(data[rowIndex][cellIndex + 1]) && count++;
      mine.includes(data[rowIndex + 1]?.[cellIndex - 1]) && count++;
      mine.includes(data[rowIndex + 1]?.[cellIndex]) && count++;
      mine.includes(data[rowIndex + 1]?.[cellIndex + 1]) && count++;
      return count;
  }
  
  function countFlag() {
      const flag = document.getElementsByClassName("flag");
      let numberOfFlag = flag.length;
      flagnavi.textContent = mines - numberOfFlag;
      return numberOfFlag;
  }
  
  initialize();
  