用js 写个 扫雷游戏
时间: 2023-05-12 16:06:26 浏览: 63
好的,以下是一个简单的用 JavaScript 编写的扫雷游戏:
```javascript
// 定义游戏区域大小
const ROWS = 10;
const COLS = 10;
const MINES = 10;
// 定义游戏状态
const GAME_STATE = {
PLAYING: "playing",
WON: "won",
LOST: "lost",
};
// 定义格子状态
const CELL_STATE = {
HIDDEN: "hidden",
REVEALED: "revealed",
FLAGGED: "flagged",
};
// 初始化游戏区域
let board = [];
for (let i = 0; i < ROWS; i++) {
board[i] = [];
for (let j = 0; j < COLS; j++) {
board[i][j] = {
isMine: false,
state: CELL_STATE.HIDDEN,
value: 0,
};
}
}
// 随机生成地雷
let minesPlaced = 0;
while (minesPlaced < MINES) {
let row = Math.floor(Math.random() * ROWS);
let col = Math.floor(Math.random() * COLS);
if (!board[row][col].isMine) {
board[row][col].isMine = true;
minesPlaced++;
}
}
// 计算每个格子周围的地雷数量
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
if (!board[i][j].isMine) {
let count = 0;
if (i > 0 && j > 0 && board[i - 1][j - 1].isMine) count++;
if (i > 0 && board[i - 1][j].isMine) count++;
if (i > 0 && j < COLS - 1 && board[i - 1][j + 1].isMine) count++;
if (j > 0 && board[i][j - 1].isMine) count++;
if (j < COLS - 1 && board[i][j + 1].isMine) count++;
if (i < ROWS - 1 && j > 0 && board[i + 1][j - 1].isMine) count++;
if (i < ROWS - 1 && board[i + 1][j].isMine) count++;
if (i < ROWS - 1 && j < COLS - 1 && board[i + 1][j + 1].isMine) count++;
board[i][j].value = count;
}
}
}
// 定义游戏状态和剩余地雷数量
let gameState = GAME_STATE.PLAYING;
let minesLeft = MINES;
// 获取游戏区域元素
let boardElement = document.getElementById("board");
// 渲染游戏区域
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
let cellElement = document.createElement("div");
cellElement.classList.add("cell");
cellElement.dataset.row = i;
cellElement.dataset.col = j;
cellElement.addEventListener("click", handleCellClick);
cellElement.addEventListener("contextmenu", handleCellRightClick);
boardElement.appendChild(cellElement);
}
}
// 处理格子左键点击事件
function handleCellClick(event) {
if (gameState !== GAME_STATE.PLAYING) return;
let row = parseInt(event.target.dataset.row);
let col = parseInt(event.target.dataset.col);
let cell = board[row][col];
if (cell.state === CELL_STATE.HIDDEN) {
if (cell.isMine) {
gameState = GAME_STATE.LOST;
revealBoard();
alert("You lost!");
} else {
revealCell(row, col);
checkForWin();
}
}
}
// 处理格子右键点击事件
function handleCellRightClick(event) {
event.preventDefault();
if (gameState !== GAME_STATE.PLAYING) return;
let row = parseInt(event.target.dataset.row);
let col = parseInt(event.target.dataset.col);
let cell = board[row][col];
if (cell.state === CELL_STATE.HIDDEN) {
cell.state = CELL_STATE.FLAGGED;
event.target.classList.add("flagged");
minesLeft--;
updateMinesLeft();
checkForWin();
} else if (cell.state === CELL_STATE.FLAGGED) {
cell.state = CELL_STATE.HIDDEN;
event.target.classList.remove("flagged");
minesLeft++;
updateMinesLeft();
}
}
// 更新剩余地雷数量
function updateMinesLeft() {
let minesLeftElement = document.getElementById("mines-left");
minesLeftElement.textContent = minesLeft;
}
// 检查是否胜利
function checkForWin() {
let allCellsRevealed = true;
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
let cell = board[i][j];
if (!cell.isMine && cell.state !== CELL_STATE.REVEALED) {
allCellsRevealed = false;
break;
}
}
}
if (allCellsRevealed && minesLeft === 0) {
gameState = GAME_STATE.WON;
revealBoard();
alert("You won!");
}
}
// 揭示所有格子
function revealBoard() {
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
revealCell(i, j);
}
}
}
// 揭示指定格子
function revealCell(row, col) {
let cell = board[row][col];
if (cell.state !== CELL_STATE.HIDDEN) return;
cell.state = CELL_STATE.REVEALED;
let cellElement = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
cellElement.classList.remove("hidden");
if (cell.isMine) {
cellElement.classList.add("mine");
} else {
cellElement.classList.add("revealed");
cellElement.textContent = cell.value;
if (cell.value === 0) {
// 揭示周围的格子
if (row > 0 && col > 0) revealCell(row - 1, col - 1);
if (row > 0) revealCell(row - 1, col);
if (row > 0 && col < COLS - 1) revealCell(row - 1, col + 1);
if (col > 0) revealCell(row, col - 1);
if (col < COLS - 1) revealCell(row, col + 1);
if (row < ROWS - 1 && col > 0) revealCell(row + 1, col - 1);
if (row < ROWS - 1) revealCell(row + 1, col);
if (row < ROWS - 1 && col < COLS - 1) revealCell(row + 1, col + 1);
}
}
}
// 初始化剩余地雷数量
updateMinesLeft();
```
希望能对你有所帮助!