正文

玩转扫雷：轻松用JavaScript编写扫雷游戏攻略

/0 浏览量
0622

扫雷游戏是一款经典的逻辑益智游戏，它不仅考验玩家的反应速度，还锻炼了逻辑思维能力。在互联网时代，我们可以使用JavaScript轻松地实现一个扫雷游戏。本文将带您一步步了解如何用JavaScript编写一个简单的扫雷游戏。

游戏设计

在开始编写代码之前，我们需要先设计游戏的基本规则：

  1. 游戏区域：通常为一个n*n的网格，玩家需要点击每个格子。
  2. 雷区：在网格中随机放置一定数量的雷。
  3. 游戏目标：在规定时间内，正确点击所有非雷区域，且不点击到雷。

初始化游戏

首先，我们需要设置游戏区域的大小，并初始化雷区。

const size = 10; // 游戏区域大小
const mineCount = 20; // 雷的数量
let mines = []; // 雷的位置
let grid = []; // 游戏网格

function initGrid() {
  grid = Array.from({ length: size }, () => Array(size).fill(0));
  placeMines();
}

function placeMines() {
  let count = 0;
  while (count < mineCount) {
    const x = Math.floor(Math.random() * size);
    const y = Math.floor(Math.random() * size);
    if (!mines.some(([mx, my]) => mx === x && my === y)) {
      mines.push([x, y]);
      count++;
    }
  }
}

游戏界面

接下来，我们需要创建游戏界面。这里使用HTML和CSS来实现。

<div id="game"></div>

#game {
  display: grid;
  grid-template-columns: repeat(10, 50px);
  grid-template-rows: repeat(10, 50px);
}
.cell {
  width: 50px;
  height: 50px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
.mine {
  background-color: red;
}

游戏逻辑

现在我们来编写游戏逻辑。

let gameover = false;

function drawGrid() {
  const game = document.getElementById('game');
  game.innerHTML = '';
  grid.forEach((row, y) => {
    row.forEach((cell, x) => {
      const div = document.createElement('div');
      div.className = 'cell';
      div.dataset.x = x;
      div.dataset.y = y;
      div.onclick = cellClick;
      game.appendChild(div);
    });
  });
}

function cellClick(event) {
  const x = event.target.dataset.x;
  const y = event.target.dataset.y;
  if (gameover) return;
  if (grid[y][x] === -1) {
    alert('游戏结束，你点击到了雷！');
    gameover = true;
    return;
  }
  revealCell(x, y);
  checkWin();
}

function revealCell(x, y) {
  if (grid[y][x] === 0) {
    grid[y][x] = countMines(x, y);
    document.querySelector(`.cell[data-x="${x}"][data-y="${y}"]`).textContent = grid[y][x];
  }
  if (grid[y][x] === 0) {
    revealCell(x - 1, y);
    revealCell(x + 1, y);
    revealCell(x, y - 1);
    revealCell(x, y + 1);
  }
}

function countMines(x, y) {
  let count = 0;
  for (let i = -1; i <= 1; i++) {
    for (let j = -1; j <= 1; j++) {
      const nx = x + i;
      const ny = y + j;
      if (nx >= 0 && nx < size && ny >= 0 && ny < size) {
        if (mines.some(([mx, my]) => mx === nx && my === ny))) {
          count++;
        }
      }
    }
  }
  return count;
}

function checkWin() {
  let count = 0;
  grid.forEach((row) => {
    row.forEach((cell) => {
      if (cell !== -1) count++;
    });
  });
  if (count === size * size - mineCount) {
    alert('恭喜你，你赢了！');
    gameover = true;
  }
}

总结

通过以上步骤，我们成功地用JavaScript实现了一个简单的扫雷游戏。当然，这个游戏还有很多可以改进的地方，例如增加难度、添加计时器等。希望本文能帮助您更好地理解JavaScript编程，并激发您的创意。祝您玩得开心！

-- 展开阅读全文 --