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

最近屌丝被迫学习TypeScript（不学就会被开除，5555），所以得先学JavaScript，这下可好，所有网页相关的东西都得要有所了解，否则没法忽悠BOSS。

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

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

效果图：

首先定义一个样式表，别忘了自定义的元素前都要加圆点，否则无效（菜鸟被这个玩意害了好多次啊）：
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（屌丝最近正在学的）。

重要部分都说完了，下面贴上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，还可以直接加断点调试，非常方便。

赞 (0)

相关推荐

  • 分享20款好玩的jQuery游戏

    分享20款好玩的jQuery游戏

    今天本文收集了20佳基于jQuery开发的特色游戏,一起来欣赏吧! 1- Tetris with jQuery 2- Game Query- Game engine for jQuery 3- JQuery Snake Game Plugin 4- JQuery Tic Tac Toe 5- jQuery Powered Mine Sweeper 6- Browser Shooter 7- Angel Dreams 8- Sudoku 9- Basic Memory Game with jQue

  • jQuery+PHP实现的掷色子抽奖游戏实例

    jQuery+PHP实现的掷色子抽奖游戏实例

    本文实例讲述了jQuery+PHP实现的掷色子抽奖游戏详细步骤.分享给大家供大家参考.具体分析如下: 该游戏是以大富翁游戏为背景,综合运用jQuery和PHP知识,设计出以掷色子点数来达成抽奖的效果,当然抽奖概率是可控的,开发者可以将本实例稍作修改即可运用到网站中的抽奖活动场景中.效果图如下: 完整实例代码点击此处本站下载. HTML部分: 首先我们需要准备两粒色子和奖品素材,这些作者已经打包上传了,请大家放心下载.我们将在html页面中写下如下的html结构代码,.wrap用来放置色子和提示信

  • jQuery制作拼图小游戏

    源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只有一张大图,然后每个元素的背景图用css的background-position进行切割定位,这样就需要16个数组[0,0],[-150,0],[-300,0]..........(我采用这种) [二]图片背景定位数组与布局定位数组 在选择了使用CSS定位切图,就需要生成数据. 需要的css背景 定位数组为:[0,0],[-150,0],[-300,0],[-450,0]

  • 使用jQuery实现的掷色子游戏动画效果

    实现原理:当色子掷出后,通过jQuery的animate()函数改变色子位移,中间加入延时效果,并变换色子背景,最终动画运行到随机产生的点数时停止,并显示掷出的点数.其实就是动画过程加入多个不同图片的帧(同flash动画影片中的帧),帧数越多效果越好,然后逐帧运行后就形成了动画效果.一.准备工作我们需要准备色子素材,本示例中,我采用从网络上获取到的色子素材,我们要做处理的是将6个色子图片(1-6点),以及中间过渡效果的图片(做运动模糊处理)放在同一张图片上,保存为dice.png,用作色子背景图

  • 基于jquery的地址栏射击游戏代码

    基于jquery的地址栏射击游戏代码

    演示地址:http://demo.jb51.net/js/2011/hunt/index.htm玩法向下看 请看地址栏上的字母 O! 你使用O来向 a射击. 使用键盘上的 左箭头 和 右箭头 移动字母O. 当O移动到 a 上时,按 空格键射击! 游戏会定时30秒时间,按ESC键重新开始. 注:请使用系统自带的IE浏览器来打开本链接. 你使用O来向 a射击. 使用键盘上的 左箭头 和 右箭头 移动字母O. 当O移动到 a 上时,按 空格键射击! // // 核心代码: 复制代码 代码如下: (fu

  • jQuery制作可自定义大小的拼图游戏

    我把大小限制在了3-10之间,实在闲的,或者有自虐倾向的可以试试改下.. 本来准备弄图片上去的,还没弄.. pintu.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • jQuery实现的五子棋游戏实例

    本文实例讲述了jQuery实现的五子棋游戏.分享给大家供大家参考.具体如下: 这是一款非常不错的代码,就是人工智能方面差了一点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • JQuery开发的数独游戏代码

    JQuery开发的数独游戏代码

    用了很多Jquery的插件,支持鼠标滚轮选数字.没有什么高深的技术点.工作原因很长时间没有更新了,具体代码都有些记不清了,欢迎大家来拍砖.截图:演示地址:http://demo.jb51.net/js/jsukudo/index.html下载地址:jsukudo20081110v0.3.0.5.zip 下载列表:http://code.google.com/p/jsukudo/downloads/list 用到的JS文件 文件名 出处 说明 blockUI.js http://malsup.co

  • jquery实现的美女拼图游戏实例

    本文实例讲述了jquery实现的美女拼图游戏.分享给大家供大家参考.具体如下: 这里可以自由打乱拼图次序,3*3,4*4等多种组合来进行格数拼图 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

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

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

    最近屌丝被迫学习TypeScript(不学就会被开除,5555),所以得先学JavaScript,这下可好,所有网页相关的东西都得要有所了解,否则没法忽悠BOSS. 今天学了一小会JavaScript,这里先做了一个简单的点灯游戏,算是练手吧.其中用到了JQuery,否则事件绑定就会蛋疼了. 做为JavaScript的Hello World,这个玩意就是下面这个东东.这里简单说一下实现方法. 效果图: 首先定义一个样式表,别忘了自定义的元素前都要加圆点,否则无效(菜鸟被这个玩意害了好多次啊):

  • jquery做的一个简单的屏幕锁定提示框

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 使用C++ MFC编写一个简单的五子棋游戏程序

    MFC简介: MFC(MicrosoftFoundationClasses)是微软基础类库的简称,是微软公司实现的一个c++类库,主要封装了大部分的windows API函数. MFC除了是一个类库以外,还是一个框架,在vc++里新建一个MFC的工程,开发环境会自动帮你产生许多文件,同时它使用了mfcxx.dll.xx是版本,它封装了mfc内核,所以你在你的代码看不到原本的SDK编程中的消息循环等等东西,因为MFC框架帮你封装好了,这样你就可以专心的考虑你程序的逻辑,而不是这些每次编程都要重复的

  • C语言实现一个简单的扫雷游戏

    C语言实现一个简单的扫雷游戏

    前言 扫雷跟上一篇文章的三子棋一样,是C语言基础知识的综合运用的实例,对于巩固我们的基础知识非常重要,同时扫雷作为C语言的一个小项目,锻炼我们的编程思维,也是一个不可多得的实践. 提示:以下是本篇文章正文内容 一.扫雷的基本思路 1.用C语言实现简单的扫雷,我们需要创建两个数组,一个数组存放雷的信息,另外一个数组存放排雷后结果的信息. 2.在创建数组时候,需要注意的是数组需要大一圈,什么意思?举个例子,比如说我们实现的是9 ×9的扫雷,那么我们的数组就得创建10×10.为什么呢? 原因如下: 因

  • JavaScript实现一个简单的圣诞游戏

    JavaScript实现一个简单的圣诞游戏

    目录 前言 实现效果 代码 CSS代码 JS代码 html代码 演示流程 前言 圣诞节快来了,热榜都被一堆圣诞树攻占了,这样的流量密码我怎么会错过,大家都发圣诞树,我就不发啦,直接分享一个圣诞小游戏给大家玩,代码太长一定要先赞和收藏. 实现效果 一个简单的2D网页小游戏它的制作过程是有规律可寻的,它每个部分都有一定的套路,我们应该 把有规律的部分总结在一起,形成一个模板,把相应的模板写好了,到要生产某个对象时就可以用 模板,还有游戏的整个流程每个函数,每个js文件之间都是分工明确的:我们要总结好

  • 使用Python编写一个简单的tic-tac-toe游戏的教程

    这个教程,我们将展示如何用python创建一个井字游戏. 其中我们将使用函数.数组.if条件语句.while循环语句和错误捕获等. 首先我们需要创建两个函数,第一个函数用来显示游戏板: def print_board(): for i in range(0,3): for j in range(0,3): print map[2-i][j], if j != 2: print "|", print "" 这我们使用两个for循环来遍历map,该map是一个包含了位置

  • nodejs实现的一个简单聊天室功能分享

    今天我来实现一个简单的聊天室,后台用nodejs, 客户端与服务端通信用socket.io,这是一个比较成熟的websocket框架. 初始工作 1.安装express, 用这个来托管socket.io,以及静态页面,命令npm install express --save,--save可以使包添加到package.json文件里. 2.安装socket.io,命令npm install socket.io --save. 编写服务端代码 首先我们通过express来托管网站,并附加到socke

  • JQuery入门—编写一个简单的JQuery应用案例

    一.官方网站下载:http://jquery.com 二.引入JQuery文件库 下载完后不用安装,只需将文件导入页面中即可,即在<head></head>中加入如下代码:<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"></script> 三.编写一个弹出对话框的简单应用. 复制代码 代码如

  • 用Python编写一个简单的俄罗斯方块游戏的教程

    俄罗斯方块游戏,使用Python实现,总共有350+行代码,实现了俄罗斯方块游戏的基本功能,同时会记录所花费时间,消去的总行数,所得的总分,还包括一个排行榜,可以查看最高记录. 排行榜中包含一系列的统计功能,如单位时间消去的行数,单位时间得分等. 附源码: from Tkinter import * from tkMessageBox import * import random import time #俄罗斯方块界面的高度 HEIGHT = 18 #俄罗斯方块界面的宽度 WIDTH = 10

  • jquery实现的一个简单进度条效果实例

    jquery实现的一个简单进度条效果实例

    jquery实现一个进度条的效果,或许在这里没有什么实际的作用,但是已经实现了进度条的部分原理,前端是怎么实现那种进度效果的. 效果演示: 进度条实现源码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&qu

随机推荐