用 JavaScript 编写扫雷游戏的综合指南

前端

2023-10-14 12:24:11

探索扫雷游戏的奥秘：深入浅出 JavaScript 实现

扫雷简介

扫雷是一款备受喜爱的单人游戏，自 1989 年问世以来就风靡全球。游戏的目标是揭开一个网格中的方块，找到隐藏的地雷，同时避免踩中它们。

游戏规则

扫雷游戏在矩形网格上进行，网格的大小由玩家选择。网格中的每个方块要么包含地雷，要么是空方块。游戏开始时，所有方块都隐藏着。

玩家通过点击方块来揭开它们。如果玩家揭开了一个包含地雷的方块，游戏就结束了。如果玩家揭开了一个空方块，该方块及其周围的八个方块都会被揭开。

如果玩家揭开了一个包含数字的方块，该数字表示该方块周围的地雷数量。玩家可以使用这些数字来推断出哪些方块包含地雷，并标记这些方块。

JavaScript 代码实现

为了在 JavaScript 中实现扫雷游戏，我们需要：

创建一个游戏网格
随机放置地雷
计算每个方块周围的地雷数量
创建一个游戏界面
使用事件监听器监听玩家的点击
揭开玩家点击的方块

// 创建游戏网格
var grid = [];
for (var i = 0; i < 10; i++) {
  grid[i] = [];
  for (var j = 0; j < 10; j++) {
    grid[i][j] = 0;
  }
}

// 随机放置地雷
for (var i = 0; i < 10; i++) {
  var x = Math.floor(Math.random() * 10);
  var y = Math.floor(Math.random() * 10);
  grid[x][y] = 1;
}

// 计算每个方块周围的地雷数量
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    if (grid[i][j] === 1) {
      for (var x = -1; x <= 1; x++) {
        for (var y = -1; y <= 1; y++) {
          if (i + x >= 0 && i + x < 10 && j + y >= 0 && j + y < 10 && grid[i + x][j + y] !== 1) {
            grid[i + x][j + y]++;
          }
        }
      }
    }
  }
}

// 创建游戏界面
var table = document.createElement('table');
for (var i = 0; i < 10; i++) {
  var tr = document.createElement('tr');
  for (var j = 0; j < 10; j++) {
    var td = document.createElement('td');
    td.id = i + ',' + j;
    td.addEventListener('click', function() {
      reveal(this.id);
    });
    tr.appendChild(td);
  }
  table.appendChild(tr);
}
document.body.appendChild(table);

// 揭开方块
function reveal(id) {
  var coords = id.split(',');
  var x = parseInt(coords[0]);
  var y = parseInt(coords[1]);
  if (grid[x][y] === 1) {
    alert('你输了！');
  } else {
    var td = document.getElementById(id);
    td.innerHTML = grid[x][y];
    if (grid[x][y] === 0) {
      for (var i = -1; i <= 1; i++) {
        for (var j = -1; j <= 1; j++) {
          if (x + i >= 0 && x + i < 10 && y + j >= 0 && y + j < 10 && grid[x + i][y + j] === 0 && document.getElementById((x + i) + ',' + (y + j)).innerHTML === '') {
            reveal((x + i) + ',' + (y + j));
          }
        }
      }
    }
  }
}