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


Posted in Javascript onJuly 16, 2014

最近?潘勘黄妊??ypeScript(不学就会被开除,5555),所以得先学JavaScript,这下可好,所有网页相关的东西都得要有所了解,否则没法忽悠BOSS。

今天学了一小会JavaScript,这里先做了一个简单的点灯游戏,算是练手吧。其中用到了JQuery,否则事件绑定就会蛋疼了。

做为JavaScript的Hello World,这个玩意就是下面这个东东。这里简单说一下实现方法。

效果图:

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

首先定义一个样式表,别忘了自定义的元素前都要加圆点,否则无效(菜鸟被这个玩意害了好多次啊):
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标签中的东西,这个很简单,不多说了:

<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">

        您已经移动了 <label id="step">0</label> 步。

    </div>

</body>

然后,先实现一个很简单的验证,在点击开始按钮后,判断用户输入是否是数字,并且是否在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 <= 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是一个方法,用于生成和设置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 <= maxX) {

    changeButton('bt' + newX + y);

}

如果不parseInt,JavaScript会把1当作字符串和后面的x拼起来,这样id就不对了,所以把x转成int后相加即可(上面那个相减的情况不需要这样做)。这就是无类型语言的弊端之一吧,所以才会出现TypeScript(?潘孔罱??谘У模??/p>

重要部分都说完了,下面贴上htm文件所有的代码。

<!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('横纵的单元格中之能输入数字。');

                    return;

                }

                else if ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val() >= 10) {

                    alert('横纵的数量不能小于 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">

        您已经移动了 <label id="step">0</label> 步。

    </div>

</body>

</html>

如果想运行代码,只需要把最开始的样式表保存成app.css,然后把这一段完整的代码保存成default.htm,然后放在同一个文件夹下,用浏览器打开htm文件就行了(IE要启用ActiveX)。

需要注意的是,这玩意和浏览器的兼容性有很大的关系,所以不保证在所有浏览器(和任意版本)上都能正常运行。。。

对了,最后多说一点。你可以用Visual Studio 2012来编辑html和JavaScript,会有Intellisense,还可以直接加断点调试,非常方便。

Javascript 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
Javascript中的var_dump函数实现代码
Sep 07 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
js使用心得分享
Jan 13 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
Vue自定义多选组件使用详解
Sep 08 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
jQuery ajax调用WCF服务实例
Jul 16 #Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 #Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 #Javascript
js用typeof方法判断undefined类型
Jul 15 #Javascript
js的image onload事件使用遇到的问题
Jul 15 #Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 #Javascript
js拼接html注意问题示例探讨
Jul 14 #Javascript
You might like
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
python系列 文件操作的代码
2019/10/06 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
python 实现音频叠加的示例
2020/10/29 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
建筑工程毕业生自我鉴定
2014/01/14 职场文书
新学期开学寄语
2014/01/18 职场文书
五年级小学生评语
2014/12/26 职场文书
监守自盗观后感
2015/06/10 职场文书
小学课改工作总结
2015/08/13 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
React列表栏及购物车组件使用详解
2021/06/28 Javascript
Redis+AOP+自定义注解实现限流
2022/06/28 Redis