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

前端
字数统计: 2k   |   阅读时长≈ 10 分钟

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

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

体验地址

洛可可白⚡️扫雷
在这里插入图片描述

准备工作

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

创建HTML结构

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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样式来美化我们的扫雷游戏。这包括游戏布局、控制面板和表格样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* 游戏布局样式 */
.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代码，这是游戏的核心部分。我们将创建游戏参数配置、初始化游戏、处理用户点击事件、检查游戏胜利条件等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 游戏参数配置
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文件，并在浏览器中打开它。你应该能看到一个扫雷游戏的界面。选择难度级别后，点击格子开始游戏。如果你踩到地雷，游戏会结束；如果你成功避开所有地雷，恭喜你，你赢了！

全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!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交互逻辑的全过程。通过这个项目，你不仅学会了如何制作一个小游戏，还对前端开发有了基本的了解。随着你技能的提升，你可以尝试添加更多的功能，比如计时器、得分系统或者更复杂的游戏逻辑。祝你编程愉快！

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2022-2024 何福海
  • 访问人数: | 浏览次数:

请我喝杯奶茶吧~

支付宝
微信