js扫雷代码

扫雷是一款经典的桌面游戏，玩家需要在一个网格中找出所有非雷区格子，同时避开隐藏的雷。下面是一个简单的JavaScript扫雷游戏的实现代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Minesweeper</title>
<style>
  .cell { width: 20px; height: 20px; border: 1px solid #ccc; display: inline-block; margin: 2px; text-align: center; line-height: 20px; }
  .mine { background-color: red; }
  .number { background-color: #ddd; }
</style>
</head>
<body>
<div id="game-board"></div>
<script src="minesweeper.js"></script>
</body>
</html>

JavaScript部分（minesweeper.js）

const ROWS = 10;
const COLS = 10;
const MINES = 10;

function createBoard() {
  const board = document.getElementById('game-board');
  let html = '';
  for (let row = 0; row < ROWS; row++) {
    html += '<div class="row">';
    for (let col = 0; col < COLS; col++) {
      html += `<div class="cell" data-row="${row}" data-col="${col}"></div>`;
    }
    html += '</div>';
  }
  board.innerHTML = html;
}

function placeMines() {
  const cells = document.querySelectorAll('.cell');
  let minesPlaced = 0;
  while (minesPlaced < MINES) {
    const index = Math.floor(Math.random() * cells.length);
    const cell = cells[index];
    if (!cell.classList.contains('mine')) {
      cell.classList.add('mine');
      minesPlaced++;
    }
  }
}

function calculateNumbers() {
  const cells = document.querySelectorAll('.cell');
  cells.forEach(cell => {
    if (!cell.classList.contains('mine')) {
      const row = cell.getAttribute('data-row');
      const col = cell.getAttribute('data-col');
      let minesNearby = 0;
      for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
          const newRow = parseInt(row) + i;
          const newCol = parseInt(col) + j;
          if (newRow >= 0 && newRow < ROWS && newCol >= 0 && newCol < COLS) {
            const neighbor = document.querySelector(`.cell[data-row="${newRow}"][data-col="${newCol}"]`);
            if (neighbor.classList.contains('mine')) {
              minesNearby++;
            }
          }
        }
      }
      if (minesNearby > 0) {
        cell.classList.add('number');
        cell.textContent = minesNearby;
      }
    }
  });
}

function revealCell(event) {
  const cell = event.target;
  if (cell.classList.contains('mine')) {
    alert('Game Over!');
    resetGame();
  } else {
    cell.classList.add('revealed');
    if (cell.textContent === '') {
      const row = cell.getAttribute('data-row');
      const col = cell.getAttribute('data-col');
      for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
          const newRow = parseInt(row) + i;
          const newCol = parseInt(col) + j;
          if (newRow >= 0 && newRow < ROWS && newCol >= 0 && newCol < COLS) {
            const neighbor = document.querySelector(`.cell[data-row="${newRow}"][data-col="${newCol}"]`);
            revealCell({ target: neighbor });
          }
        }
      }
    }
  }
}

function resetGame() {
  const cells = document.querySelectorAll('.cell');
  cells.forEach(cell => {
    cell.classList.remove('mine', 'number', 'revealed');
    cell.textContent = '';
  });
  placeMines();
  calculateNumbers();
}

createBoard();
placeMines();
calculateNumbers();

document.getElementById('game-board').addEventListener('click', revealCell);

基础概念

网格布局：游戏界面通常由一个二维网格组成，每个格子可以是雷或非雷。
随机分布：雷在网格中的位置是随机分配的。
数字标记：非雷格子显示周围雷的数量。
递归展开：点击一个非雷格子时，如果周围没有雷，则会自动展开相邻的非雷格子。

优势

简单直观：游戏规则简单，易于上手。
逻辑挑战：玩家需要运用逻辑推理来避免雷区。
可扩展性：游戏难度可以通过调整网格大小和雷的数量来改变。

应用场景

休闲娱乐：适合在空闲时间进行放松。
编程教学：可以作为教授JavaScript和DOM操作的实例。
团队建设：团队成员可以一起玩，增进合作与沟通。

可能遇到的问题及解决方法

游戏结束逻辑不正确：确保点击到雷时能够正确触发游戏结束的提示，并重置游戏。
格子展开不正确：检查递归展开逻辑，确保所有相邻的非雷格子都能正确展开。
性能问题：如果网格非常大，递归展开可能会导致性能问题。可以考虑优化算法或限制递归深度。

这个简单的扫雷游戏实现了一个基本的扫雷逻辑，可以根据需要进一步扩展功能，比如添加计时器、记录最佳成绩等。

页面内容是否对你有帮助？

有帮助

没帮助

js扫雷代码

HTML部分

JavaScript部分（minesweeper.js）

基础概念

优势

应用场景

可能遇到的问题及解决方法

相关·内容

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐