当前位置： 首页 > news >正文

html5：从零构建经典游戏-扫雷游戏

news 来源：原创 2025/4/28 5:11:28

扫雷是Windows系统自带的经典游戏，陪伴了许多人的童年。

本文将详细解析一个用HTML、CSS和JavaScript实现的扫雷游戏代码，带你了解其背后的实现原理。

游戏概述

这个扫雷游戏实现包含以下核心功能：

  • 10×10的游戏棋盘

  • 15个随机分布的地雷

  • 左键点击揭开格子

  • 右键点击标记地雷

  • 自动展开空白区域

  • 胜利/失败判定

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>扫雷游戏</title><!-- CSS样式 -->
</head>
<body><h1>扫雷游戏</h1><div id="game-board"></div><!-- JavaScript代码 -->
</body>
</html>

结构非常简单，只有一个标题和游戏板容器。所有游戏逻辑都通过JavaScript动态生成。

CSS样式设计

CSS部分定义了游戏的外观：

.cell {width: 30px;height: 30px;border: 1px solid #ccc;/* 其他样式 */
}
.cell.revealed {background-color: #fff;
}
.cell.mine {background-color: #ff4444;
}
.cell.flagged {background-color: #ffcc00;
}

  • 基本格子样式：灰色背景，浅灰色边框

  • 已揭开格子：白色背景

  • 地雷格子：红色背景

  • 标记格子：黄色背景

JavaScript游戏逻辑

1. 游戏初始化

javascript

const BOARD_SIZE = 10;
const MINE_COUNT = 15;
let board = [];
let gameOver = false;

定义了游戏常量：棋盘大小和地雷数量，以及游戏状态变量。

2. 创建游戏板

createBoard()函数负责初始化游戏：

  1. 设置CSS Grid布局

  2. 创建格子DOM元素并添加到游戏板

  3. 初始化游戏数据结构

  4. 放置地雷并计算数字

javascript

function createBoard() {// 设置Grid布局gameBoard.style.gridTemplateColumns = `repeat(${BOARD_SIZE}, 30px)`;// 创建格子for (let row = 0; row < BOARD_SIZE; row++) {board[row] = [];for (let col = 0; col < BOARD_SIZE; col++) {// 创建DOM元素const cell = document.createElement('div');// 添加事件监听cell.addEventListener('click', handleCellClick);cell.addEventListener('contextmenu', handleRightClick);// 初始化游戏数据board[row][col] = { mine: false, revealed: false, flagged: false, count: 0 };}}placeMines();calculateNumbers();
}

3. 随机放置地雷

placeMines()函数随机放置指定数量的地雷：

javascript

function placeMines() {let minesPlaced = 0;while (minesPlaced < MINE_COUNT) {const row = Math.floor(Math.random() * BOARD_SIZE);const col = Math.floor(Math.random() * BOARD_SIZE);if (!board[row][col].mine) {board[row][col].mine = true;minesPlaced++;}}
}

使用while循环确保放置足够数量的地雷，避免重复放置。

4. 计算周围地雷数

calculateNumbers()为每个非地雷格子计算周围地雷数量：

javascript

function calculateNumbers() {for (let row = 0; row < BOARD_SIZE; row++) {for (let col = 0; col < BOARD_SIZE; col++) {if (board[row][col].mine) continue;let count = 0;// 检查周围8个格子for (let i = -1; i <= 1; i++) {for (let j = -1; j <= 1; j++) {const newRow = row + i;const newCol = col + j;// 边界检查if (newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE && board[newRow][newCol].mine) {count++;}}}board[row][col].count = count;}}
}

5. 处理玩家点击

左键点击处理函数handleCellClick：

javascript

function handleCellClick(event) {if (gameOver) return;const cell = event.target;const row = parseInt(cell.dataset.row);const col = parseInt(cell.dataset.col);revealCell(row, col);
}

右键点击处理函数handleRightClick用于标记地雷：

javascript

function handleRightClick(event) {event.preventDefault(); // 阻止上下文菜单if (gameOver) return;const cell = event.target;const row = parseInt(cell.dataset.row);const col = parseInt(cell.dataset.col);if (!board[row][col].revealed) {board[row][col].flagged = !board[row][col].flagged;cell.classList.toggle('flagged', board[row][col].flagged);}
}

6. 揭开格子逻辑

revealCell()是游戏核心函数，处理格子揭开逻辑：

javascript

function revealCell(row, col) {// 已揭开或已标记则返回if (board[row][col].revealed || board[row][col].flagged) return;const cell = document.querySelector(`.cell[data-row='${row}'][data-col='${col}']`);board[row][col].revealed = true;cell.classList.add('revealed');// 踩到地雷if (board[row][col].mine) {cell.classList.add('mine');gameOver = true;alert('游戏结束！你踩到了地雷！');return;}// 显示周围地雷数cell.textContent = board[row][col].count || '';// 如果是空白格子，自动展开周围if (board[row][col].count === 0) {for (let i = -1; i <= 1; i++) {for (let j = -1; j <= 1; j++) {const newRow = row + i;const newCol = col + j;// 边界检查if (newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE) {revealCell(newRow, newCol);}}}}checkWin();
}

7. 胜利判定

checkWin()检查玩家是否已揭开所有安全格子：

javascript

function checkWin() {let unrevealedSafeCells = 0;for (let row = 0; row < BOARD_SIZE; row++) {for (let col = 0; col < BOARD_SIZE; col++) {if (!board[row][col].mine && !board[row][col].revealed) {unrevealedSafeCells++;}}}if (unrevealedSafeCells === 0) {gameOver = true;alert('恭喜你，你赢了！');}
}

游戏特点

  1. 递归展开：当点击空白格子时，会自动展开相邻的所有空白格子

  2. 即时反馈：点击地雷立即结束游戏，显示失败

  3. 标记功能：右键点击可以标记疑似地雷的格子

  4. 响应式设计：使用CSS Grid布局，适应不同屏幕大小

总结

这个扫雷游戏实现展示了如何使用基本的Web技术创建经典游戏。

通过合理的数据结构和算法设计，实现了游戏的核心逻辑。代码结构清晰，适合初学者学习和扩展。

html代码

如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>扫雷游戏</title><style>body {font-family: Arial, sans-serif;text-align: center;}#game-board {display: grid;margin: 20px auto;border: 2px solid #333;}.cell {width: 30px;height: 30px;border: 1px solid #ccc;text-align: center;line-height: 30px;cursor: pointer;background-color: #eee;}.cell.revealed {background-color: #fff;cursor: default;}.cell.mine {background-color: #ff4444;}.cell.flagged {background-color: #ffcc00;}</style>
</head>
<body><h1>扫雷游戏</h1><div id="game-board"></div><script>const BOARD_SIZE = 10;const MINE_COUNT = 15;let board = [];let gameOver = false;function createBoard() {const gameBoard = document.getElementById('game-board');gameBoard.style.gridTemplateColumns = `repeat(${BOARD_SIZE}, 30px)`;for (let row = 0; row < BOARD_SIZE; row++) {board[row] = [];for (let col = 0; col < BOARD_SIZE; col++) {const cell = document.createElement('div');cell.classList.add('cell');cell.dataset.row = row;cell.dataset.col = col;cell.addEventListener('click', handleCellClick);cell.addEventListener('contextmenu', handleRightClick);gameBoard.appendChild(cell);board[row][col] = { mine: false, revealed: false, flagged: false, count: 0 };}}placeMines();calculateNumbers();}function placeMines() {let minesPlaced = 0;while (minesPlaced < MINE_COUNT) {const row = Math.floor(Math.random() * BOARD_SIZE);const col = Math.floor(Math.random() * BOARD_SIZE);if (!board[row][col].mine) {board[row][col].mine = true;minesPlaced++;}}}function calculateNumbers() {for (let row = 0; row < BOARD_SIZE; row++) {for (let col = 0; col < BOARD_SIZE; col++) {if (board[row][col].mine) continue;let count = 0;for (let i = -1; i <= 1; i++) {for (let j = -1; j <= 1; j++) {const newRow = row + i;const newCol = col + j;if (newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE && board[newRow][newCol].mine) {count++;}}}board[row][col].count = count;}}}function handleCellClick(event) {if (gameOver) return;const cell = event.target;const row = parseInt(cell.dataset.row);const col = parseInt(cell.dataset.col);revealCell(row, col);}function handleRightClick(event) {event.preventDefault();if (gameOver) return;const cell = event.target;const row = parseInt(cell.dataset.row);const col = parseInt(cell.dataset.col);if (!board[row][col].revealed) {board[row][col].flagged = !board[row][col].flagged;cell.classList.toggle('flagged', board[row][col].flagged);}}function revealCell(row, col) {if (board[row][col].revealed || board[row][col].flagged) return;const cell = document.querySelector(`.cell[data-row='${row}'][data-col='${col}']`);board[row][col].revealed = true;cell.classList.add('revealed');if (board[row][col].mine) {cell.classList.add('mine');gameOver = true;alert('游戏结束！你踩到了地雷！');return;}cell.textContent = board[row][col].count || '';if (board[row][col].count === 0) {for (let i = -1; i <= 1; i++) {for (let j = -1; j <= 1; j++) {const newRow = row + i;const newCol = col + j;if (newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE) {revealCell(newRow, newCol);}}}}checkWin();}function checkWin() {let unrevealedSafeCells = 0;for (let row = 0; row < BOARD_SIZE; row++) {for (let col = 0; col < BOARD_SIZE; col++) {if (!board[row][col].mine && !board[row][col].revealed) {unrevealedSafeCells++;}}}if (unrevealedSafeCells === 0) {gameOver = true;alert('恭喜你，你赢了！');}}createBoard();</script>
</body>
</html>

相关文章：

  • 继续 那个错误分析
  • django admin 中更新表数据 之后再将数据返回管理界面
  • Ubuntu 22.04.4操作系统初始化详细配置
  • 音视频之H.265/HEVC熵编码
  • 登高架设作业指的是什么？有什么安全操作规程？
  • JavaScript 模板字符串：更优雅的字符串处理方式
  • 后端响应巨量数据，如何优化性能？
  • 03 基于 STM32 的温度控制系统
  • 【数据结构】·励志大厂版（复习+刷题）：二叉树
  • 新型“电力寄生虫“网络钓鱼攻击瞄准能源企业与知名品牌
  • 第11章 安全网络架构和组件（一）
  • 基于SpringBoot+PostgreSQL+ROS Java库机器人数据可视化管理系统
  • 数智读书笔记系列031《HIS内核设计之道——医院信息系统规划设计系统思维》书籍简介与读书笔记
  • 电池的寿命
  • 为什么从Word复制到PPT的格式总是乱掉？
  • 【网络原理】从零开始深入理解TCP的各项特性和机制.(三)
  • SQL 处理重复数据之技巧（Techniques for Handling Duplicate Data with SQL）
  • Kafka HA集群配置搭建与SpringBoot使用示例总结
  • 设计一个新能源汽车控制系统开发框架，并提供一个符合ISO 26262标准的模块化设计方案。
  • zynq7035的arm一秒钟最多可以支持触发多少次中断
  • 女乘客遭顺风车甩客、深夜丢高速服务区，滴滴霸道回应：赔五百元
  • 伊朗爆炸港口已恢复货物进出口工作
  • 新加坡选情渐热：播客、短视频各显神通，总理反对身份政治
  • 闲暇时间的“堕落”
  • 同款瑞幸咖啡竟差了6元，开了会员仍比别人贵！客服回应
  • 海南旅文局通报游客入住酒店港币被调包：成立调查组赴陵水调查