重写扫雷（基于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） 新手 有不足的地方敬请谅解的更多相关文章
- 基于jQuery经典扫雷游戏源码
分享一款基于jQuery经典扫雷游戏源码.这是一款网页版扫雷小游戏特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <center> <h1>j ...
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- 模仿win10样式，基于jquery的时间控件
工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...
- 基于jQuery的移动轮播图（支持触屏）
移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
- 基于jQuery会员中心安全修改表单代码
基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 基于jquery 移动插件的实现
引用谢灿勇 地址 http://www.cnblogs.com/st-leslie/p/6002148.html 一个思路分析:大致上实现的思路有以下两种. 一.判断块是否被按下(mousedown ...
- 基于jquery的bootstrap在线文本编辑器插件Summernote （转）
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
随机推荐
- .net mvc datatables中orderby动态排序
今天在做项目中用datatables的排序来做筛选,不过人比较懒,不想写那么多的关于排序的代码,于是寻思这在度娘上找找,结果不负有心人啊,更感谢贴出此贴的哥们,来源:http://blog.csdn. ...
- php 简单连接数据库的操作
<?php /** * TestGuest Version1.0 * ================================================ * Copy 2010-2 ...
- Message,MessageQueue,Looper,Handler ——由view.post(runnable想到的)
近日看到代码有view.post(runable),发现对handler机制又有些模糊,故做些复习. 这里就不再对具体的源码原理做深入复习了,就抄一些基本的结论吧. 1.基本概念 Message:基本 ...
- linux中挂载硬盘报错（you must specify the filesystem type）
公司有台服务器做了raid1,由于容量小,需扩容,原先打算再添加两块硬盘进去做多一组raid1,组成两组raid1混合使用,但是公司抠门,买到服务器只能安装3块硬盘,无奈之下只能放多一块进去单独挂载分 ...
- 关于线程池ThreadPool的学习
学习重点ThreadPool.SetMinThreads(out workerThreads, out completionPortThreads).这是整个线程池的关键. 而ThreadPool. ...
- entity framework 动态条件
entity framework 动态条件 问题:在实际编码过程中,根据不同的选择情况,会需要按照不同的条件查询数据集 如:状态confirmStatus ,如果为空的时候,查询全部,如果有具体值的时 ...
- cas sso单点登录系列6_cas单点登录防止登出退出后刷新后退ticket失效报500错
转(http://blog.csdn.net/ae6623/article/details/9494601) 问题: 我登录了client2,又登录了client3,现在我把client2退出了,在c ...
- QFormLayout
这个是官方的文档,现在还没有翻译,有时间自己会把这个好好的翻译一下. QFormLayout类是用来管理表格的输入部件以及和它们相关联的标签. 也就是说QFormLayout这个布局一般情况下是用来在 ...
- window 7 C盘整理
发现两篇不错的文章可以参考一下: http://blog.renren.com/blog/200083873/467545630 http://www.uedbox.com/win7-c-disk-s ...
- Spring AOP (下)
4.方式二:schema配置 a.业务类: /** * 业务类 * * @author yanbin * */ public class AspectBusiness { /** * 切入点 */ p ...