重写扫雷（基于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 ...
随机推荐
- C#关于使用枚举遇到的问题----Type运算符使用的必要性
我定义了一个枚举AttributeName 然后写到下面代码: Enum .GetValues (AttributeName ): 毫无疑问的错了.别人说要加个Typeof 也就是Enum .GetV ...
- C# 带参访问接口，WebClient方式
1.当参数的数据较大时.WebClient同步. //实例化WebClient client = new WebClient();//地址 string path = "http://oa. ...
- Solr配置集群
1.主机SolrConfig.xml <requestHandler name="/replication" class="solr.ReplicationHand ...
- iOS开发 UITableView之cell
1.cell简介 UITableView的每一行都是一个UITableViewCell,通过dataSource的tableView:cellForRowAtIndexPath:方法来初始化每一行 U ...
- hibernate_validator_02
三种不通的注解 1. 字段级(field level) 约束 package com.mycompany; import javax.validation.constraints.NotNull; p ...
- Windows Phone 使用 WriteableBitmap后台生成图片
这几天项目是遇到一个需求,需要后台把几个元素生成到一张图片上,并保存到文件中 private void cutscreen_Click(object sender, EventArgs e) { Gr ...
- maven3.0
Maven入门教程 1.1. 介绍.环境配置 1.1.1. Maven介绍 Maven是一个采用纯Java编写的开源项目管理工具, Maven采用了一种被称之为Project Object Model ...
- MySQL笔记--查询语句实践
有一个用户表,属性为 id,age,buytime 创建表以及插入数据的语句 CREATE TABLE USER( id INT, age INT, buytime INT ) ,,); ,,); , ...
- iOS开发之WKWebView简单使用
iOS开发之WKWebView简单使用 iOS开发之 WKWebVeiw使用 想用UIWebVeiw做的,但是突然想起来在iOS8中出了一个新的WKWebView,算是UIWebVeiw的升级版. ...
- JavaScript and html的关系
HTML--------------------------->DOM, BOM, Event Request/Response------------->Ajax 日期处理 http:/ ...