教你用jQuery制作别踩白块网页版
1、首先，没有jQuery的去官网下载，如图。
没有Dreamweaver的去下载安装，不在多说，自己百度。
2、进入别踩白块，我们首先来分析一下这个游戏。注：我们只分析经典模式。
这个游戏的主体就是一个4*n的白格子，每一行有四个，共有n行。每一行中只有一个黑色的格子，玩家点击黑色的格子，直到过关，点错即失败。
值得一提的是：屏幕上方有计时器，显示用户所用时间，这样就更增加了这个游戏的可玩性！
如果没有计时器，这个游戏就缺少了互动，未免太乏味了。玩家可以把自己的所用时间“炫耀”到朋友圈或其他地方。
这样一来相当于免费给别踩白块打广告，二来又提高了这个游戏的玩家互动性，使玩家更加黏上这款游戏！
不愧是第一虐心手游。
3、分析之后，我们就开始做这款游戏的网页版了。
第一步：输出表格
首先，我们需要一个4*n的格子，这个我们可以用jQuery输出表格做到。
$(元素).append(HTML代码)；
利用这个加上for循环，我们可以输出任意行数的4列表格。
图示代码和表格效果。
4、js代码如下：
--------------------------------------------------------------------------------
function ym()//调用这个函数即可输出4*20的表格。
{var i,j,k;
var be,li;
var ss="";
be=4;//横着的块数
li=20;//共有多少行
for (i=1;i<=li;i++)
{ss+="<tr>";
for (j=1;j<=be;j++)
{ss+="<td id=\"a"+i+j+"\" tabindex='-1'>"+"<a name=\"b"+i+j+"\" id=\"b"+i+j+"\"></a></td>";}
//你可以看见，td里有一个a，那是一个锚，用来同步页面。
//注意，每一个td一定要加id，按照坐标加，否则很难用jQuery操作。id不能以数字开头。
ss+="</tr>";
}
$("#three").append(ss);//这里的#three是一个id为three的table
--------------------------------------------------------------------------------
html代码：
--------------------------------------------------------------------------------
<body>
<center>
<table width='1020px' border='1px' height="3280px" id="three" cellspacing="0" bgcolor="black">
<tbody>
<!-- 这里什么也不输入是因为用jQuery输出表格，当然，你也可以自己用html输出表格，但那样我个人觉得麻烦且无技术含量。 -->
</tbody>
</table>
</center>
--------------------------------------------------------------------------------
5、第二步：涂色白色
我们来给格子图上颜色，让它更像别踩白块！
涂色很简单，用CSS就ok啦。
--------------------------------------------------------------------------------
<style type="text/css">
#three td
{
height:163px;
width:250px;
background:#CCC;//灰色。白色改成white即可。
font-size:22px;
background-repeat:no-repeat;
}
</style>
--------------------------------------------------------------------------------
先把所有方块涂成白色吧!
也可以换成你想要的其他颜色！
6、第三步：涂色黑色
我们知道每一行都要有一个黑色块，所以我们必须在每一行涂一个黑色。
为了保证游戏的难度，这个任务交给随机数去做吧！
--------------------------------------------------------------------------------
k=randomo(1,5);//这样可以获得1,2,3,4中的随机数。
function randomo(mi,ma){return Math.floor(mi+Math.random()*(ma-mi));}//一个简单的随机数函数。
--------------------------------------------------------------------------------
接下来我们就要随即涂色了，通过随机得到的数字，给每一行的第n个涂上颜色，这时，td上的坐标id就起到作用了！
在这里我们需要用到jQuery的$().css();函数。
简单说明一下
$("#a11").css("background-color","white");//给第一行第一个格子涂上颜色
------------------------------------------------------------------------------
for (i=1;i<=li;i++)
{k=randomo(1,5);//获取随机数
ss="";
ss+="#a"+i+k;//将坐标翻译成id
$(ss).css("background-color","black");//涂成黑色
------------------------------------------------------------------------------
效果图如下（我没有改成黑白的，而是添加了图片）
这样看起来大体已经很像别踩白块了！
7、第四步：按键\触摸事件
首先说按键：需要用到jQuery的$(document).keyup(function(event){});
函数，即按键响应事件。
event.keyCode中有按键的值，至于值与按键的对应，
从A到Z：65-90
如图。
代码中的switch中有一个bs()函数，那是我自己定义的一个函数，在这个函数里，将判断是否按错（css是否是black）和将按对的变为白色（css变为白色）
代码不再写，上边涂色已经说过。
按错跳转页面，完成跳转页面什么的就不再多说了，自己做几个页面就可以了。
8、第五步：页面同步（锚的使用）
小编我技术有限，所以同步页面用的是html元素A，即抛锚跳转。
我不是没有试过滚动条自动滚动或页面下移，但这些都有点麻烦，虽然很有技术含量。
当然，用什么方法根据个人习惯即可。
还记得td里面的a吧，每一个td都有，而且有坐标id，那个就是用来跳转的。
如果没有这个，那么用户要手动下脱网页来进行游戏，而不是网页自己走。
所以锚还是非常重要的，没有这个，用户体验会非常不好。
设置锚已经设置好了，那么介绍使用。
用到js的一个函数location.hash。
location.hash="锚的id";//这句加到bs()(按键响应函数)里面，即玩家按对键页面下移。
这样页面便会随着玩家按键往下移动。
9、第六步：最后一步————计时器
这个就比较随意了，网上jQuery计时器一大堆，搜一个改改就可以用了。
关键是显示方式，个人觉得别踩白块的显示方式就很好，在最上边动态显示。
你也可以做一个浮动DIV，在页面最上边显示时间。感觉蛮好的。
浮动DIV推荐Bootstrap的，毕竟人家做的高大上。
再加上一个数据库，将用户数据进行比较，列出排行榜、新纪录、炫耀一下等东西，这个游戏的可玩性就更高了！
你也可以看一下我做的计时器，关注我可以查看我其他经验，里面有一篇是关于jQuery计时器的。
图示为不好的计时器，建议不要这样做！
