欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery做的一個(gè)簡(jiǎn)單的點(diǎn)燈游戲分享

 更新時(shí)間:2014年07月16日 10:26:08   投稿:junjie  
這篇文章主要介紹了JQuery做的一個(gè)簡(jiǎn)單的點(diǎn)燈游戲分享,點(diǎn)燈游戲是一個(gè)十分有趣的智力游戲,需要的朋友可以參考下

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

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

做為JavaScript的Hello World,這個(gè)玩意就是下面這個(gè)東東。這里簡(jiǎn)單說(shuō)一下實(shí)現(xiàn)方法。

效果圖:

首先定義一個(gè)樣式表,別忘了自定義的元素前都要加圓點(diǎn),否則無(wú)效(菜鳥被這個(gè)玩意害了好多次?。?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;
 }

接下來(lái)實(shí)現(xiàn)整體布局吧,就是body標(biāo)簽中的東西,這個(gè)很簡(jiǎn)單,不多說(shuō)了:

復(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)移動(dòng)了 <label id="step">0</label> 步。
    </div>
</body>


然后,先實(shí)現(xiàn)一個(gè)很簡(jiǎn)單的驗(yàn)證,在點(diǎ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庫(kù)。基本上,這里用到的選擇器主要有:$(“#xxx”) 第一個(gè)id為xxx的元素;$(“.xxx”) 樣式為xxx的所有元素。

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

在每次用戶按了開始按鈕后,先把原來(lái)畫的按鈕清掉(如果有的話)。用JQuery很容易實(shí)現(xiàn),用樣式去匹配就可以了:

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

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

然后就是生成一堆按鈕了。這個(gè)很常規(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是一個(gè)方法,用于生成和設(shè)置html的元素。我這里button的id命名采用bt+行號(hào)+列號(hào),這樣方便知道以后按的是哪個(gè)按鈕。為了方便期間,我規(guī)定行號(hào)和列號(hào)必須小于10(好偷懶?。?,這也樣直接取倒數(shù)第一個(gè)或第二個(gè)字符就知道坐標(biāo)值了。

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

復(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想拿到這個(gè)this那可不容易。要提醒一點(diǎn)的就是下面這一段代碼:


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

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

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

重要部分都說(shuō)完了,下面貼上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>

    <script>
        var maxX, maxY;

        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>

<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)移動(dòng)了 <label id="step">0</label> 步。
    </div>
</body>
</html>

如果想運(yùn)行代碼,只需要把最開始的樣式表保存成app.css,然后把這一段完整的代碼保存成default.htm,然后放在同一個(gè)文件夾下,用瀏覽器打開htm文件就行了(IE要啟用ActiveX)。

需要注意的是,這玩意和瀏覽器的兼容性有很大的關(guān)系,所以不保證在所有瀏覽器(和任意版本)上都能正常運(yùn)行。。。

對(duì)了,最后多說(shuō)一點(diǎn)。你可以用Visual Studio 2012來(lái)編輯html和JavaScript,會(huì)有Intellisense,還可以直接加斷點(diǎn)調(diào)試,非常方便。

相關(guān)文章

最新評(píng)論