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 相关文章推荐
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 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/12/27 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Python中变量交换的例子
2014/08/25 Python
详解Python中的各种函数的使用
2015/05/24 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python实现简易版计算器
2020/06/22 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
超市中秋节促销方案
2014/03/21 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
个人合作协议书范本
2014/04/18 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
vue实现滑动解锁功能
2022/03/03 Vue.js