纯JS扫雷游戏（各浏览器兼容）

【 tulaoshi.com - 扫雷游戏 】

纯JS扫雷游戏 （各浏览器兼容）

效果图：

 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