js实现一个高级难度扫雷游戏
时间: 2024-01-20 22:04:14 浏览: 68
好的,以下是一个基于 JavaScript 实现的高级难度扫雷游戏的简单示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Advanced Minesweeper</title>
<style>
.board {
display: flex;
flex-wrap: wrap;
max-width: 600px;
margin: 0 auto;
}
.cell {
width: 30px;
height: 30px;
border: 1px solid black;
text-align: center;
line-height: 30px;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.cell.hidden {
background-color: #ccc;
}
.cell.bomb {
background-color: red;
color: white;
}
.cell.flag {
background-color: yellow;
color: black;
}
.cell.clicked {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="board" class="board"></div>
<script>
// 游戏设置
const ROWS = 16;
const COLS = 30;
const BOMBS = 99;
// 游戏状态
let board = [];
let gameOver = false;
let flags = 0;
let clicks = 0;
// 初始化游戏面板
function initBoard() {
for (let i = 0; i < ROWS; i++) {
board[i] = [];
for (let j = 0; j < COLS; j++) {
board[i][j] = { bomb: false, count: 0, hidden: true, flag: false };
}
}
// 随机放置炸弹
let bombs = 0;
while (bombs < BOMBS) {
let row = Math.floor(Math.random() * ROWS);
let col = Math.floor(Math.random() * COLS);
if (!board[row][col].bomb) {
board[row][col].bomb = true;
bombs++;
}
}
// 计算每个单元格周围的炸弹数量
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
if (!board[i][j].bomb) {
let count = 0;
for (let r = i - 1; r <= i + 1; r++) {
for (let c = j - 1; c <= j + 1; c++) {
if (r >= 0 && r < ROWS && c >= 0 && c < COLS && board[r][c].bomb) {
count++;
}
}
}
board[i][j].count = count;
}
}
}
// 渲染游戏面板
let container = document.getElementById('board');
container.innerHTML = '';
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
let cell = document.createElement('div');
cell.className = 'cell hidden';
cell.dataset.row = i.toString();
cell.dataset.col = j.toString();
cell.addEventListener('click', handleCellClick);
cell.addEventListener('contextmenu', handleCellRightClick);
container.appendChild(cell);
}
}
}
// 处理单元格左键点击事件
function handleCellClick(event) {
if (gameOver) return;
let row = parseInt(event.target.dataset.row);
let col = parseInt(event.target.dataset.col);
let cell = board[row][col];
if (cell.flag || !cell.hidden) return;
if (cell.bomb) {
gameOver = true;
event.target.classList.add('bomb');
alert('Game over!');
} else {
cell.hidden = false;
event.target.classList.add('clicked');
if (cell.count === 0) {
for (let r = row - 1; r <= row + 1; r++) {
for (let c = col - 1; c <= col + 1; c++) {
if (r >= 0 && r < ROWS && c >= 0 && c < COLS) {
handleCellClick({ target: document.querySelector(`[data-row="${r}"][data-col="${c}"]`) });
}
}
}
}
clicks++;
if (clicks === ROWS * COLS - BOMBS) {
gameOver = true;
alert('You win!');
}
}
}
// 处理单元格右键点击事件
function handleCellRightClick(event) {
event.preventDefault();
if (gameOver) return;
let row = parseInt(event.target.dataset.row);
let col = parseInt(event.target.dataset.col);
let cell = board[row][col];
if (!cell.hidden) return;
if (cell.flag) {
cell.flag = false;
event.target.classList.remove('flag');
flags--;
} else {
cell.flag = true;
event.target.classList.add('flag');
flags++;
}
}
// 初始化游戏
initBoard();
</script>
</body>
</html>
```
这个示例实现了一个 16 行 30 列、99 个炸弹的高级难度扫雷游戏。游戏的主要逻辑包括:
- 初始化游戏面板,并随机放置炸弹。
- 计算每个单元格周围的炸弹数量。
- 处理单元格左键点击事件,如果点中了炸弹则游戏结束,否则显示单元格周围的炸弹数量,并递归地展开周围的空白单元格。
- 处理单元格右键点击事件,标记或取消标记单元格为炸弹。
- 当所有非炸弹单元格都被点击时,游戏胜利。
希望这个示例能够帮助你完成一个高级难度扫雷游戏的实现。