重写扫雷（基于jQuery） 新手 有不足的地方敬请谅解

记得刚开始学习js的时候写过一次扫雷，一个下午的时间被计算搞死，整个头是晕乎。

入职后，蹭着空闲的时间随手写了一个扫雷。

直接上代码了

(function() {  function module() {    this.length = 9;    this.$con = $(".con");    this.init();  }  module.prototype = {    constructor: "module",    init: function() {      this.create();      $(".con span").on("mousedown", $.proxy(this.downEve, this));      $(".con span").on("mouseup", $.proxy(this.upEve, this));      this.$con.on("contextmenu", function() {        return false;      })    },    // 生成元素    create: function() {      for (var i = 0; i < this.length * this.length; i++) {        this.$con.append("<span></span>");      }      var _this = this;      $(".con span").each(function() {        _this.bindState($(this));      });      var random = this.randomEve();      for (var i = 0; i < random.length; i++) {        $(".con span").eq(random[i]).data().state.ismine = true;      }      $(".con span").each(function() {        _this.mineNumEve($(this).index());      });    },    // 绑定属性    bindState: function(ed) {      ed.data("state", {        open: false, //是否打开        ismine: false, //是否为地雷        mineNum: 0, //地雷数        banner: false, //是否是旗帜      });    },    // 单击事件    clickEve: function(e) {      var $this = $(e.currentTarget),        index = $this.index();      var arr = this.getSudoku(index);      $this.data().state.open = true;      if ($this.data().state.ismine) {        // 地雷        $this.addClass("lei");        this.gamneOver();        return false;      } else {        this.openEve(arr);        $this.addClass("white");        this.showEve($this);      }    },    // 右击事件    riClickEve: function(e) {      var $this = $(e.currentTarget);      if (!$this.data().state.open) {        $this.toggleClass("banner");        $this.data().state.banner = !$this.data().state.banner;      } else {        return false      }    },    // 双击事件    douClickEve: function(e) {      var _this = this;      var index = $(e.currentTarget).index();      var arr = this.getSudoku(index);      var count = 0,        len = 0;      arr.forEach(function(value) {        if (!value.data().state.open && !value.data().state.banner) {          value.addClass("white");          len++;          if (!value.data().state.ismine) {            count++;          }        }      })      if (len == count && len != 0) {        arr.forEach(function(value) {          if (!value.data().state.open && !value.data().state.banner) {            value.addClass("white");            _this.showEve(value);            value.data().state.open = true;          }        })      }      setTimeout(function() {        arr.forEach(function(value) {          if (!value.data().state.open) {            value.removeClass("white");          }        })      }, 300)    },    // 鼠标按下判断    downEve: function(e) {      var _this = this;      var $this = $(e.currentTarget);      if (e.buttons == 1) {        if (!$this.data().state.banner && !$this.data().state.open) {          _this.clickEve(e);        } else {          return false;        }      }      if (e.buttons == 2) {        _this.riClickEve(e);      }      if (e.buttons == 3) {        if (!$this.data().state.banner) {          _this.douClickEve(e);        } else {          return false;        }      }    },    // 九宫格开雷    openEve: function(arr) {      var _this = this,        count = 0;      arr.forEach(function(value) {        if (!value.data().state.ismine) {          count++;        }      })      if (count == arr.length) {        arr.forEach(function(value) {          value.addClass("white");          value.data().state.open = true;          _this.showEve(value);        })      }    },    showEve: function(value) {      switch (value.data().state.mineNum) {        case 1:          value.css({            "color": "#00f"          });          break;        case 2:          value.css({            "color": "green"          });          break;        case 3:          value.css({            "color": "red"          });          break;        case 4:          value.css({            "color": "#0e0474"          });          break;        case 5:          value.css({            "color": "#740404"          });          break;      }      if (value.data().state.mineNum) {        value.html(value.data().state.mineNum);      }    },    // 随机地雷     randomEve: function() {      var random = [];      for (var i = 0; i < 10; i++) {        random[i] = Math.floor(Math.random() * this.length * this.length - 1);        if (i > 0) {          for (var j = i - 1; j >= 0; j--) {            if (random[i] == random[j]) {              i--;              break;            }          }        }      }      return random;    },    // 判定地雷数    mineNumEve: function(index) {      var _this = this;      if ($(".con span").eq(index).data().state.ismine) {        // 不为地雷        var arr = _this.getSudoku(index);        arr.forEach(function(value) {          value.data().state.mineNum++;        })      };    },    // 获取九宫格内的元素    getSudoku: function(index) {      var arr = [];      /**   第一行star **/      if (index == 0) {        arr.push($(".con span").eq(index + 1));        arr.push($(".con span").eq(index + 9));        arr.push($(".con span").eq(index + 10));      }      if (index == 8) {        arr.push($(".con span").eq(index - 1));        arr.push($(".con span").eq(index + 8));        arr.push($(".con span").eq(index + 9));      }      if (index < 8 && index > 0) {        arr.push($(".con span").eq(index - 1));        arr.push($(".con span").eq(index + 1));        arr.push($(".con span").eq(index + 8));        arr.push($(".con span").eq(index + 9));        arr.push($(".con span").eq(index + 10));      }      /**   第一行end **/      /**   中间star **/      if (index > 8 && index < 72) {        if (index % 9 == 0) {          arr.push($(".con span").eq(index - 9));          arr.push($(".con span").eq(index - 8));          arr.push($(".con span").eq(index + 1));          arr.push($(".con span").eq(index + 9));          arr.push($(".con span").eq(index + 10));        }        if ((index + 1) % 9 == 0) {          arr.push($(".con span").eq(index - 10));          arr.push($(".con span").eq(index - 9));          arr.push($(".con span").eq(index - 1));          arr.push($(".con span").eq(index + 8));          arr.push($(".con span").eq(index + 9));        }        if (index % 9 > 0 && (index + 1) % 9 != 0) {          arr.push($(".con span").eq(index - 10));          arr.push($(".con span").eq(index - 9));          arr.push($(".con span").eq(index - 8));          arr.push($(".con span").eq(index - 1));          arr.push($(".con span").eq(index + 1));          arr.push($(".con span").eq(index + 8));          arr.push($(".con span").eq(index + 9));          arr.push($(".con span").eq(index + 10));        }      }      /**   中间end **/      /**   最后一行star **/      if (index == 80) {        arr.push($(".con span").eq(index - 1));        arr.push($(".con span").eq(index - 9));        arr.push($(".con span").eq(index - 10));      }      if (index == 72) {        arr.push($(".con span").eq(index + 1));        arr.push($(".con span").eq(index - 8));        arr.push($(".con span").eq(index - 9));      }      if (index > 72 && index < 80) {        arr.push($(".con span").eq(index + 1));        arr.push($(".con span").eq(index - 1));        arr.push($(".con span").eq(index - 8));        arr.push($(".con span").eq(index - 9));        arr.push($(".con span").eq(index - 10));      }      /**   最后一行end **/      return arr;    },    // 游戏结束    gamneOver: function() {      alert("游戏结束");    }  }  new module();})();

初始化时生成元素并且给元素绑定属性（打开、地雷、地雷数、旗帜），PS：data()方法是真的好用

 create: function() {      for (var i = 0; i < this.length * this.length; i++) {        this.$con.append("<span></span>");      }      var _this = this;      $(".con span").each(function() {        _this.bindState($(this));      });      var random = this.randomEve();      for (var i = 0; i < random.length; i++) {        $(".con span").eq(random[i]).data().state.ismine = true;      }      $(".con span").each(function() {        _this.mineNumEve($(this).index());      });    },    // 绑定属性    bindState: function(ed) {      ed.data("state", {        open: false, //是否打开        ismine: false, //是否为地雷        mineNum: 0, //地雷数        banner: false, //是否是旗帜      });    },

动态生成元素并且通过data给元素绑定初始属性

最开始的时候获取九宫格元素被搞的半死不活的  后面恍然一误；可以封装一个函数 通过元素的索引去获取当前元素九宫格内的元素（一下子剩下不少代码 泪奔，这部分当初没想好，老在逻辑上出了错误）

 getSudoku: function(index) {      var arr = [];      /**   第一行star **/      if (index == 0) {        arr.push($(".con span").eq(index + 1));        arr.push($(".con span").eq(index + 9));        arr.push($(".con span").eq(index + 10));      }      if (index == 8) {        arr.push($(".con span").eq(index - 1));        arr.push($(".con span").eq(index + 8));        arr.push($(".con span").eq(index + 9));      }      if (index < 8 && index > 0) {        arr.push($(".con span").eq(index - 1));        arr.push($(".con span").eq(index + 1));        arr.push($(".con span").eq(index + 8));        arr.push($(".con span").eq(index + 9));        arr.push($(".con span").eq(index + 10));      }      /**   第一行end **/      /**   中间star **/      if (index > 8 && index < 72) {        if (index % 9 == 0) {          arr.push($(".con span").eq(index - 9));          arr.push($(".con span").eq(index - 8));          arr.push($(".con span").eq(index + 1));          arr.push($(".con span").eq(index + 9));          arr.push($(".con span").eq(index + 10));        }        if ((index + 1) % 9 == 0) {          arr.push($(".con span").eq(index - 10));          arr.push($(".con span").eq(index - 9));          arr.push($(".con span").eq(index - 1));          arr.push($(".con span").eq(index + 8));          arr.push($(".con span").eq(index + 9));        }        if (index % 9 > 0 && (index + 1) % 9 != 0) {          arr.push($(".con span").eq(index - 10));          arr.push($(".con span").eq(index - 9));          arr.push($(".con span").eq(index - 8));          arr.push($(".con span").eq(index - 1));          arr.push($(".con span").eq(index + 1));          arr.push($(".con span").eq(index + 8));          arr.push($(".con span").eq(index + 9));          arr.push($(".con span").eq(index + 10));        }      }      /**   中间end **/      /**   最后一行star **/      if (index == 80) {        arr.push($(".con span").eq(index - 1));        arr.push($(".con span").eq(index - 9));        arr.push($(".con span").eq(index - 10));      }      if (index == 72) {        arr.push($(".con span").eq(index + 1));        arr.push($(".con span").eq(index - 8));        arr.push($(".con span").eq(index - 9));      }      if (index > 72 && index < 80) {        arr.push($(".con span").eq(index + 1));        arr.push($(".con span").eq(index - 1));        arr.push($(".con span").eq(index - 8));        arr.push($(".con span").eq(index - 9));        arr.push($(".con span").eq(index - 10));      }      /**   最后一行end **/      return arr;    },

在判断地雷数的时候换了个思路发现好写多了 而且貌似效率会好一点。之前是根据当前元素（非地雷）判断该元素九宫格内的地雷数。重写的时候 想到了地雷数明显比非地雷数多 为什么不不用地雷元素去操控九宫格内的元素
于是采用了以下的方法：获取地雷元素的九宫格元素 给九宫格元素内非地雷元素的mineNum（地雷数）属性加1。 好吧，又省了一大丢代码，之前怎么就没想到，被自己蠢哭了。

 mineNumEve: function(index) {      var _this = this;      if ($(".con span").eq(index).data().state.ismine) {        // 为地雷        var arr = _this.getSudoku(index);        arr.forEach(function(value) {          value.data().state.mineNum++;        })      };    },

至于单击事件、双击事件以及右键事件 就不一一解说。

话说点击开出一片雷写的时候还是卡在那，当前只能打开九宫格。（现如今貌似想通了，写个回调函数应该可以解决，等有**了再动手完善下）;

游戏结束胜利没做判断，不过这功能不难（原谅我比较懒）整体比较粗糙凑合着看吧！

最后放上结构吧，结构样式比较简单

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>扫雷</title>  <link rel="stylesheet" href="css/reset.css"></head><body>  <div >    <div >    </div>  </div>  <script src='/images/loading.gif' data-original="js/jquery.min.js"></script>  <script src='/images/loading.gif' data-original="js/main.js"></script></body></html>

当初写的时候貌似没写难度选择 不过如果看懂了 稍微修改下  难度选择功能也不难（懒癌晚期了，没办法）。

原标题：重写扫雷（基于jQuery） 新手 有不足的地方敬请谅解

关键词：jquery