1、首先，没有jQuery的去官网下载，如图。没有Dreamweaver的去下载安装，不在多说，自己百度。
4、js代码如下：----颍骈城茇----------------------------------------------------------------------------functio荏鱿胫协n 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>--------------------------------------------------------------------------------
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计时器的。图示为不好的计时器，建议不要这样做！
