扫雷小游戏制作教程：用HTML5和JavaScript打造经典游戏

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

扫雷小游戏制作教程：用HTML5和JavaScript打造经典游戏
- 体验地址
- 准备工作
- 创建HTML结构
- 添加CSS样式
- 编写JavaScript逻辑
- 测试游戏
- 全部代码
- 结语
- 往期精彩回顾

扫雷小游戏制作教程：用HTML5和JavaScript打造经典游戏

在这篇文章中，我们将一起学习如何使用HTML5和JavaScript来制作一个经典的扫雷小游戏。通过这个教程，你将了解如何创建游戏界面、处理用户交互以及实现游戏逻辑。即使你是编程新手，也能跟随步骤完成这个项目。

体验地址

洛可可白⚡️扫雷

准备工作

首先，确保你的计算机上安装了文本编辑器，如Notepad++、Sublime Text或Visual Studio Code。这些工具将帮助你编写和编辑代码。

创建HTML结构

打开你的文本编辑器，创建一个新的HTML文件，并输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>洛可可白扫雷</title><style>/* 在这里添加CSS样式 */</style>
</head>
<body><div class="bigBox"><div id="controls"><form><label for="level">难度级别：</label><select id="level"><option value="easy">简单</option><option value="medium">中等</option><option value="hard">困难</option></select><button id="reset">重新开始</button></form></div><table id="board"></table></div><script>// 在这里添加JavaScript代码</script>
</body>
</html>

这是我们游戏的基本结构。<head>部分包含了页面的元数据和样式定义，<body>部分则是游戏的主要内容。

添加CSS样式

在<style>标签内，我们将添加一些CSS样式来美化我们的扫雷游戏。这包括游戏布局、控制面板和表格样式。

/* 游戏布局样式 */
.bigBox {background-color: rgb(163, 159, 159);width: 40%;margin: 5% auto;text-align: center;padding: 20px;
}#reset {width: 100px;font-size: 15px;
}table {border-collapse: collapse;margin: 30px auto;
}td {width: 30px;height: 30px;text-align: center;vertical-align: middle;border: 1px solid #ccc;
}button {width: 100%;height: 100%;padding: 0;margin: 0;font-size: 16px;font-weight: bold;color: #fff;background-color: #333;border: none;
}

编写JavaScript逻辑

现在，我们将在<script>标签内添加JavaScript代码，这是游戏的核心部分。我们将创建游戏参数配置、初始化游戏、处理用户点击事件、检查游戏胜利条件等。

// 游戏参数配置
const config = {easy: {rows: 8,cols: 8,mines: 10,},medium: {rows: 10,cols: 10,mines: 20,},hard: {rows: 12,cols: 12,mines: 30,},
};// 初始化游戏
function init() {// ...（省略代码以节省空间，详见原代码）
}// 用户点击格子的处理函数
function clickCell(row, col) {// ...（省略代码以节省空间，详见原代码）
}// 更新地雷数目显示
function updateMinesCount() {// ...（省略代码以节省空间，详见原代码）
}// 显示游戏结束
function showGameOver(win) {// ...（省略代码以节省空间，详见原代码）
}// 检查游戏是否胜利
function checkWin() {// ...（省略代码以节省空间，详见原代码）
}// 初始化游戏
init();

在这个脚本中，我们首先定义了游戏的难度级别配置，然后创建了初始化游戏的函数init。我们还定义了处理用户点击事件的函数clickCell，更新地雷数目的函数updateMinesCount，显示游戏结束的函数showGameOver，以及检查游戏胜利条件的函数checkWin。最后，我们调用init函数来初始化游戏。

测试游戏

保存你的HTML文件，并在浏览器中打开它。你应该能看到一个扫雷游戏的界面。选择难度级别后，点击格子开始游戏。如果你踩到地雷，游戏会结束；如果你成功避开所有地雷，恭喜你，你赢了！

全部代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>洛可可白⚡️扫雷</title><style>/* 游戏布局样式 */.bigBox {background-color: rgb(163, 159, 159);width: 40%;margin: 5% auto;text-align: center;padding: 20px;}#reset {width: 100px;font-size: 15px;}table {border-collapse: collapse;margin: 30px auto;}td {width: 30px;height: 30px;text-align: center;vertical-align: middle;border: 1px solid #ccc;}button {width: 100%;height: 100%;padding: 0;margin: 0;font-size: 16px;font-weight: bold;color: #fff;background-color: #333;border: none;}/* 控制面板样式 */#controls {margin-top: 20px;}</style></head><body><div class="bigBox"><div id="controls"><form><label for="level">难度级别：</label><select id="level"><option value="easy">简单</option><option value="medium">中等</option><option value="hard">困难</option></select><button id="reset">重新开始</button></form></div><table id="board"></table></div></body><script>// 游戏参数配置const config = {easy: {rows: 8,cols: 8,mines: 10,},medium: {rows: 10,cols: 10,mines: 20,},hard: {rows: 12,cols: 12,mines: 30,},};// 初始化游戏let board = document.getElementById("board");let level = document.getElementById("level");let reset = document.getElementById("reset");let cells = [];let gameover = false;let minesLeft = 0;let minesCount = 0;let rows, cols, mines;reset.addEventListener("click", init);level.addEventListener("change", function () {init();});function init() {// 初始化游戏参数let levelConfig = config[level.value];rows = levelConfig.rows;cols = levelConfig.cols;mines = levelConfig.mines;minesLeft = mines;minesCount = 0;gameover = false;// 初始化游戏布局board.innerHTML = "";cells = [];for (let i = 0; i < rows; i++) {let row = [];let tr = document.createElement("tr");for (let j = 0; j < cols; j++) {let td = document.createElement("td");let button = document.createElement("button");button.addEventListener("click", function () {if (!gameover) {clickCell(i, j);}});td.appendChild(button);tr.appendChild(td);row.push({ button: button, hasMine: false, revealed: false });}cells.push(row);board.appendChild(tr);}// 初始化地雷for (let i = 0; i < mines; i++) {let row, col;do {row = Math.floor(Math.random() * rows);col = Math.floor(Math.random() * cols);} while (cells[row][col].hasMine);cells[row][col].hasMine = true;}// 更新地雷数目显示updateMinesCount();}function clickCell(row, col) {let cell = cells[row][col];if (cell.revealed) {return;}if (cell.hasMine) {revealMines();showGameOver(false);return;}cell.revealed = true;cell.button.style.backgroundColor = "#ddd";let minesAround = countMinesAround(row, col);if (minesAround > 0) {cell.button.textContent = minesAround;} else {revealNeighbors(row, col);}if (checkWin()) {showGameOver(true);}}function revealNeighbors(row, col) {for (let i = row - 1; i <= row + 1; i++) {for (let j = col - 1; j <= col + 1; j++) {if (i >= 0 &&i < rows &&j >= 0 &&j < cols &&!(i == row && j == col)) {clickCell(i, j);}}}}function countMinesAround(row, col) {let count = 0;for (let i = row - 1; i <= row + 1; i++) {for (let j = col - 1; j <= col + 1; j++) {if (i >= 0 && i < rows && j >= 0 && j < cols && cells[i][j].hasMine) {count++;}}}return count;}function revealMines() {for (let i = 0; i < rows; i++) {for (let j = 0; j < cols; j++) {if (cells[i][j].hasMine) {cells[i][j].button.style.backgroundColor = "#f00";}}}}function updateMinesCount() {console.log("这是哈哈", minesLeft);// minesCountElem.textContent = minesLeft;}function showGameOver(win) {gameover = true;let message = win ? "You Win!" : "You Lose!";alert(message);}function checkWin() {for (let i = 0; i < rows; i++) {for (let j = 0; j < cols; j++) {let cell = cells[i][j];if (!cell.hasMine && !cell.revealed) {return false;}}}return true;}init();</script>
</html>

结语

恭喜你，你已经成功创建了一个扫雷小游戏！这个教程涵盖了从创建基本的HTML结构到添加CSS样式，再到编写JavaScript交互逻辑的全过程。通过这个项目，你不仅学会了如何制作一个小游戏，还对前端开发有了基本的了解。随着你技能的提升，你可以尝试添加更多的功能，比如计时器、得分系统或者更复杂的游戏逻辑。祝你编程愉快！

如果对你有帮助，点赞、收藏、关注是我更新的动力！👋🌟🚀

往期精彩回顾

打造经典游戏：HTML5与CSS3实现俄罗斯方块

文章浏览阅读1.1k次，点赞31次，收藏22次。

打造你的贪吃蛇游戏：HTML、CSS与JavaScript的完美结合

文章浏览阅读858次，点赞24次，收藏9次。

打造你的HTML5打地鼠游戏：零基础入门教程

文章浏览阅读729次，点赞16次，收藏25次。

入门指南：使用uni-app构建跨平台应用

文章浏览阅读1.2k次，点赞29次，收藏13次。