JQuery做的一個簡單的點燈遊戲分享_jquery

最近屌絲被迫學習TypeScript（不學就會被開除，5555），所以得先學JavaScript，這下可好，所有網頁相關的東西都得要有所了解，否則沒法忽悠BOSS。

今天學了一小會JavaScript，這裡先做了一個簡單的點燈遊戲，算是練手吧。其中用到了JQuery，否則事件綁定就會蛋痛了。

做為JavaScript的Hello World，這個玩意就是下面這個東東。這裡簡單說一下實作方法。

效果圖：

先定義一個樣式表，別忘了自訂的元素前都要加圓點，否則無效（菜鳥被這個玩意害了好多次啊）：
app.css

複製程式碼 程式碼如下:

body
{
    font-family: 'Segoe UI', sans-serif;
}

span {
    font-style: italic
}

.darkButton {
    width:70px;
    height:70px;
    background-color:green;
}

.lightButton {
    width:70px;
    height:70px;
    background-color:lightblue;
}

 .return {
    font-size:small;
 }

接下來實現整體佈局吧，就是body標籤中的東西，這個很簡單，不多說了：

複製程式碼 程式碼如下:

   

Turn all the light bulbs if you can!

    Hello
   

        橫向：
       
        縱向：
       
        開始遊戲
   

   

   

   

        您已經移動了 0 步。
   

然後，先實現一個很簡單的驗證，在點擊開始按鈕後，判斷使用者輸入是否是數字，並且是否在4-9的範圍內。

複製程式碼 程式碼如下:

$(document).ready(function () {
    $(startButton).click(function () {
        if (step > 0) {
            if (confirm('乃確定要重新開始遊戲麼？') === false)
                return;
        }

        if (isNaN($(X).val()) || isNaN($(Y).val())) {
            alert('橫縱的儲存格中之能輸入數字。');
            return;
        }
else if ($(X).val() = 10 || $(Y).val() >= 10) {
            alert('橫縱的數量不能小於 4，且不能大於 9。');
            return;
        }

        startGame();
    });     
});

$()就是使用的JQuery函式庫。基本上，這裡用到的選擇器主要有：$(“#xxx”) 第一個id為xxx的元素；$(“.xxx”) 樣式為xxx的所有元素。

step是我定義的變量，使用者記錄使用者按了幾次。

在每次使用者按了開始按鈕後，先把原來畫的按鈕清除（如果有的話）。用JQuery很容易實現，用樣式去配對就可以了：

複製程式碼 程式碼如下:

$(".darkButton").remove();
$(".lightButton").remove();
$(".return").remove();

然後就是產生一堆按鈕了。這個很常規，不需要做什麼解釋：

複製程式碼 程式碼如下:

var grid = document.getElementById('content');

for (var i = 1; i     for (var j = 1; j         var button = createButton('bt' i j);

        grid.appendChild(button);
    }

    var ret = document.createElement('br');
    ret.className = "return";

    grid.appendChild(ret);
}

createButton是一種方法，用於產生和設定html的元素。我這裡button的id命名採用bt 行號 列號，這樣方便知道以後按的是哪個按鈕。為了方便期間，我規定行號和列號必須小於10（好偷懶啊），這也樣直接取倒數第一個或第二個字元就知道座標值了。

程式最重要的邏輯：按某個按鈕改變自己和相鄰按鈕的狀態。我們只需要把座標取出來，再改變上下左右的按鈕狀態就行了（注意越界狀況的判斷），這裡寫一個判斷吧：

複製程式碼 程式碼如下:

$(".darkButton").click(function () {
    changeButton(this.id);

    var x = this.id.charAt(2);
    var y = this.id.charAt(3);

    if (x - 1 > 0) {
        changeButton('bt' (x - 1) y);
    }

注意this是在JQuery中定義的。如果不用JQuery想拿到這個this那可不容易。要提醒一點的就是下面這段程式碼：

複製程式碼 程式碼如下:

var newX = 1 parseInt(x);
if (x 1     changeButton('bt' newX y);
}

如果不parseInt，JavaScript會把1當作字串和後面的x拼起來，這樣id就不對了，所以把x轉成int後相加即可（上面那個相減的情況不需要這樣做）。這就是無型別語言的弊端之一吧，所以才會出現TypeScript（屌絲最近正在學的）。

重要部分都說完了，下面貼上htm檔案所有的程式碼。

複製程式碼 程式碼如下:

   
   
   
   
    <script><br />         $(document).ready(function () {<br />             $(startButton).click(function () {<br />                 if (step > 0) {<br />                     if (confirm('乃確定要重新開始遊戲麼？') === false)<br />                         return;<br />                 } <p>                if (isNaN($(X).val()) || isNaN($(Y).val())) {<br />                     alert('且橫縱的單元格中輸入數字。');<br />                     return;<br />                 }<br /> else if ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val() >= 10) {<br />                     alert('橫位的數量不能小於 4，且不能大於 9。』);<br />                     return;<br />                 } <p>                startGame();<br />             });      <br />         });<br />     </script>

    <script><br />         var maxX, maxY;</script>

        var step = 0;

        function startGame() {
            maxX = $(X).val();
            maxY = $(Y).val();
            makeGrid(maxX, maxY);
            step = 0;
            document.getElementById("step").innerHTML = step;
        }

        function makeGrid(x, y) {
            $(".darkButton").remove();
            $(".lightButton").remove();
            $(".return").remove();

            var grid = document.getElementById('content');

            for (var i = 1; i                 for (var j = 1; j                     var button = createButton('bt' i j);

                    grid.appendChild(button);
                }

                var ret = document.createElement('br');
                ret.className = "返回";

                grid.appendChild(ret);
            }

            $(".darkButton").click(function () {
                改變按鈕(this.id);

                var x = this.id.charAt(2);
                var y = this.id.charAt(3);

                若 (x - 1 > 0) {
                    改變按鈕('bt' (x - 1) y);
                }
                若 (y - 1 > 0) {
                    改變按鈕('bt' x (y - 1));
                }

                var newX = 1 parseInt(x);
                if (x 1                     ChangeButton('bt' newX y);
                }
                var newY = 1 parseInt(y);
                if (y 1                     ChangeButton('bt' x newY);
                }

                步驟 ;

                document.getElementById("step").innerHTML = step;
            });
        }

        函數changeButton(id) {
            var Button = document.getElementById(id);

            if (button.className === "darkButton") {
                Button.className = "lightButton";
            }
            否則{
                Button.className = "darkButton";
            }
        }

        函數 createButton(id) {
            var Button = document.createElement('button');
            按鈕.id = id;
            Button.className = "darkButton";
            返回按鈕；
        }
    腳本>
頭>

   

Turn all the light bulbs if you can!

    Hello
   

        橫向：
       
        縱向：
       
        開始遊戲
   

   

   

   

        您已經移動了 0 步。
   

如果想執行程式碼，只需要把最開始的樣式表儲存成app.css，然後把這段完整的程式碼儲存成default.htm，然後放在同一個資料夾下，用瀏覽器開啟htm文件就行了（IE要啟用ActiveX）。

要注意的是，這玩意和瀏覽器的兼容性有很大的關係，所以不保證在所有瀏覽器（和任意版本）上都能正常運作。 。 。

對了，最後多說一點。你可以用Visual Studio 2012來編輯html和JavaScript，會有Intellisense，還可以直接加斷點調試，非常方便。