重写扫雷（基于jQuery） 新手 有不足的地方敬请谅解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重写扫雷（基于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 class="wrap">
<div class="con clearfix">
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
当初写的时候貌似没写难度选择 不过如果看懂了 稍微修改下 难度选择功能也不难（懒癌晚期了，没办法）。
以上是关于重写扫雷（基于jQuery） 新手 有不足的地方敬请谅解的主要内容，如果未能解决你的问题，请参考以下文章