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焦点的方法小结
Oct 08 Javascript
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 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
实用函数3
2007/11/08 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
python类和继承用法实例
2015/07/07 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
Ejb技术面试题
2015/04/29 面试题
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
保安辞职信范文
2015/02/28 职场文书
刑事起诉书范文
2015/05/19 职场文书
离婚代理词范文
2015/05/23 职场文书
小学教师读书笔记
2015/07/01 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python