一款JavaScript开发的扫雷小游戏

<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刷新本页</div>