纯JS扫雷游戏 （各浏览器兼容）
（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）效果图：
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 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(); } }; /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
