當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML 实现扫雷游戏

發布時間：2023/12/10 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML 实现扫雷游戏小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML 實現掃雷游戲

文章目錄

- - HTML 實現掃雷游戲
  - - 項目原理：
    - 總結

項目原理：

掃雷游戲的規則很簡單：

游戲面板上有一些格子，每個格子中有一個數字（空白表示數字為 0）或是地雷，格子中的數字表示格子周圍格子中地雷的數量。玩家要做的就是把數字格子找出來，時間花的越少越好。

除邊界上的格子外，每個格子周圍有 8 個格子：上、下、左、右、4 個斜角。所以數字范圍是 0~8。

所以我們的算法如下：

根據用戶選擇的難易程度（有初、中、高三個級別，級別越高地雷和格子數量越多），隨機產生一定個數的地雷并隨機放在格子中。然后遍歷格子，計算每個格子中的數字，標記在格子上。玩家左鍵點擊格子時顯示格子內容（如果遇到地雷則挑戰失敗，游戲結束），右鍵點擊格子時標記格子為地雷，真到正確標記所有地雷并打開所有非地雷格子，挑戰成功，游戲結束。

小技巧：由于格子中數字范圍是 0~8，所以為了便于計算，我們可以把地雷所在的格子中的數字記為 9

項目的目錄結構：

minesweeper|__index.html|__index.css|__index.js|__jms.js

圖片下載地址：

https://labfile.oss.aliyuncs.com/courses/144/mine.pnghttps://labfile.oss.aliyuncs.com/courses/144/flag.png

下面將從頁面布局開始，一步一步完成所有代碼的編寫

首先我們需要有一個面板來顯示游戲信息，包括剩余地雷個數、所用時間、難度級別等。因為格子數量不是固定的，所以我們先不畫格子，放在 JS 代碼中繪制。

創建 index.html 文件，添加如下代碼并保存：

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>JavaScript版掃雷</title><link rel="stylesheet" type="text/css" href="index.css" /></head><body><div id="JMS_main" class="main"><table id="landmine"></table><div id="operation"><div class="tip">剩余雷數：<span class="light red" id="landMineCount">0</span> 個</div><div class="tip">持續時間: <span class="light f60" id="costTime">0</span> 秒</div><fieldset><legend>難度選擇：</legend><inputtype="radio"name="level"id="llevel"checked="checked"value="10"/><label for="llevel">初級（10*10）</label><br /><input type="radio" name="level" id="mlevel" value="15" /><labelfor="mlevel">中級（15*15）</label><br /><input type="radio" name="level" id="hlevel" value="20" /><labelfor="hlevel">高級（20*20）</label><br /></fieldset><input type="button" id="begin" value="開始游戲" /><br /><div class="tip txtleft">提示：<ul><li>1、點擊“開始游戲”游戲開始計時</li><li>2、游戲過程中點擊“開始游戲”將開始新游戲</li></ul></div></div></div><script src="jms.js"></script><script src="index.js"></script></body> </html>

然后需要調整面板上游戲信息的位置，添加一些樣式。在 index.css 中添加如下代碼并保存：

.main {margin: 10px auto;padding: 20px;background: #eee;width: 600px;zoom: 1; } .main table {background: #ccc;float: left; }.main table td {border: 2px outset #eee;font-size: 20px;width: 32px;height: 32px;text-align: center;cursor: pointer; }.main table td:hover {background-color: #aaa; } .main #operation {width: 180px;float: right;text-align: center; }.landMine {background-image: url(mine.png);background-position: center;background-repeat: no-repeat; }.main table td.normal {border: 2px solid #eee;background-color: #aaa; }.main table td.normal:hover {background-color: #aaa; }.flag {background-image: url(flag.png);background-position: center;background-repeat: no-repeat; }.main:after {clear: both;display: block;content: '';line-height: 0;height: 0;visibility: hidden; } .main .tip {font-size: 14px;margin: 5px; }.main .tip ul { }.main .tip ul li {margin: 5px 0;line-height: 20px; } .main .light {font-size: 30px; } .main .red {color: red; } .main .f60 {color: #f60; } .main input[type='button'] {padding: 2px 10px;margin: 5px;font-size: 20px;cursor: pointer; } .main .txtleft {text-align: left; }.main input[type='radio'], .main fieldset label {cursor: pointer; }.main fieldset {margin: 10px 0;line-height: 25px; }

完成這步后，瀏覽器打開看看

index.html。

效果如下：

左邊空白處用于顯示格子。

下面就要畫格子了，為了讓代碼更清晰，我們把游戲實現部分和調用部分分開，游戲實現部分放在跟 index.html 同目錄下的 jms.js 中，游戲調用部分放在同目錄下的 index.js 中。

畫格子需要傳入一些參數，如放格子的表格的 id，格子的數量（用行數和列數表示）。另外，游戲的其他數據也要進行初始化。

//在jms.js中 (function () {// 初始化掃雷對象，初始化數據var JMS = function (id,rowCount,colCount,minLandMineCount,maxLandMineCount) {if (!(this instanceof JMS))return new JMS(id,rowCount,colCount,minLandMineCount,maxLandMineCount);this.doc = document;this.table = this.doc.getElementById(id); //畫格子的表格this.cells = this.table.getElementsByTagName('td'); //小格子this.rowCount = rowCount || 10; //格子行數this.colCount = colCount || 10; //格子列數this.landMineCount = 0; //地雷個數this.markLandMineCount = 0; //標記的地雷個數this.minLandMineCount = minLandMineCount || 10; //地雷最少個數this.maxLandMineCount = maxLandMineCount || 20; //地雷最多個數this.arrs = []; //格子對應的數組this.beginTime = null; //游戲開始時間this.endTime = null; //游戲結束時間this.currentSetpCount = 0; //當前走的步數this.endCallBack = null; //游戲結束時的回調函數this.landMineCallBack = null; //標記為地雷時更新剩余地雷個數的回調函數this.doc.oncontextmenu = function () {//禁用右鍵菜單return false;};this.drawMap();};// 在 JMS 的原型中創建格子JMS.prototype = {//畫格子drawMap: function () {var tds = [];// 為了兼容瀏覽器if (window.ActiveXObject &&parseInt(navigator.userAgent.match(/msie ([\d.]+)/i)[1]) < 8) {// 創建引入新的 css 樣式文件var css = '#JMS_main table td{background-color:#888;}',// 獲取 head 標簽head = this.doc.getElementsByTagName('head')[0],// 創建 style 標簽style = this.doc.createElement('style');style.type = 'text/css';if (style.styleSheet) {// 將 css 樣式賦給 style 標簽style.styleSheet.cssText = css;} else {// 在 style 標簽中創建節點style.appendChild(this.doc.createTextNode(css));}// 再將 style 標簽創建為 head 標簽的子標簽head.appendChild(style);}// 循環創建表格for (var i = 0; i < this.rowCount; i++) {tds.push('<tr>');for (var j = 0; j < this.colCount; j++) {tds.push("<td id='m_" + i + '_' + j + "'></td>");}tds.push('</tr>');}this.setTableInnerHTML(this.table, tds.join(''));},//添加HTML到TablesetTableInnerHTML: function (table, html) {if (navigator && navigator.userAgent.match(/msie/i)) {// 在 table 的 owner document 內創建 divvar temp = table.ownerDocument.createElement('div');// 創建表格的 tbody 內容temp.innerHTML = '<table><tbody>' + html + '</tbody></table>';if (table.tBodies.length == 0) {var tbody = document.createElement('tbody');table.appendChild(tbody);}table.replaceChild(temp.firstChild.firstChild, table.tBodies[0]);} else {table.innerHTML = html;}},};window.JMS = JMS; })();

上面的代碼中，部分代碼是為了兼容 IE 瀏覽器，可忽略。

在 index.js 的調用代碼中，我們需要綁定難度選擇按鈕的事件，然后調用上面定義的 JMS，開始繪制格子。

然后在瀏覽器中打開 index.html，格子已經可以顯示出來了，效果如下：

點擊右邊的難度選擇，可以看到格子的數量變化。

現在，我們開始對游戲初始化，主要分三步：

把所有格子（代碼中用一個數組表示）初始化為 0；

隨機生成地雷個數，把地雷隨機放到數組中，數組項值設置為 9；

計算其他格子中的數字，值放入數組中。

在 jms.js 中 JMS.prototype 內加入如下代碼：

//在jms.js中JMS.prototype內加入 //初始化，一是設置數組默認值為0，二是確定地雷個數 init: function () {for (var i = 0; i < this.rowCount; i++) {this.arrs[i] = [];for (var j = 0; j < this.colCount; j++) {this.arrs[i][j] = 0;}}this.landMineCount = this.selectFrom(this.minLandMineCount, this.maxLandMineCount);this.markLandMineCount = 0;this.beginTime = null;this.endTime = null;this.currentSetpCount = 0; }, //把是地雷的數組項的值設置為9 landMine: function () {var allCount = this.rowCount * this.colCount - 1,tempArr = {};for (var i = 0; i < this.landMineCount; i++) {var randomNum = this.selectFrom(0, allCount),rowCol = this.getRowCol(randomNum);if (randomNum in tempArr) {i--;continue;}this.arrs[rowCol.row][rowCol.col] = 9;tempArr[randomNum] = randomNum;} }, //計算其他格子中的數字 calculateNoLandMineCount: function () {for (var i = 0; i < this.rowCount; i++) {for (var j = 0; j < this.colCount; j++) {if (this.arrs[i][j] == 9)continue;if (i > 0 && j > 0) {if (this.arrs[i - 1][j - 1] == 9)this.arrs[i][j]++;}if (i > 0) {if (this.arrs[i - 1][j] == 9)this.arrs[i][j]++;}if (i > 0 && j < this.colCount - 1) {if (this.arrs[i - 1][j + 1] == 9)this.arrs[i][j]++;}if (j > 0) {if (this.arrs[i][j - 1] == 9)this.arrs[i][j]++;}if (j < this.colCount - 1) {if (this.arrs[i][j + 1] == 9)this.arrs[i][j]++;}if (i < this.rowCount - 1 && j > 0) {if (this.arrs[i + 1][j - 1] == 9)this.arrs[i][j]++;}if (i < this.rowCount - 1) {if (this.arrs[i + 1][j] == 9)this.arrs[i][j]++;}if (i < this.rowCount - 1 && j < this.colCount - 1) {if (this.arrs[i + 1][j + 1] == 9)this.arrs[i][j]++;}}} }, //獲取一個隨機數 selectFrom: function (iFirstValue, iLastValue) {var iChoices = iLastValue - iFirstValue + 1;return Math.floor(Math.random() * iChoices + iFirstValue); }, //通過數值找到行數和列數 getRowCol: function (val) {return {row: parseInt(val / this.colCount),col: val % this.colCount}; },

給格子添加點擊事件

現在，該給格子添加點擊事件了，當左鍵點擊時，顯示出格子中的數字（如果是地雷就挑戰失敗，結束游戲），右鍵點擊時標記為地雷。

另外，第一次點擊格子（往往帶有運氣成分）如果周圍有空白區域會直接展開。

jms.js 中的這部分代碼如下：

//在jms.js中JMS.prototype內加入 //獲取元素 $: function (id) {return this.doc.getElementById(id); }, //給每個格子綁定點擊事件（左鍵和右鍵） bindCells: function () {var self = this;for (var i = 0; i < this.rowCount; i++) {for (var j = 0; j < this.colCount; j++) {(function (row, col) {self.$("m_" + i + "_" + j).onmousedown = function (e) {e = e || window.event;var mouseNum = e.button;var className = this.className;if (mouseNum == 2) {if (className == "flag") {this.className = "";self.markLandMineCount--;} else {this.className = "flag";self.markLandMineCount++;}if (self.landMineCallBack) {self.landMineCallBack(self.landMineCount - self.markLandMineCount);}} else if (className != "flag") {self.openBlock.call(self, this, row, col);}};})(i,j);}} }, //展開無雷區域 showNoLandMine: function (x, y) {for (var i = x - 1; i < x + 2; i++)for (var j = y - 1; j < y + 2; j++) {if (!(i == x && j == y)) {var ele = this.$("m_" + i + "_" + j);if (ele && ele.className == "") {this.openBlock.call(this, ele, i, j);}}} }, //顯示 openBlock: function (obj, x, y) {if (this.arrs[x][y] != 9) {this.currentSetpCount++;if (this.arrs[x][y] != 0) {obj.innerHTML = this.arrs[x][y];}obj.className = "normal";if (this.currentSetpCount + this.landMineCount == this.rowCount * this.colCount) {this.success();}obj.onmousedown = null;if (this.arrs[x][y] == 0) {this.showNoLandMine.call(this, x, y);}} else {this.failed();} }, //顯示地雷 showLandMine: function () {for (var i = 0; i < this.rowCount; i++) {for (var j = 0; j < this.colCount; j++) {if (this.arrs[i][j] == 9) {this.$("m_" + i + "_" + j).className = "landMine";}}} }, //顯示所有格子信息 showAll: function () {for (var i = 0; i < this.rowCount; i++) {for (var j = 0; j < this.colCount; j++) {if (this.arrs[i][j] == 9) {this.$("m_" + i + "_" + j).className = "landMine";} else {var ele=this.$("m_" + i + "_" + j);if (this.arrs[i][j] != 0)ele.innerHTML = this.arrs[i][j];ele.className = "normal";}}} }, //清除顯示的格子信息 hideAll: function () {for (var i = 0; i < this.rowCount; i++) {for (var j = 0; j < this.colCount; j++) {var tdCell = this.$("m_" + i + "_" + j);tdCell.className = "";tdCell.innerHTML = "";}} }, //刪除格子綁定的事件 disableAll: function () {for (var i = 0; i < this.rowCount; i++) {for (var j = 0; j < this.colCount; j++) {var tdCell = this.$("m_" + i + "_" + j);tdCell.onmousedown = null;}} },

添加游戲控制功能

到現在為止，游戲主要部分已經完成，下面要做的就是添加游戲控制功能，讓游戲正常運行起來，主要有以下幾步：

給游戲開始按鈕添加點擊事件，重置游戲參數；

游戲開始后開始記時；

游戲結束就停止記時并提示。

在 jms.js 中添加游戲入口和開始功能：

//在 jms.js 中 JMS.prototype 內加入 //游戲開始 begin: function () {this.currentSetpCount = 0;//開始的步數清零this.markLandMineCount = 0;this.beginTime = new Date();//游戲開始時間this.hideAll();this.bindCells(); }, //游戲結束 end: function () {this.endTime = new Date();//游戲結束時間if (this.endCallBack) {//如果有回調函數則調用this.endCallBack();} }, //游戲成功 success: function () {this.end();this.showAll();this.disableAll();alert("Congratulation！"); }, //游戲失敗 failed: function () {this.end();this.showAll();this.disableAll();alert("GAME OVER！"); }, //入口 play: function () {this.init();this.landMine();this.calculateNoLandMineCount(); },

在 index.js 中給開始按鈕添加事件，開始游戲，并顯示游戲時間和剩余地雷個數：

//在index.js的init中，jms = JMS("landmine", rowCount, colCount, minLandMineCount, maxLandMineCount); 之后加入 jms.endCallBack = function () {clearInterval(timeHandle); }; jms.landMineCallBack = function (count) {landMineCountElement.innerHTML = count; };//為“開始游戲”按鈕綁定事件 beginButton.onclick = function () {jms.play(); //初始化//顯示地雷個數landMineCountElement.innerHTML = jms.landMineCount;//開始jms.begin();//更新花費的時間timeHandle = setInterval(function () {timeShow.innerHTML = parseInt((new Date() - jms.beginTime) / 1000);}, 1000); };

jms.js 完整代碼

在 jms.js 中寫入以下代碼：

index.js 完整代碼

到此我們的網頁版掃雷就完成了。打開 index.html 文件，就可以開始游戲了。

總結

主要使用 JavaScript 實現了網頁版的經典小游戲掃雷。相信通過本項目，可以提高大家對 JavaScript 的理解與運用能力。此外，大家也可以學習到如何使用 JavaScript 語言來抽象、封裝游戲中的對象
源碼：
https://download.csdn.net/download/Deng872347348/85301530

總結

以上是生活随笔為你收集整理的HTML 实现扫雷游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
游戏