重写扫雷（基于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>

当初写的时候貌似没写难度选择 不过如果看懂了 稍微修改下  难度选择功能也不难（懒癌晚期了，没办法）。

时间： 2024-10-09 11:54:03

重写扫雷（基于jQuery） 新手 有不足的地方敬请谅解的相关文章

基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大

Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Opera.Internet Explorer 9 +(IE8支持即将到来). 特点: 世界上最好的WYSIWYG在线编辑器 极易安装 开源 自定义初化选项 支持快捷键 适用于各种后端程序言语 使用方法 使用html5文档 1 2 3 4 <!DOCTYPE html> <html> ..

基于Jquery 简单实用的弹出提示框

引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间自己写了个弹出效果,放到项目上去发现效果还不错,这里贴出来,做个备忘,有需要的同学可以拿去,也可以作为一个参考. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d

基于jQuery的Validate表单验证

表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋友问我要一个表单的验证,所以我就稍微整理了一下~  基本上有了这个表单验证插件,基本上一些常用的验证都可以搞定了~ 如果搞不定,没关系,我们还可以基于Validate来写一个自己的验证插件, 我把它取名为message_zh.js,我们可以在里面扩展自己需要的验证~~ 既然Validate是基于jQ

基于jQuery会员中心安全修改表单代码

基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="Safety"> <dl> <dt> <strong>登录密码:</strong> <span>保障账户安全,建议您定期更换密码</span> <b><span

转载：基于jquery的bootstrap在线文本编辑器插件Summernote

基于jquery的bootstrap在线文本编辑器插件Summernote 转载:jQ酷 » 基于jquery的bootstrap在线文本编辑器插件Summernote Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Opera.Internet Explorer 9 +(IE8支持即将到来). 特点: 世界上最好的WYSIWYG在线编辑器 极易安装

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

基于jquery的ajax分页插件（demo+源码）

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

10款基于jQuery的图片滑块焦点图插件

1.Material UI – Material Design CSS 框架 Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才是焦点.Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React 组件.可以作为 NPM 安装包,使用 browserify 和 reactify 的依赖管理和 J

10款web前端基于jquery超实用jQuery插件大合集

1.纯CSS3实现多种箭头绘制及动画 今天要介绍的这款CSS3应用也非常实用,利用它可以用纯CSS3实现各种箭头的绘制,包括左右箭头.上下箭头以及各个方向的转弯箭头,另外还有一款更酷的CSS3箭头动画特效,可以用来做Loading加载动画.这么多箭头,你可以任选一个应用到项目中去. 在线演示 源码下载 2.基于jquery的手风琴显示详情 今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情. 在线演示 源码下载 3.纯CSS3实现眨眼动