重寫掃雷（基於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>

當初寫的時候貌似沒寫難度選擇 不過如果看懂了 稍微修改下  難度選擇功能也不難（懶癌晚期了，沒辦法）。