纯JS扫雷游戏（各浏览器兼容）
来源：互联网 发布：淘宝客优惠券软件下载 编辑：程序博客网 时间：2024/05/17 03:28
纯JS扫雷游戏 （各浏览器兼容）
效果图：
源码下载：http://download.csdn.net/detail/guoxuepeng123/5298119
【纯JS五子棋游戏】：http://blog.csdn.net/guoxuepeng123/article/details/8842808
【纯JS坦克大战游戏】：http://blog.csdn.net/guoxuepeng123/article/details/8858985
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><div id="containers" style="cursor: pointer"></div></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. 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 stylethis.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 itthat.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 styleBlock.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();}};</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扫雷游戏（各浏览器兼容）
- 纯JS五子棋（各浏览器兼容）
- 纯JS坦克大战（各浏览器兼容）
- js 导出excle之终极攻略（兼容各大浏览器），纯JS实现
- 扫雷游戏（js版）
- 纯JS(JavaScript)实现拖拽效果，兼容各大浏览器
- 不用JS实现显示隐藏效果（兼容各浏览器）
- js实现表格排序（兼容各浏览器）
- JS获取回车事件（兼容各浏览器）
- JS获取回车事件（兼容各浏览器）
- JS获取回车事件（兼容各浏览器）
- css兼容，js浏览器兼容
- js 复制网页内容，兼容各浏览器
- js操作select各浏览器兼容
- js 复制网页内容，兼容各浏览器
- JS阻止事件冒泡兼容各浏览器
- JS读取XML文件（兼容浏览器）
- JS读取XML文件（兼容浏览器）
- Emacs和Vim：神的编辑器和编辑器之神
- oracle 11g 新特性之结果缓存
- winform调用wcf服务遇到的问题及解决方案
- CSS hack技术解决浏览器兼容性问题
- ubuntu 安装 Sublime Text 2
- 纯JS扫雷游戏（各浏览器兼容）
- Objective-C 02
- Java常见笔试面试题目解析(三)：Java中异常执行流程
- 宁波工程学院[1409] 鼹鼠鼹鼠你不出来 大数处理 模拟 很好的题
- ZigBee学习笔记
- 《0-6岁宝宝发育指导》和《怀孕妈妈每月指导》App开发案例(总则)
- hdu 2116 （判断是否溢出）
- 状态机的实现
- ora-00257错误，以及oracle字符集
