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

更新時間：2014年07月16日 10:26:08 投稿：junjie

這篇文章主要介紹了JQuery做的一個簡單的點燈游戲分享,點燈游戲是一個十分有趣的智力游戲,需要的朋友可以參考下

最近屌絲被迫學(xué)習(xí)TypeScript（不學(xué)就會被開除，5555），所以得先學(xué)JavaScript，這下可好，所有網(wǎng)頁相關(guān)的東西都得要有所了解，否則沒法忽悠BOSS。

今天學(xué)了一小會JavaScript，這里先做了一個簡單的點燈游戲，算是練手吧。其中用到了JQuery，否則事件綁定就會蛋疼了。

做為JavaScript的Hello World，這個玩意就是下面這個東東。這里簡單說一下實現(xiàn)方法。

效果圖：

首先定義一個樣式表，別忘了自定義的元素前都要加圓點，否則無效（菜鳥被這個玩意害了好多次?。?br /> app.css

復(fù)制代碼代碼如下:

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;
}

接下來實現(xiàn)整體布局吧，就是body標簽中的東西，這個很簡單，不多說了：

復(fù)制代碼代碼如下:

<body>
    <h1>Turn all the light bulbs if you can!</h1>
    Hello
    <div id="option">
        <label for="X">橫向：</label>
        <input type="number" id="X" value="5" />
        <label for="Y">縱向：</label>
        <input type="number" id="Y" value="4"/>
        <button id="startButton">開始游戲</button>
    </div>
    <div id="content">

    </div>
    <div id="stepCounter">
        您已經(jīng)移動了 <label id="step">0</label> 步。
    </div>
</body>

然后，先實現(xiàn)一個很簡單的驗證，在點擊開始按鈕后，判斷用戶輸入是否是數(shù)字，并且是否在4-9的范圍內(nèi)。

復(fù)制代碼代碼如下:

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

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

startGame();
});
});

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

step是我定義的變量，用戶記錄用戶按了多少次。

在每次用戶按了開始按鈕后，先把原來畫的按鈕清掉（如果有的話）。用JQuery很容易實現(xiàn)，用樣式去匹配就可以了：

復(fù)制代碼代碼如下:

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

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

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

然后就是生成一堆按鈕了。這個很常規(guī)，不需要做什么解釋：

復(fù)制代碼代碼如下:

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

for (var i = 1; i <= x; i++) {
for (var j = 1; j <= y; j++) {
var button = createButton('bt' + i + j);

grid.appendChild(button);
}

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

grid.appendChild(ret);
}

createButton是一個方法，用于生成和設(shè)置html的元素。我這里button的id命名采用bt+行號+列號，這樣方便知道以后按的是哪個按鈕。為了方便期間，我規(guī)定行號和列號必須小于10（好偷懶?。?，這也樣直接取倒數(shù)第一個或第二個字符就知道坐標值了。

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

復(fù)制代碼代碼如下:

$(".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那可不容易。要提醒一點的就是下面這一段代碼：

復(fù)制代碼代碼如下:

var newX = 1 + parseInt(x);

if (x + 1 <= maxX) {

    changeButton('bt' + newX + y);

}

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

重要部分都說完了，下面貼上htm文件所有的代碼。

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Turn the light</title>
    <link rel="stylesheet" href="app.css" rel="external nofollow" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(startButton).click(function () {
                if (step > 0) {
                    if (confirm('乃確定要重新開始游戲么？') === false)
                        return;
                }

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

                startGame();
            });
        });
    </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 <= x; i++) {
                for (var j = 1; j <= y; j++) {
                    var button = createButton('bt' + i + j);

grid.appendChild(button);
}

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

grid.appendChild(ret);
}

$(".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);
                }
                if (y - 1 > 0) {
                    changeButton('bt' + x + (y - 1));
                }

                var newX = 1 + parseInt(x);
                if (x + 1 <= maxX) {
                    changeButton('bt' + newX + y);
                }
                var newY = 1 + parseInt(y);
                if (y + 1 <= maxY) {
                    changeButton('bt' + x + newY);
                }

step++;

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

function changeButton(id) {
var button = document.getElementById(id);

            if (button.className === "darkButton") {
                button.className = "lightButton";
            }
            else {
                button.className = "darkButton";
            }
        }

        function createButton(id) {
            var button = document.createElement('button');
            button.id = id;
            button.className = "darkButton";
            return button;
        }
    </script>
</head>