JS實現網頁版掃雷遊戲

原創 Barret2016 2018-08-30 18:27

樓主學網頁設計不久，這是第一個稍微比較複雜的JS事件小遊戲，我知道在算法上肯定會有許多冗餘的地方，樓主正在努力奮鬥修改中，望各位大神加以指正，第一次發博文，代碼又沒有優化就不多囉嗦了，代碼裏有一些註釋，待年後修改優化好後再附上詳細註釋，謝謝！

DOM結構：

<body>
    <div class="section">
        <div class="w960">
            <table id="table"><tbody></tbody></table>
            <div class="content">
                Mine:    <span></span><br /><br /><br /><br />
                Row:<input type="text" /><br /><br /><br />
                Col:<input type="text" /><br /><br /><br />
                Num:<input type="text" />
            </div>
        </div>
    </div>
    <div class="reload"><p><strong>Reset</strong></p></div>
</body>

CSS樣式：

    <style>
        body{margin:0px;}
        .reload{width:200px;background-color:#0087cf;margin:auto;padding:1px 0;}
        .reload p{text-align:center;}
        td{width:20px;height:20px;border:1px solid #000;text-align:center;cursor:default;}
        .w960{width:960px;margin:25px auto;height:500px;position:relative;}
        table{border-collapse:collapse;margin-left:80px;}
        .content{position:absolute;left:600px;top:120px;}
        .section:after{clear:both;content:"";}
        input{text-align:center;}
        .mine{background:url(a.png) 50% 50%/100% 100% no-repeat;}
        .star{background:url(b.png) 50% 50%/100% 100% no-repeat;}
        .on{background-color:;}
    </style>
JS代碼： 

<script>
        $(function () {
            //阻止右擊默認事件
            document.oncontextmenu = function () {
                return false;
            }
            //js生成20X20掃雷地圖，雷數隨機約爲20%
            var txt = "";
            var row = 20, col = 20;
            for (var i = 0; i < col; i++) {
                txt += "<tr>";
                for (var j = 0; j < row; j++) {
                    //0-9之間的隨機數
                    var num = Math.floor(Math.random() * 10);
                    if (num < 2) {
                        txt += "<td class='on item_val'>" + "</td>";
                    }
                    else {
                        txt += "<td class='off item_val'>" + "</td>";
                    }
                }
                txt += "</tr>";
            }
            $("tbody").wrapInner(txt);
            $("span").text($("td.on").length);
            //鼠標點擊事件
            var off_mouse = function (event) {
                if (event.which == 3 && !(parseInt($(this).text()) >= 0)) {
                    $(this).toggleClass("star");
                }
            }
            $(document).on("mousedown", "td.off", off_mouse);
            var off_click = function () {
                if (!(parseInt($(this).text()) >= 0)) {
                    var count = 0;
                    //索引index
                    var eq_row = $(this).parent("tr").children().index($(this));
                    var eq_col = $("tr").index($(this).parent("tr"));
                    console.log("點擊了第" + (eq_col + 1) + "行");
                    console.log("點擊了第" + (eq_row + 1) + "列");
                    //左
                    if (eq_row > 0 && $(this).prev().hasClass("on")) {
                        count += 1;
                    }
                    //右
                    if (eq_row < col - 1 && $(this).next().hasClass("on")) {
                        count += 1;
                    }
                    //上
                    if (eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row).hasClass("on")) {
                        count += 1;
                    }
                    //下
                    if (eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row).hasClass("on")) {
                        count += 1;
                    }
                    //左上
                    if (eq_row > 0 && eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row - 1).hasClass("on")) {
                        count += 1;
                    }
                    //右上
                    if (eq_row < col - 1 && eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row + 1).hasClass("on")) {
                        count += 1;
                    }
                    //左下
                    if (eq_row > 0 && eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row - 1).hasClass("on")) {
                        count += 1;
                    }
                    //右下
                    if (eq_row < col - 1 && eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row + 1).hasClass("on")) {
                        count += 1;
                    }
                    //如果沒雷則去除之前可能做的標記
                    $(this).removeClass("star");
                    $(this).removeClass("off");     //用於計數判斷
                    $(this).removeClass("item_val")
                    $(this).addClass("item");       //顯現數值的用於雙擊
                    $(this).text(count);
                    //如果爲0
                    if (count == 0) {
                        if (eq_row > 0) {
                            $(this).prev().trigger("click");
                        }
                        if (eq_row < col - 1) {
                            $(this).next().trigger("click");
                        }
                        if (eq_col > 0) {
                            $(this).parent("tr").prev().children().eq(eq_row).trigger("click");
                        }
                        if (eq_col < row - 1) {
                            $(this).parent("tr").next().children().eq(eq_row).trigger("click");
                        }
                        if (eq_row > 0 && eq_col > 0) {
                            $(this).parent("tr").prev().children().eq(eq_row - 1).trigger("click");
                        }
                        if (eq_row < col - 1 && eq_col > 0) {
                            $(this).parent("tr").prev().children().eq(eq_row + 1).trigger("click");
                        }
                        if (eq_row > 0 && eq_col < row - 1) {
                            $(this).parent("tr").next().children().eq(eq_row - 1).trigger("click");
                        }
                        if (eq_row < col - 1 && eq_col < row - 1) {
                            $(this).parent("tr").next().children().eq(eq_row + 1).trigger("click");
                        }
                    }
                    $("input:text").eq(0).val(eq_col + 1);
                    $("input:text").eq(1).val(eq_row + 1);
                    $("input:text").eq(2).val($("td.off").length);
                    //console.log(row * col - $("td.on").length);
                    //判別勝利
                    if ($("td.off").length == 0) {
                        $("td.on.star").css("background-color", "green");
                        $("td.on").removeClass("star");
                        $("td.on").addClass("mine");
                        alert("You win!");
                        $(document).off("mousedown", "td.on", on_mouse);
                        $(document).off("click", "td.on", on_click);
                        $(document).off("dblclick", "td.item", item_dbl);
                        $(document).off("mousedown", "td.off", off_mouse);
                        $(document).off("click", "td.off", off_click);
                    }
                }
            }
            $(document).on("click", "td.off", off_click);
            var item_dbl = function () {
                //索引問號的數目index
                var count1 = 0;
                var eq_row_1 = $(this).parent("tr").children().index($(this));
                var eq_col_1 = $("tr").index($(this).parent("tr"));
                //左
                if (eq_row_1 > 0 && $(this).prev().hasClass("star")) {
                    count1 += 1;
                }
                //右
                if (eq_row_1 < col - 1 && $(this).next().hasClass("star")) {
                    count1 += 1;
                }
                //上
                if (eq_col_1 > 0 && $(this).parent("tr").prev().children().eq(eq_row_1).hasClass("star")) {
                    count1 += 1;
                }
                //下
                if (eq_col_1 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_1).hasClass("star")) {
                    count1 += 1;
                }
                //左上
                if (eq_row_1 > 0 && eq_col_1 > 0 && $(this).parent("tr").prev().children().eq(eq_row_1 - 1).hasClass("star")) {
                    count1 += 1;
                }
                //右上
                if (eq_row_1 < col - 1 && eq_col_1 > 0 && $(this).parent("tr").prev().children().eq(eq_row_1 + 1).hasClass("star")) {
                    count1 += 1;
                }
                //左下
                if (eq_row_1 > 0 && eq_col_1 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_1 - 1).hasClass("star")) {
                    count1 += 1;
                }
                //右下
                if (eq_row_1 < col - 1 && eq_col_1 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_1 + 1).hasClass("star")) {
                    count1 += 1;
                }
                console.log("c1：" + count1);
                //索引雷的數目index
                var count2 = 0;
                var eq_row_2 = $(this).parent("tr").children().index($(this));
                var eq_col_2 = $("tr").index($(this).parent("tr"));
                //左
                if (eq_row_2 > 0 && $(this).prev().hasClass("on")) {
                    count2 += 1;
                }
                //右
                if (eq_row_2 < col - 1 && $(this).next().hasClass("on")) {
                    count2 += 1;
                }
                //上
                if (eq_col_2 > 0 && $(this).parent("tr").prev().children().eq(eq_row_2).hasClass("on")) {
                    count2 += 1;
                }
                //下
                if (eq_col_2 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_2).hasClass("on")) {
                    count2 += 1;
                }
                //左上
                if (eq_row_2 > 0 && eq_col_2 > 0 && $(this).parent("tr").prev().children().eq(eq_row_2 - 1).hasClass("on")) {
                    count2 += 1;
                }
                //右上
                if (eq_row_2 < col - 1 && eq_col_2 > 0 && $(this).parent("tr").prev().children().eq(eq_row_2 + 1).hasClass("on")) {
                    count2 += 1;
                }
                //左下
                if (eq_row_2 > 0 && eq_col_2 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_2 - 1).hasClass("on")) {
                    count2 += 1;
                }
                //右下
                if (eq_row_2 < col - 1 && eq_col_2 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_2 + 1).hasClass("on")) {
                    count2 += 1;
                }
                console.log("c2：" + count2);
                if (count1 == count2) {
                    //索引index
                    var eq_row = $(this).parent("tr").children().index($(this));
                    var eq_col = $("tr").index($(this).parent("tr"));
                    //左
                    if (eq_row > 0 && $(this).prev().not(".star").hasClass("item_val")) {
                        $(this).prev().trigger("click");
                    }
                    //右
                    if (eq_row < col - 1 && $(this).next().not(".star").hasClass("item_val")) {
                        $(this).next().trigger("click");
                    }
                    //上
                    if (eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row).not(".star").hasClass("item_val")) {
                        $(this).parent("tr").prev().children().eq(eq_row).trigger("click");
                    }
                    //下
                    if (eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row).not(".star").hasClass("item_val")) {
                        $(this).parent("tr").next().children().eq(eq_row).trigger("click");
                    }
                    //左上
                    if (eq_row > 0 && eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row - 1).not(".star").hasClass("item_val")) {
                        $(this).parent("tr").prev().children().eq(eq_row - 1).trigger("click");
                    }
                    //右上
                    if (eq_row < col - 1 && eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row + 1).not(".star").hasClass("item_val")) {
                        $(this).parent("tr").prev().children().eq(eq_row + 1).trigger("click");
                    }
                    //左下
                    if (eq_row > 0 && eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row - 1).not(".star").hasClass("item_val")) {
                        $(this).parent("tr").next().children().eq(eq_row - 1).trigger("click");
                    }
                    //右下
                    if (eq_row < col - 1 && eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row + 1).not(".star").hasClass("item_val")) {
                        $(this).parent("tr").next().children().eq(eq_row + 1).trigger("click");
                    }
                }
            }
            $(document).on("dblclick", "td.item", item_dbl)
            var on_mouse = function (event) {
                if (event.which == 3) {
                    $(this).toggleClass("star");
                    $(this).toggleClass("item_val");
                };
            }
            $(document).on("mousedown", "td.on", on_mouse);
            var on_click = function () {
                if (!(parseInt($(this).text()) >= 0)) {
                    //alert(t);
                    //t++;
                    $("td.on").addClass("mine");
                    $(this).css("background-color", "red");
                    $("td.on.star").css("background-color", "red");
                    setTimeout(function () {
                        alert("You lost the game!");
                        $(document).off("mousedown", "td.on", on_mouse);
                        $(document).off("click", "td.on", on_click);
                        $(document).off("dblclick", "td.item", item_dbl);
                        $(document).off("mousedown", "td.off", off_mouse);
                        $(document).off("click", "td.off", off_click);
                    }, 666);
                }
            }
            $(document).on("click","td.on",on_click);
        })
        $(function () {
            $(document).on("click", "div.reload", function () {
                window.location.reload(true);
            })
        })
    </script>






發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Uniapp中父組件向子組件傳遞prop，新的prop會帶有舊的prop屬性

簡潔 最近使用uniapp開發微信小程序，某一個頁面需要做成可配置化，因此會出現直接在父組件修改傳遞到子組件的prop，但是會出現這種情況，假設新傳遞的prop對象爲newObj，舊傳遞的prop對象爲oldObj，如果Objec

py_boy 2020-07-08 12:07:32

spa頁面，不同組件按需引入js，aliplayer

(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur

HainesFreeman 2020-07-08 12:39:19

js 函數重載

概念：允許某個函數有各種不同輸入，根據不同的輸入，調用不同的函數，然後返回不同的結果。 簡單定義：根據不同參數長度來實現讓同一個函數，進行不同處理 function addMethod (obj, name, fun) { le

HainesFreeman 2020-07-08 12:39:19

【Echarts+Html+LayUI】同一htlm頁面，點擊不同選項，加載不同echart

遇到的坑： 問題1 加載一個之後，再點擊另一個，可能是某個模板設定的問題，導致出現重疊的情況。 問題1解決方法： // 基於準備好的dom，初始化echarts實例 var div_main = document.getEle

33 Audrey 2020-07-08 12:35:22

函數的內部屬性————Arguments對象

一、基本點 arguments是一個類數組對象，包含着傳入函數中的所有參數。主要用途是保存函數參數，但這個對象還有一個名叫callee的屬性 arguments的 callee屬性是一個指針，指向擁有這個arguments對象的

ddx2019 2020-07-08 11:55:42

富文本編輯器之————Vue-Quill-Editor

1. 安裝vue-quill-eidtor yarn add vue-quill-editor 或者 npm install vue-quill-editor --save 2. 在main.js中引入： import Vue

ddx2019 2020-07-08 11:55:42

知道這 20 個正則表達式，能讓你少寫 1,000 行代碼

http://www.runoob.com/regexp/regexp-syntax.html 正則表達式，一個十分古老而又強大的文本處理工具，僅僅用一段非常簡短的表達式語句，便能夠快速實現一個非常複雜的業務邏輯。熟練地掌握正則表

哈哈金馆长 2020-07-08 11:36:23

a標籤中使用onclick提示function未定義

<a href="javascript:;" onclick="text()">leave a message</a> 今天做東西的時候，發現在a標籤中使用onclick觸發函數，一直報錯，顯示function未定義，開始還以爲

Ro0k1e 2020-07-08 11:27:27

JS_目錄

DOM(Document Object Model)文檔對象模型，以及文檔的加載 事件、事件句柄 DOM查詢----獲取模型樹中的節點document中的方法，以及節點中的屬性 獲取/修改元素節點的屬性 獲取/修改元素節點的內

丨QAQ丨凸 2020-07-08 11:21:00

js給value動態賦值

//動態改變少數民族的值 function checkSelect(){ var ontion = document.getElementById("nations").value; //alert("少數民族的值爲："+ont

Old丶Seven 2020-07-08 11:20:47

Promise基本使用（慕課Promise教程筆記）

很久沒寫博客了......看了很多關於Promise的文章，但是感覺也不是很理解，沒辦法去就看視頻了。偶然發現慕課裏有個關於Promise的視頻，然後今天看了前兩章，順便整理了下筆記，記錄下吧~ Promise 是什麼？ 用於異步計算。

冰派甜心 2020-07-08 11:05:39

toString()、String(obj)和valueOf()

toString() 每個字符串都有一個toString()方法，該方法返回字符串的一個副本（當前函數源代碼的字符串），但是null和undefined值沒有這個方法。 toString()一般不用傳參，也可以傳入基數(進制數)爲參，默

冰派甜心 2020-07-08 11:05:38

在線查看OFFICE文件

https://view.officeapps.live.com/op/view.aspx?src=你地址

[email protected] 2020-07-08 10:59:52

Vue坑點雜談（一）Module not found Error Cannot resolve file or directory

Vue坑點雜談（一）Module not found: Error: Cannot resolve ‘file’ or ‘directory’ 一、寫在開頭 這個算是學習vue的同時開的一個新坑吧，記錄一下學習過程出現的紕漏，也幫

ODST_TheSolverO5 2020-07-08 10:59:42

JS基礎複習（四）四分鐘帶你徹底搞定全局變量和局部變量

JS基礎複習（四）四分鐘帶你徹底搞定全局變量和局部變量 一、寫在開頭 這個是因爲最近期末考要考web，恰好有這個知識點，所以我自己總結了一下，希望可以幫助到大家。 二、發現問題 區分什麼是局部變量，什麼是全局變量，變量之間賦值後結

ODST_TheSolverO5 2020-07-08 10:59:41