Html + JS 写一个扫雷小游戏

<!DOCTYPE html>
<html>
<head>
  <title>扫雷游戏</title>
  <style>
    .cell {
      width: 20px;
      height: 20px;
      border: 1px solid #ccc;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      background-color: #eee;
      font-weight: bold;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>扫雷游戏</h1>
  <div id="board"></div>
  
  <script>
    // 游戏参数
    var rows = 10; // 行数
    var cols = 10; // 列数
    var mineCount = 10; // 地雷数量
    
    // 游戏状态
    var board = []; // 游戏面板的数据结构
    var gameOver = false; // 游戏结束标志
    
    // 创建游戏面板
    function createBoard() {
      var boardElement = document.getElementById('board');
      
      for (var i = 0; i < rows; i++) {
        var row = [];
        for (var j = 0; j < cols; j++) {
          var cell = document.createElement('div'); // 创建方块元素
          cell.className = 'cell'; // 添加 CSS 类名
          cell.setAttribute('data-row', i); // 设置自定义属性 data-row，表示行号
          cell.setAttribute('data-col', j); // 设置自定义属性 data-col，表示列号
          cell.addEventListener('click', cellClick); // 添加点击事件监听器
          boardElement.appendChild(cell); // 将方块元素添加到游戏面板
          row.push({
            element: cell,
            hasMine: false, // 是否包含地雷
            revealed: false // 是否已经揭示
          });
        }
        board.push(row);
        boardElement.appendChild(document.createElement('br')); // 每行结束添加换行符
      }
    }
    
    // 初始化地雷
    function initMines() {
      var count = 0;
      
      while (count < mineCount) {
        var row = Math.floor(Math.random() * rows); // 随机生成行号
        var col = Math.floor(Math.random() * cols); // 随机生成列号
        
        if (!board[row][col].hasMine) {
          board[row][col].hasMine = true; // 标记该方块包含地雷
          count++;
        }
      }
    }
    
    // 点击方块
    function cellClick(event) {
      if (gameOver) {
        return;
      }
      
      var cell = event.target; // 获取被点击的方块元素
      var row = parseInt(cell.getAttribute('data-row')); // 获取方块的行号
      var col = parseInt(cell.getAttribute('data-col')); // 获取方块的列号
      
      if (board[row][col].hasMine) {
        gameOver = true; // 游戏结束
        cell.style.backgroundColor = 'red'; // 设置被点击的地雷方块的背景颜色为红色
        alert('Game Over');
      } else {
        revealCell(row, col); // 揭示方块
      }
    }
    
    // 揭示方块
    function revealCell(row, col) {
      var cell = board[row][col].element; // 获取方块元素
      
      if (board[row][col].revealed) {
        return; // 如果方块已经揭示，则不执行任何操作
      }
      
      board[row][col].revealed = true; // 标记方块已经揭示
      cell.style.backgroundColor = '#ddd'; // 设置方块的背景颜色
      
      var mineCount = countAdjacentMines(row, col); // 计算方块周围的地雷数量
      if (mineCount > 0) {
        cell.innerText = mineCount; // 如果周围有地雷，则在方块中显示地雷数量
      } else {
        revealAdjacentCells(row, col); // 如果周围没有地雷，则揭示相邻的方块
      }
    }
    
    // 计算相邻方块的地雷数量
    function countAdjacentMines(row, col) {
      var count = 0;
      for (var i = Math.max(0, row - 1); i <= Math.min(rows -1, row + 1); i++) {
        for (var j = Math.max(0, col - 1); j <= Math.min(cols - 1, col + 1); j++) {
          if (board[i][j].hasMine) {
            count++; // 如果相邻方块包含地雷，则数量加一
          }
        }
      }
      return count; // 返回相邻方块的地雷数量
    }
    
    // 揭示相邻的方块
    function revealAdjacentCells(row, col) {
      for (var i = Math.max(0, row - 1); i <= Math.min(rows - 1, row + 1); i++) {
        for (var j = Math.max(0, col - 1); j <= Math.min(cols - 1, col + 1); j++) {
          if (!board[i][j].hasMine && !board[i][j].revealed) {
            revealCell(i, j); // 如果相邻方块不包含地雷且未揭示，则揭示方块
          }
        }
      }
    }
    
    // 初始化游戏
    function initGame() {
      createBoard(); // 创建游戏面板
      initMines(); // 初始化地雷
    }
    
    // 开始游戏
    initGame();
  </script>
</body>
</html>