扫雷-打发时间

fx05062219

浏览: 19816 次
性别:
来自: 杭州

最近访客更多访客>>

智拔天下

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css
javascript

html javascript.bomb 扫雷

<!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; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#container {
	width: 670px;
	height: 670px;
	background-color: #eeffee;
	margin: 100px 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>

<div id="containers" style="cursor: pointer"></div>
</body>
<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>
// 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. div 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("div");
	// 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("div");
	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();
	}

};

分享到：

maven SSH POM | 从m中选择n个元素

2012-02-13 11:02
浏览 760
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

扫雷-打发时间

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

扫雷-打发时间

评论

发表评论

相关推荐

数字加逗号

javascript 继承

上传文件

css 图片 局部 清晰(圆形 需要支持css3)

css 图片 局部 清晰(矩形)

最近访客更多访客>>

css 图片局部清晰(圆形需要支持css3)

css 图片局部清晰(矩形)