首页 > 代码库 > 重写扫雷（基于jQuery） 新手 有不足的地方敬请谅解
重写扫雷（基于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="http://www.mamicode.com/css/reset.css"></head><body> <div class="wrap"> <div class="con clearfix"> </div> </div> <script src="http://www.mamicode.com/js/jquery.min.js"></script> <script src="http://www.mamicode.com/js/main.js"></script></body></html>
当初写的时候貌似没写难度选择 不过如果看懂了 稍微修改下 难度选择功能也不难（懒癌晚期了，没办法）。
重写扫雷（基于jQuery） 新手 有不足的地方敬请谅解
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。