javascript代码实例教程-JS扫雷游戏
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS扫雷游戏，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
JS扫雷游戏 （各浏览器兼容）
效果图：
HTML源码：
[htML]
<!DOCTYPE html PubLIC "-//W3C//DTD HTML 4.01 TransITional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<;meta http-equiv="Content-type" content="text/html;">
<title>扫雷</title>
<style type="text/css">
#container {
width: 670px;
height: 670px;
background-color: #eeffee;
margin: 10px auto;
}
.block {
width: 20px;
height: 20px;
background-color: white;
border: 1px solid;
float: left;
margin: 0 0 0 0px;
text-align: center;
}
.block2 {
width: 10px;
height: 10px;
background-color: red;
float: left;
}
.openedBlockNormal {
width: 20px;
height: 20px;
background-color: green;
border: 1px solid;
float: left;
margin: 0 0 0 0px;
text-align: center;
}
.openedBlockBomb {
width: 20px;
height: 20px;
background-color: red;
border: 1px solid;
float: left;
margin: 0 0 0 0px;
text-align: center;
}
.openedBlockEmpty {
width: 20px;
height: 20px;
background-color: yellow;
border: 1px solid;
float: left;
margin: 0 0 0 0px;
text-align: center;
}
</style>
<script type="text/javascript">
VAR EventUtil = new Object;
EventUtil.addEvent = function(oTarget, sEventType, funName) {
if (oTarget.addEventListener) {//for DOM;
oTarget.addEventListener(sEventType, funName, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, funName);
} else {
oTarget["on" + sEventType] = funName;
}
};
EventUtil.removeEvent = function(oTarget, sEventType, funName) {
if (oTarget.removeEventListener) {//for DOM;
oTarget.removeEventListener(sEventType, funName, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, funName);
} else {
oTarget["on" + sEventType] = null;
}
};
</script>
<script type="text/javascript" src="bomb.js"></script>
</head>
<body>
<p id="containers" style="cursor: pointer"></p>
</body>
<script>
// this class stands for eight direction of every block.
function Direction() {
this.up = null;
this.right = null;
this.down = null;
this.left = null;
this.leftUp = null;
this.rightUp = null;
this.leftDown = null;
this.rightDown = null;
}
// every block object stands for one block in the page.
function Block(classname) {
// blocks around.
this.neighbors = new Direction();// [up,rightUp,right,rightDown,down,leftDown,left,leftUp]
// html element. p used here.
this.html = null;
// position of this block.
this.index = -1;
// is this block a bomb?
this.isBomb = false;
// how many bombs around of this blocks.
this.bombNumAround = -1;
// html css style
this.className = className;
// is it already opened?
this.isOpen = false;
// do some PReparation for this block;
this.init();
}
// calculate how many bombs of around.
Block.prototype.calcBombAround = function() {
if (!this.isBomb) {
var bombNumber = 0;
for ( var p in this.neighbors) {
if (typeof (this.neighbors[p]) != "function") {
if (null != this.neighbors[p] && this.neighbors[p].isBomb) {
bombNumber++;
}
}
}
this.bombNumAround = bombNumber;
}
};
// return html element.
Block.prototype.getHtml = function() {
return this.html;
};
Block.prototype.init = function() {
var that = this;
// create a html element.
this.html = document.createElement("p");
// adding mouse over handler for this block. change background color for
// this block.
EventUtil.addEvent(this.html, "mouseover", function(evt) {
var element = evt.target ? evt.target : evt.srcElement;
element.style.backgroundColor = "#eeAB6F";
});
// remove the style which were added in mouseover handler.
EventUtil.addEvent(this.html, "mouseout", function(evt) {
var element = evt.target ? evt.target : evt.srcElement;
element.style.backgroundColor = "";
element.style.cursor = "";
});
// user click some block.
EventUtil.addEvent(this.html, "mousedown", function(evt) {
// right click button.
if (evt.button == 2) {
// if this block already indicate as a bomb, then change to normal
// block.
if (that.getStyle() == "openedBlockBomb") {
that.changeStyle("block");
} else if (that.getStyle() == "block") {
// if this block is a normal block, indicate as a bomb.
that.changeStyle("openedBlockBomb");
}
} else {// left click!
// open it
that.open();
}
});
// setting defalut style name.
this.changeStyle(this.className);
};
// change css style.
Block.prototype.changeStyle = function(styleName) {
this.html.setattribute("class", styleName);
this.html.setAttribute("className", styleName);
};
// getting csss style
Block.prototype.getStyle = function() {
var style = this.html.getAttribute("class");
if (style == null || typeof (style) == "undefined") {
style = this.html.getAttribute("className");
}
return style;
};
Block.prototype.open = function() {
// if there is no bomb around, change style as an empty block.
if (this.bombNumAround == 0) {
this.changeStyle("openedBlockEmpty");
} else if (this.bombNumAround > 0) {
// setting bomb number to inner html.
this.html.innerHTML = this.bombNumAround;
this.changeStyle("openedBlockNormal");
} else {
// setting style as a bomb.
this.changeStyle("openedBlockBomb");
alert("bomb!!");
}
this.isOpen = true;
// if 0 ==bomb number,them open other block around.
if (this.bombNumAround == 0) {
var directions = new Array();
directions.push("up");
directions.push("right");
directions.push("down");
directions.push("left");
directions.push("leftUp");
directions.push("rightUp");
directions.push("leftDown");
directions.push("rightDown");
for ( var i = 0; i < directions.length; i++) {
var blockInDirection = this.neighbors[directions[i]];
if (null != blockInDirection
&& typeof (blockInDirection) != "undefined"
&& !blockInDirection.isBomb && !blockInDirection.isOpen) {
blockInDirection.open();
}
}
}
};
function Container(parent, width, heigth, rows, columns, bomb) {
this.bombNumber = bomb;
this.parent = parent;
this.width = width;
this.heigth = heigth;
this.rows = rows;
this.columns = columns;
this.childObject = new Array();
this.html = null;
}
Container.prototype.init = function() {
this.html = document.createElement("p");
this.html.id = "container";
var bombArray = new Object();
// how many bombs in all.
var bombNumber = 100;
var index = this.rows * this.columns + 1;
var loopNumber = 0;
// randomly generate the position of bomb.
while (true) {
if (loopNumber >= bombNumber) {
break;
}
var randomBombPosition = Math.floor(Math.random() * index);
if (bombArray[randomBombPosition] != true) {
bombArray[randomBombPosition] = true;
loopNumber++;
}
}
// generate block objects.
for ( var i = 0; i < this.rows * this.columns; i++) {
var block = new Block("block");
if (bombArray[i] == true) {
block.isBomb = true;
}
this.childObject.push(block);
this.html.appendChild(block.html);
}
// generating the relation of blocks. neighbors around.
for ( var j = 0; j < this.rows * this.columns; j++) {
block = this.childObject[j];
block.neighbors.up = this.childObject[j - this.columns];
block.neighbors.right = this.childObject[j + 1];
block.neighbors.down = this.childObject[j + this.columns];
block.neighbors.left = this.childObject[j - 1];
block.neighbors.leftUp = this.childObject[j - this.columns - 1];
block.neighbors.rightUp = this.childObject[j - this.columns + 1];
block.neighbors.leftDown = this.childObject[j + this.columns - 1];
block.neighbors.rightDown = this.childObject[j + this.columns + 1];
if (j / this.columns == 0) {
block.neighbors.up = null;
block.neighbors.leftUp = null;
block.neighbors.rightUp = null;
} else if (j / this.columns == this.rows - 1) {
block.neighbors.down = null;
block.neighbors.leftDown = null;
block.neighbors.rightDown = null;
}
if (j % this.columns == 0) {
block.neighbors.left = null;
block.neighbors.leftUp = null;
block.neighbors.leftDown = null;
} else if (j % this.columns == this.columns - 1) {
block.neighbors.right = null;
block.neighbors.rightUp = null;
block.neighbors.rightDown = null;
}
block.calcBombAround();
}
};
</script>
<script type="text/javascript">
document.oncontextmenu = function() {
return false;
};
var parent = document.getElementById("containers");
var container = new Container(parent, "600px", "600px", 30, 30, 0);
container.init();
parent.appendChild(container.html);
</script>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;">
<title>扫雷</title>
<style type="text/css">
#container {
width: 670px;
height: 670px;
background-color: #eeffee;
margin: 10px auto;
}
.block {
width: 20px;
height: 20px;
background-color: white;
border: 1px solid;
float: left;
margin: 0 0 0 0px;
text-align: center;
}
.block2 {
width: 10px;
height: 10px;
background-color: red;
float: left;
}
.openedBlockNormal {
width: 20px;
height: 20px;
background-color: green;
border: 1px solid;
float: left;
margin: 0 0 0 0px;
text-align: center;
}
.openedBlockBomb {
width: 20px;
height: 20px;
background-color: red;
border: 1px solid;
float: left;
margin: 0 0 0 0px;
text-align: center;
}
.openedBlockEmpty {
width: 20px;
height: 20px;
background-color: yellow;
border: 1px solid;
float: left;
margin: 0 0 0 0px;
text-align: center;
}
</style>
<script type="text/javascript">
var EventUtil = new Object;
EventUtil.addEvent = function(oTarget, sEventType, funName) {
if (oTarget.addEventListener) {//for DOM;
oTarget.addEventListener(sEventType, funName, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, funName);
} else {
oTarget["on" + sEventType] = funName;
}
};
EventUtil.removeEvent = function(oTarget, sEventType, funName) {
if (oTarget.removeEventListener) {//for DOM;
oTarget.removeEventListener(sEventType, funName, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, funName);
} else {
oTarget["on" + sEventType] = null;
}
};
</script>
<script type="text/javascript" src="bomb.js"></script>
</head>
<body>
<p id="containers" style="cursor: pointer"></p>
</body>
<script>
// this class stands for eight direction of every block.
function Direction() {
this.up = null;
this.right = null;
this.down = null;
this.left = null;
this.leftUp = null;
this.rightUp = null;
this.leftDown = null;
this.rightDown = null;
}
// every block object stands for one block in the page.
function Block(className) {
// blocks around.
this.neighbors = new Direction();// [up,rightUp,right,rightDown,down,leftDown,left,leftUp]
// html element. p used here.
this.html = null;
// position of this block.
this.index = -1;
// is this block a bomb?
this.isBomb = false;
// how many bombs around of this blocks.
this.bombNumAround = -1;
// html css style
this.className = className;
// is it already opened?
this.isOpen = false;
// do some preparation for this block;
this.init();
}
// calculate how many bombs of around.
Block.prototype.calcBombAround = function() {
if (!this.isBomb) {
var bombNumber = 0;
for ( var p in this.neighbors) {
if (typeof (this.neighbors[p]) != "function") {
if (null != this.neighbors[p] && this.neighbors[p].isBomb) {
bombNumber++;
}
}
}
this.bombNumAround = bombNumber;
}
};
// return html element.
Block.prototype.getHtml = function() {
return this.html;
};
Block.prototype.init = function() {
var that = this;
// create a html element.
this.html = document.createElement("p");
// adding mouse over handler for this block. change background color for
// this block.
EventUtil.addEvent(this.html, "mouseover", function(evt) {
var element = evt.target ? evt.target : evt.srcElement;
element.style.backgroundColor = "#eeAB6F";
});
// remove the style which were added in mouseover handler.
EventUtil.addEvent(this.html, "mouseout", function(evt) {
var element = evt.target ? evt.target : evt.srcElement;
element.style.backgroundColor = "";
element.style.cursor = "";
});
// user click some block.
EventUtil.addEvent(this.html, "mousedown", function(evt) {
// right click button.
if (evt.button == 2) {
// if this block already indicate as a bomb, then change to normal
// block.
if (that.getStyle() == "openedBlockBomb") {
that.changeStyle("block");
} else if (that.getStyle() == "block") {
// if this block is a normal block, indicate as a bomb.
that.changeStyle("openedBlockBomb");
}
} else {// left click!
// open it
that.open();
}
});
// setting defalut style name.
this.changeStyle(this.className);
};
// change css style.
Block.prototype.changeStyle = function(styleName) {
this.html.setAttribute("class", styleName);
this.html.setAttribute("className", styleName);
};
// getting csss style
Block.prototype.getStyle = function() {
var style = this.html.getAttribute("class");
if (style == null || typeof (style) == "undefined") {
style = this.html.getAttribute("className");
}
return style;
};
Block.prototype.open = function() {
// if there is no bomb around, change style as an empty block.
if (this.bombNumAround == 0) {
this.changeStyle("openedBlockEmpty");
} else if (this.bombNumAround > 0) {
// setting bomb number to inner html.
this.html.innerHTML = this.bombNumAround;
this.changeStyle("openedBlockNormal");
} else {
// setting style as a bomb.
this.changeStyle("openedBlockBomb");
alert("bomb!!");
}
this.isOpen = true;
// if 0 ==bomb number,them open other block around.
if (this.bombNumAround == 0) {
var directions = new Array();
directions.push("up");
directions.push("right");
directions.push("down");
directions.push("left");
directions.push("leftUp");
directions.push("rightUp");
directions.push("leftDown");
directions.push("rightDown");
for ( var i = 0; i < directions.length; i++) {
var blockInDirection = this.neighbors[directions[i]];
if (null != blockInDirection
&& typeof (blockInDirection) != "undefined"
&& !blockInDirection.isBomb && !blockInDirection.isOpen) {
blockInDirection.open();
}
}
}
};
function Container(parent, width, heigth, rows, columns, bomb) {
this.bombNumber = bomb;
this.parent = parent;
this.width = width;
this.heigth = heigth;
this.rows = rows;
this.columns = columns;
this.childObject = new Array();
this.html = null;
}
Container.prototype.init = function() {
this.html = document.createElement("p");
this.html.id = "container";
var bombArray = new Object();
// how many bombs in all.
var bombNumber = 100;
var index = this.rows * this.columns + 1;
var loopNumber = 0;
// randomly generate the position of bomb.
while (true) {
if (loopNumber >= bombNumber) {
break;
}
var randomBombPosition = Math.floor(Math.random() * index);
if (bombArray[randomBombPosition] != true) {
bombArray[randomBombPosition] = true;
loopNumber++;
}
}
// generate block objects.
for ( var i = 0; i < this.rows * this.columns; i++) {
var block = new Block("block");
if (bombArray[i] == true) {
block.isBomb = true;
}
this.childObject.push(block);
this.html.appendChild(block.html);
}
// generating the relation of blocks. neighbors around.
for ( var j = 0; j < this.rows * this.columns; j++) {
block = this.childObject[j];
block.neighbors.up = this.childObject[j - this.columns];
block.neighbors.right = this.childObject[j + 1];
block.neighbors.down = this.childObject[j + this.columns];
block.neighbors.left = this.childObject[j - 1];
block.neighbors.leftUp = this.childObject[j - this.columns - 1];
block.neighbors.rightUp = this.childObject[j - this.columns + 1];
block.neighbors.leftDown = this.childObject[j + this.columns - 1];
block.neighbors.rightDown = this.childObject[j + this.columns + 1];
if (j / this.columns == 0) {
block.neighbors.up = null;
block.neighbors.leftUp = null;
block.neighbors.rightUp = null;
} else if (j / this.columns == this.rows - 1) {
block.neighbors.down = null;
block.neighbors.leftDown = null;
block.neighbors.rightDown = null;
}
if (j % this.columns == 0) {
block.neighbors.left = null;
block.neighbors.leftUp = null;
block.neighbors.leftDown = null;
} else if (j % this.columns == this.columns - 1) {
block.neighbors.right = null;
block.neighbors.rightUp = null;
block.neighbors.rightDown = null;
}
block.calcBombAround();
}
};
</script>
<script type="text/javascript">
document.oncontextmenu = function() {
return false;
};
var parent = document.getElementById("containers");
var container = new Container(parent, "600px", "600px", 30, 30, 0);
container.init();
parent.appendChild(container.html);
</script>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的javascript代码实例教程-JS扫雷游戏全部内容，希望文章能够帮你解决javascript代码实例教程-JS扫雷游戏所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 前端学java系列（1）——搭建环境 2019-11-04
- JavaScript教程- JavaScript 语句 2018-11-21
- JavaScript教程- JavaScript 语法 2018-11-20
- JavaScript教程- JavaScript 输出 2018-11-20
- JavaScript教程- JavaScript 用法 2018-11-20
- JavaScript教程- JavaScript 简介 2018-11-20
- 重温java基础 2018-11-20
- 了解JavaScript中的Spread运算符 2018-11-17
- js数组操作常用方法超级完整版本值得收藏 2018-11-16
- 谷歌JavaScript风格指南中值得注意的13点 2018-11-11
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件
- javascript代码实例教程-Extjs4――实现动态的grid（即实现数据库表数据的显示）
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- vue项目优化--服务端渲染优化
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件