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 相关文章推荐
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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 获取文件权限函数介绍
2013/07/11 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
php实现的简单日志写入函数
2015/03/31 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
Python对列表中的各项进行关联详解
2017/08/15 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
自荐信结尾
2013/10/27 职场文书
中学生操行评语大全
2014/04/24 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
班级口号大全
2014/06/09 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
Linux中sftp常用命令整理
2022/06/28 Servers