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高度：70 px；背景-颜色：绿色；}。lightButton { width:70px高度：70 px；背景色：浅蓝色；}。返回{ font-size : small；}

接下来实现整体布局，也就是车身标签里的东西，很简单，不多说：

复制代码如下：车身H1转动所有的灯泡，如果你可以！/h1 hello div id=' option '标签为=' x '横向：/labeinputtype=' number' id=' x '值=' 5'/labeinputtype=' y '纵向：/labeinputtype=' number' id=' y '值=' 4'/Button id='startButton '开始游戏/Button/div id=' content '

/div div id='stepCounter '您已经移动了标签id=' step ' 0/标签步骤。/div/body

然后，首先实现一个简单的验证。点击开始按钮后，判断用户输入的是否是数字，是否在4-9的范围内。

复制代码如下： $(文档)。ready (function () {$ (startbutton))。单击(function(){ if(step 0){ if(confirm)'(确定要重新开始游戏吗？)===false)返回；}

If (isnan ($ (x))。val ()) | | isnan ($ (y)。val ())) {alert('您可以在水平和垂直单元格中输入数字。);返回；} else if ($ (x)。val () 4 | | $ (y)。val () 4 | | $ (x)。val ()=10 | | $ (y)。val ()=10) {alert('水平和垂直的数量不能小于4，也不能大于9。' );返回；}

startGame()；});});

$()是使用的JQuery库。基本上，这里使用的选择器主要包括：$(" # xxx ")id为XXX的第一个元素；$ (".xxx”)风格xxx的所有元素。

Step是我定义的变量，用户记录用户按了多少次。

用户每次按下开始按钮后，清除原始按钮(如果有)。使用JQuery很容易实现，只需将其与样式相匹配：

复制代码如下：$('。黑暗按钮’)。移除()；$('.light BUTTON’)。移除()；$('.返回')。移除()；

然后生成一堆按钮。这是非常常规的，不需要解释：

复制代码如下： vargrid=document . getelementbyid(' content ')；

for(var I=1；I=x；I){ for(var j=1；j=y；j){ var button=create button(' Bt ' I j)；

grid.appendChild(按钮)；}

var ret=document . create element(' br ')；ret.className=' return

grid . appendchild(ret)；}

CreateButton是一种用于生成和设置html元素的方法。我这里用bt行号和列号来命名按钮的id，方便以后知道按哪个按钮。为了方便，我规定行号和列号必须小于10(好懒)，所以只取倒数第二个字符或者第二个字符就知道坐标值了。

一个程序最重要的逻辑：按下一个按钮会改变它自己和相邻按钮的状态。我们只需要取出坐标，改变上下左右按钮的状态(注意跨境情况的判断)。在这里写一个判断：

复制代码如下： $('。dark button’)。点击(function () {changebutton(此。id)；

var x=this . id . charat(2)；var y=this . id . charat(3)；

if(x-1 0){ change button(' Bt '(x-1)y)；}

请注意，这是在JQuery中定义的。没有JQuery要做到这一点并不容易。需要提醒您的是以下代码：

复制代码如下： var newX=1 parseInt(x)；if(x 1=MaxX){ change button(' Bt ' NewX y)；}

如果不解析器会把一当作字符串和后面的x拼起来，这样编号就不对了，所以把x转成（同国际组织)国际组织后相加即可（上面那个相减的情况不需要这样做)。这就是无类型语言的弊端之一吧，所以才会出现TypeScript(屌丝最近正在学的)。

重要部分都说完了，下面贴上超文本标记语言文件的后缀文件所有的代码。复制代码代码如下：DOCTYPE html

html lang=' en ' head meta charset=' utf-8 '/title开灯/title link rel='样式表href=' app。CSS ' rel=' external no follow ' type=' text/CSS '/script type=' text/JavaScript ' src=' http :http://Ajax。谷歌API。com/Ajax/libs/jquery/1。4 .0/jquery。量滴js '/script脚本$(文档)。ready(function () { $(startButton)).单击（函数(){如果(步骤0) { if(确认('乃确定要重新开始游戏么？)===false)返回；}

if (isNaN($(X)).val()) || isNaN($(Y).val())) { alert('横纵的单元格中之能输入数字。');返回；} else if ($(X).val(4)| $(Y).val(4)| $(X).val()=10 || $(Y).val()=10) { alert('横纵的数量不能小于4,且不能大于9。');返回；}

startGame()；});});/script

脚本var maxX，maxY

定义变量步长=0;

函数startGame() { maxX=$(X).val()；maxY=$(Y).val()；makeGrid(maxX，MaxY)；step=0；document.getElementById('步骤').innerHTML=step}

函数makeGrid(x，y) { $(' .黑暗按钮')。移除();$('.light BUTTON’).移除();$('.返回')。移除();

var网格=文档。getelementbyid(' content ')；

for(var I=1；I=x；I){ for(var j=1；j=y；j){ var button=create button(' Bt ' I j)；

grid.appendChild(按钮);}

var ret=文档。创建元素(' br ')；ret .类名=' ret

网格。阑尾切除术(ret)；}

$('.黑暗按钮')。单击(function(){ change button(此。id))；

var x=这个。身份证。charat(2)；var y=这个。身份证。charat(3)；

if(x-1 0){更改按钮(' Bt '(x-1)y)；} if(y-1 0){更改按钮(' Bt ' x(y-1))；}

var NEwX=1 ParSeint(x)；if(x 1=MaxX){更改按钮(' Bt ' NewX y)；} var NEwY=1 ParSeint(y)；if(y 1=MaxY){更改按钮(' Bt ' x NewY)；}

步骤；

document.getElementById('步骤').innerHTML=step })；}

功能更改按钮(id){ var button=document。getelementbyid(id)；

if(按钮。类名==' DarkButton '){ button。类名='灯光按钮'；} else { button。类名=' DarkButton} }

函数创建按钮(id){ var button=document。创建元素(“按钮”)；button . id=id button . class name=' DarkButton返回按钮；}/脚本/标题

身体氕如果可以的话，关掉所有的灯泡！/h1 Hello div id='option '标签为='X '横向：/标签输入类型='number' id='X '值='5' /标签为='是'纵向：/标签输入类型=' number ' id=' Y ' value=' 4 '/button id=' start button '开始游戏/button /div div id='content '

/div div id='stepCounter '您已经移动了标签id=' step ' 0/标签步/div/body/html

如果想运行代码，只需要把最开始的样式表保存成app.css，然后把这一段完整的代码保存成default.htm，然后放在同一个文件夹下，用浏览器打开超文本标记语言文件的后缀文件就行了（工业工程要启用ActiveX)。

需要注意的是，这玩意和浏览器的兼容性有很大的关系，所以不保证在所有浏览器（和任意版本)上都能正常运行。

对了，最后多说一点。你可以用Visual Studio 2012来编辑超文本标记语言和JavaScript，会有智能感知，还可以直接加断点调试，非常方便。