一款JavaScript開發的掃雷小游戲

　　之前，網（現已更名為：最火軟件站）給大家分享了關于網頁的小游戲，其中就有比較經典的網頁掃雷游戲（源碼下載），今天在某博客又看到一個JavaScript版掃雷游戲，但是效果上要差了許多，比如，沒有右鍵標注功能！

　　現在把源代碼分享出來，布局用的是table，所以FLM三個參數的第一個就是table的ID，第二個參數為最少地雷個數，第三個參數為最多地雷個數。

　　效果：

<style><!--#FLM_main {margin:50px auto;padding:20px;background:#EEE;zoom:1;width:650px;}#FLM_main table {border-collapse:collapse;background:#EEE;float:left;}#FLM_main table td {border:1px solid #CCC;font-size:20px;width:38px;height:38px;text-align:center;cursor:pointer;}#FLM_main table td:hover {background-color:#AAA;}#FLM_main #operation {width:180px;float:right;text-align:center;}#FLM_main:after {clear: both;display: block;content: "";line-height: 0;height: 0;visibility:hidden;}#FLM_main .tip {font-size:14px;margin:10px;}#FLM_main .tip ul {}#FLM_main .tip ul li {margin:5px 0;line-height:20px;}#FLM_main .light{font-size:30px;}#FLM_main .red {color:red;}#FLM_main .f60 {color:#F60;}#FLM_main input[type=button] {padding:2px 10px;margin:5px;font-size:20px;cursor:pointer;}#FLM_main .txtleft {text-align:left;}--></style><script type="text/javascript">// <![CDATA[(function () {var FLM = function (id, minLandMineCount, maxLandMineCount) {if (!(this instanceof FLM))return new FLM(id, minLandMineCount, maxLandMineCount);var table = document.getElementById(id);this.doc = document;this.cells = table.getElementsByTagName("td");this.rowCount = 10;this.colCount = 10;this.landMineCount = 0;this.minLandMineCount = minLandMineCount || 10;this.maxLandMineCount = maxLandMineCount || 20;this.arrs = [];this.beginTime = null;this.endTime = null;this.currentSetpCount = 0;};FLM.prototype = {initArrs: 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);},landMine: function () {var allCount = this.rowCount * this.colCount - 1;for (var i = 0; i < this.landMineCount; i++) {var randomNum = this.selectFrom(0, allCount),rowCol = this.getRowCol(randomNum);this.arrs[rowCol.row][rowCol.col] = 9;}},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]++;}}}},bindCells: function () {var self=this;for (var i = 0; i < this.rowCount; i++) {for (var j = 0; j < this.colCount; j++) {this.doc.getElementById("m" + i.toString() + j).onclick = (function (row,col) {return function () {if (self.arrs[row][col] != 9) {self.currentSetpCount++;this.innerHTML = self.arrs[row][col];this.style.backgroundColor = "green";if (self.currentSetpCount + self.landMineCount == self.rowCount * self.colCount) {self.success();}} else {self.failed();}this.onclick = null;}})(i,j);}}},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.doc.getElementById("m" + i.toString() + j).style.backgroundColor = "red";}}}},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.doc.getElementById("m" + i.toString() + j).style.backgroundColor = "red";} else {this.doc.getElementById("m" + i.toString() + j).innerHTML = this.arrs[i][j];}}}},hideAll: function () {for (var i = 0; i < this.rowCount; i++) {for (var j = 0; j < this.colCount; j++) {var tdCell=this.doc.getElementById("m" + i.toString() + j);tdCell.style.backgroundColor = "transparent";tdCell.innerHTML = "";}}},begin: function () {this.currentSetpCount = 0;this.beginTime = new Date();this.hideAll();this.bindCells();},end: function () {this.endTime = new Date();},success: function () {this.end();alert("Congratulation！");},failed: function () {this.end();this.showAll();alert("GAME OVER！");},getRowCol: function (val) {return {row: parseInt(val / this.colCount),col: val % this.colCount};},selectFrom: function (iFirstValue,iLastValue) {var iChoices = iLastValue - iFirstValue + 1;return Math.floor(Math.random() * iChoices + iFirstValue);},play: function () {this.initArrs();this.landMine();this.calculateNoLandMineCount();}};window.FLM = FLM;})();window.onload = function () {var flm = FLM("landmine", 15, 40),timeHandle = null,doc = document,landMineCountElement = doc.getElementById("landMineCount"),timeShow = doc.getElementById("costTime"),showLandMineButton = doc.getElementById("showLandMine"),showAllButton = doc.getElementById("showAll"),beginButton = doc.getElementById("begin");flm.play();landMineCountElement.innerHTML = flm.landMineCount;showLandMineButton.onclick = function () {flm.showLandMine();};showAllButton.onclick = function () {flm.showAll();};beginButton.onclick = function () {flm.play();landMineCountElement.innerHTML = flm.landMineCount;flm.begin();showLandMineButton.onclick = function () {if (confirm("顯示地雷游戲將結束？"))flm.failed();};showAllButton.onclick = function () {if (confirm("顯示全部游戲將結束？"))flm.failed();};timeHandle = setInterval(function () {timeShow.innerHTML = parseInt((new Date() - flm.beginTime) / 1000);}, 1000);};}// ]]></script><div id="FLM_main"><table id="landmine"><tbody><tr><td id="m00"> </td><td id="m01"> </td><td id="m02"> </td><td id="m03"> </td><td id="m04"> </td><td id="m05"> </td><td id="m06"> </td><td id="m07"> </td><td id="m08"> </td><td id="m09"> </td></tr><tr><td id="m10"> </td><td id="m11"> </td><td id="m12"> </td><td id="m13"> </td><td id="m14"> </td><td id="m15"> </td><td id="m16"> </td><td id="m17"> </td><td id="m18"> </td><td id="m19"> </td></tr><tr><td id="m20"> </td><td id="m21"> </td><td id="m22"> </td><td id="m23"> </td><td id="m24"> </td><td id="m25"> </td><td id="m26"> </td><td id="m27"> </td><td id="m28"> </td><td id="m29"> </td></tr><tr><td id="m30"> </td><td id="m31"> </td><td id="m32"> </td><td id="m33"> </td><td id="m34"> </td><td id="m35"> </td><td id="m36"> </td><td id="m37"> </td><td id="m38"> </td><td id="m39"> </td></tr><tr><td id="m40"> </td><td id="m41"> </td><td id="m42"> </td><td id="m43"> </td><td id="m44"> </td><td id="m45"> </td><td id="m46"> </td><td id="m47"> </td><td id="m48"> </td><td id="m49"> </td></tr><tr><td id="m50"> </td><td id="m51"> </td><td id="m52"> </td><td id="m53"> </td><td id="m54"> </td><td id="m55"> </td><td id="m56"> </td><td id="m57"> </td><td id="m58"> </td><td id="m59"> </td></tr><tr><td id="m60"> </td><td id="m61"> </td><td id="m62"> </td><td id="m63"> </td><td id="m64"> </td><td id="m65"> </td><td id="m66"> </td><td id="m67"> </td><td id="m68"> </td><td id="m69"> </td></tr><tr><td id="m70"> </td><td id="m71"> </td><td id="m72"> </td><td id="m73"> </td><td id="m74"> </td><td id="m75"> </td><td id="m76"> </td><td id="m77"> </td><td id="m78"> </td><td id="m79"> </td></tr><tr><td id="m80"> </td><td id="m81"> </td><td id="m82"> </td><td id="m83"> </td><td id="m84"> </td><td id="m85"> </td><td id="m86"> </td><td id="m87"> </td><td id="m88"> </td><td id="m89"> </td></tr><tr><td id="m90"> </td><td id="m91"> </td><td id="m92"> </td><td id="m93"> </td><td id="m94"> </td><td id="m95"> </td><td id="m96"> </td><td id="m97"> </td><td id="m98"> </td><td id="m99"> </td></tr></tbody></table><div id="operation"><div class="tip">地雷個數：<span id="landMineCount" class="light red">0</span></div><div class="tip">消耗時間: <span id="costTime" class="light f60">0</span> s</div><input id="showLandMine" type="button" value="顯示地雷" /><br /><input id="showAll" type="button" value="顯示全部" /><br /><input id="begin" type="button" value="開始游戲" /><br /><div class="tip txtleft">提示：<ul><li>1、點擊“開始游戲”游戲開始計時</li><li>2、游戲過程中點擊“顯示地雷”或“顯示全部”游戲將會結束</li><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></div>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈