JQuery做的一个简单的点灯游戏分享__return_remove_val_step_document_

当前位置: 编程技术>WEB前端

JQuery做的一个简单的点灯游戏分享

来源: 互联网发布时间：2014-08-25

本文导语: 最近屌丝被迫学习TypeScript（不学就会被开除，5555），所以得先学JavaScript，这下可好，所有网页相关的东西都得要有所了解，否则没法忽悠BOSS。今天学了一小会JavaScript，这里先做了一个简单的点灯游戏，算是练手吧。其中用...

最近屌丝被迫学习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() < 4 || $(Y).val() < 4 || $(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 = 10 || $(Y).val() >= 10) {
                    alert('横纵的数量不能小于 4，且不能大于 9。');
                    return;
                }

                startGame();
            });
        });

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

var newX = 1 + parseInt(x);
if (x + 1