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数据分享
May 12 Javascript
javascript中expression的用法整理
May 13 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
详解JavaScript常量定义
Jan 03 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
php实现映射操作实例详解
2019/10/02 PHP
js字符编码函数区别分析
2008/06/05 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
axios学习教程全攻略
2017/03/26 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
微信小程序时间戳转日期的详解
2019/04/30 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
详解python中的 is 操作符
2017/12/26 Python
对Python3中的input函数详解
2018/04/22 Python
python os.path模块常用方法实例详解
2018/09/16 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Python continue语句实例用法
2020/02/06 Python
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
信息部岗位职责
2013/11/12 职场文书
个人党性剖析材料
2014/02/03 职场文书
超市重阳节活动方案
2014/02/10 职场文书
毕业典礼邀请函
2015/01/31 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server