html

JavaScript版扫雷

剩余雷数：0 个

持续时间: 0 秒

难度选择：初级（10*10）
中级（15*15）
高级（20*20）

提示：

1、点击“开始游戏”游戏开始计时
2、游戏过程中点击“开始游戏”将开始新游戏

<script src="../js/jms.js"></script>
<script src="../js/text.js"></script>

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;
}

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.prototype = {//画格子drawMap: function () {var tds = [];if (window.ActiveXObject &&parseInt(navigator.userAgent.match(/msie ([\d.]+)/i)[1]) < 8) {var css = '#JMS_main table td{background-color:#888;}',head = this.doc.getElementsByTagName('head')[0],style = this.doc.createElement('style');style.type = 'text/css';if (style.styleSheet) {style.styleSheet.cssText = css;} else {style.appendChild(this.doc.createTextNode(css));}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('</td>');}this.setTableInnerHTML(this.table, tds.join(''));},//添加HTML到TablesetTableInnerHTML: function (table, html) {if (navigator && navigator.userAgent.match(/msie/i)) {var temp = table.ownerDocument.createElement('div');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;}},//初始化，一是设置数组默认值为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;},//把是地雷的数组项的值设置为9landMine: 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,};},//获取元素$: 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;}}},//游戏开始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();},
};window.JMS = JMS;

})();

JS-text.js

//为“开始游戏”按钮绑定事件
beginButton.onclick = function () {
jms.play(); //初始化

//显示地雷个数
landMineCountElement.innerHTML = jms.landMineCount;//开始
jms.begin();//更新花费的时间
timeHandle = setInterval(function () {timeShow.innerHTML = parseInt((new Date() - jms.beginTime) / 1000);
}, 1000);

};
}

运行效果

网页版扫雷（HTML/CSS/JS实践）相关推荐

HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序员 ...
HTML5七夕情人节表白网页(结婚倒计时) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤结婚倒计时❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序员表白 ...
❤送女朋友生日快乐祝福网页制作❤（HTML+CSS+JS）
❤女朋友生日快乐祝福网页制作❤(HTML+CSS+JS) 程序员情人节表白网页, 生日祝福网页制作 ❤520/表白/七夕情人节/求婚❤专用html5+css3+js 生日快乐网站模板 HTML生日快乐 ...
html网页设计期末大作业——生物科技化妆品网页(6页) HTML+CSS+JS网页设计期末课程大作业
html网页设计期末大作业--生物科技化妆品网页(6页) HTML+CSS+JS网页设计期末课程大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. ...
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结 ...
Web前端---响应式室内家具网页设计（HTML+CSS+JS）
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...
Web前端期末大作业-响应式室内家具网页设计（HTML+CSS+JS）实现
作者主页:Java李杨勇文末获取源码联系临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想 ...
网页拼图游戏(html css js)实现
注:学习的实验楼中的网页拼图课程基于 HTML+CSS+JavaScript 实现网页版的拼图游戏.实现过程中将用到 HTML5,CSS3 及 JavaScript 相关知识.完成这个项目,可以进 ...
webstorm打开网页_网页前端之HTML+CSS+JS
古柏高枝银杏实,几千年物到而今. 玉纤雪腕白相照,烂银壳破玻璃明. 银杏(学名:Ginkgo biloba),落叶乔木,树冠圆锥形,枝轮生,叶互生,在长枝上散生,二歧状分叉叶脉,果具长梗,下垂,倒卵圆 ...
网页自动切换html css js,HTML页面自动清理js、css文件的缓存（自动添加版本号）_HTML/Xhtml_网页制作...
这篇文章主要介绍了HTML页面自动清理js.css文件的缓存(自动添加版本号),小编觉得挺不错的,现在分享给大家HTML源码,也给大家做个参考.对HTML感兴趣的小伙伴们一起跟随小编过来看看吧在we ...

网页版扫雷（HTML/CSS/JS实践）

html

css

JS-jms.js

JS-text.js

运行效果

网页版扫雷（HTML/CSS/JS实践）相关推荐

最新文章

热门文章