一款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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!