扫雷小游戏制作教程：用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次。

	<!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>

	/* 游戏布局样式 */
	.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;
	}

	// 游戏参数配置
	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();

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

文章目录

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

体验地址

准备工作

创建HTML结构

添加CSS样式

编写JavaScript逻辑

测试游戏

全部代码

结语

往期精彩回顾

微信扫一扫：分享