绘制网格
完成上述步骤后,我们需要绘制网格。为了使代码更清晰,我们将游戏实现部分和调用部分分开。游戏实现部分放在与 index.html
同一目录下的 jms.js
中,游戏调用部分放在同一目录下的 index.js
中。
要绘制网格,我们需要传入一些参数,比如要放置网格的表格的 id
,以及单元格数量(用行数和列数表示)。此外,还需要初始化其他与游戏相关的数据。
jms.js 部分
在 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 = this.doc.createElement("style");
style.type = "text/css";
if (style.styleSheet) {
// 将 CSS 样式赋给样式标签
style.styleSheet.cssText = css;
} else {
// 在样式标签中创建节点
style.appendChild(this.doc.createTextNode(css));
}
// 将样式标签作为 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
setTableInnerHTML: function (table, html) {
if (navigator && navigator.userAgent.match(/msie/i)) {
// 在表格的所有者文档中创建一个 div
var 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 部分
在 index.js
的调用代码中,我们需要绑定难度选择按钮的事件,然后调用我们上面定义的 JMS 来开始绘制网格。
在 index.js
中添加以下代码并保存:
var jms = null,
timeHandle = null;
window.onload = function () {
var radios = document.getElementsByName("level");
for (var i = 0, j = radios.length; i < j; i++) {
radios[i].onclick = function () {
if (jms != null)
if (jms.landMineCount > 0)
if (!confirm("你确定要结束当前游戏吗?")) return false;
var value = this.value;
init(value, value, (value * value) / 5 - value, (value * value) / 5);
document.getElementById("JMS_main").style.width =
value * 40 + 180 + 60 + "px";
};
}
init(10, 10);
};
function init(rowCount, colCount, minLandMineCount, maxLandMineCount) {
var doc = document,
landMineCountElement = doc.getElementById("landMineCount"),
timeShow = doc.getElementById("costTime"),
beginButton = doc.getElementById("begin");
if (jms != null) {
clearInterval(timeHandle);
timeShow.innerHTML = 0;
landMineCountElement.innerHTML = 0;
}
jms = JMS("landmine", rowCount, colCount, minLandMineCount, maxLandMineCount);
}
然后在浏览器中打开 index.html
,应该会显示网格。效果如下:
点击右侧的难度选择,查看单元格数量的变化。