重写扫雷（基于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 ...
随机推荐
- Android开发手记(21) 遍历文件夹
我们在遍历文件夹的时候由于涉及到SD卡相关操作,所以我们需要添加如下权限: <uses-permission android:name="android.permission.WRIT ...
- Android开发手记(16) 数据存储一 SharedPreferences
Android为数据存储提供了五种方式: 1.SharedPreferences 2.文件存储 3.SQLite数据库 4.ContentProvider 5.网络存储 SharedPreferenc ...
- 【USACO 1.4.3】等差数列
[题目描述] 一个等差数列是一个能表示成a, a+b, a+2b,..., a+nb (n=0,1,2,3,...)的数列. 在这个问题中a是一个非负的整数,b是正整数.写一个程序来找出在双平方数集合 ...
- Cisco CatOS系统交换机的SPAN配置
以下内容摘自最新上市的“四大金刚”图书之一<Cisco交换机配置与管理完全手册>(第二版)(其它三本分别为<Cisco路由器配置与管理完全手册>(第二版).<H3C交换机 ...
- 事件的委托处理（Event Delegation）
javascript的事件模型,采用”冒泡”模式,也就是说,子元素的事件会逐级向上”冒泡”,成为父元素的事件. 利用这一点,可以大大简化事件的绑定.比如,有一个表格(table元素),里面有100个格 ...
- 路由器to路由器
本文主要介绍一个主路由器连接两个子路由器的方法: 主路由器: 设置主路由器的开始ip地址为192.168.1.100,结束ip地址为192.168.150: 子路由器A: 第一步:LAN设置 第二步: ...
- 50 Pow(x, n)(求x的n次方Medium)
题目意思:x为double,n为int,求x的n次方 思路分析:直接求,注意临界条件 class Solution { public: double myPow(double x, int n) { ...
- hadoop+eclipse集群搭建及测试
前段时间搭了下hadoop,每次都会碰到很多问题,也没整理过,每次搜索都麻烦,现在整理下 一.准备工作 1.准备俩计算机,安装linux系统,分别装好jdk(虚拟机操作一样) nano /etc/ho ...
- jquery 选项卡实现
HTML文件 $(function(){ var $div_li =$("div.tab_menu ul li"); $div_li.click(function(){ $(thi ...
- JQuery学习笔记【CSS选择符】--02
Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...